How to Set Style Tables on HTML using CSS

By default, usually in the Table will appear in the HTML browser, such as that shown in the  example to create a Tags Table.

But using CSS Table, we can set the elements of the existing elements in the Table, such as Text, Image and Background. For example we want to create a table like this:

List of Student Class IIIA
Name Address Date of Birth
Andy. R Jl. Setia Budi, 20A 22-4-1992
Budianto Jl. Merdeka, 23B 12-2-1993
Brandy. W Jl. Anyelir, 11C 10-1-1992
Cyntia Dewi Jl. Pahlawan. 10C 13-8-1993
The solution is as follows:
First, we create the HTML code by using its Class and ID Selector, for example:

<table border=”0″>
<tbody>
<tr>
<th colspan=”3″>List of Student Class IIIA</th>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Date of  Birth</td>
</tr>
<tr>
<td>Andy. R</td>
<td>Jl. Setia Budi, 20A</td>
<td>22-4-1992</td>
</tr>
<tr>
<td>Budianto</td>
<td>Jl. Merdeka, 23B</td>
<td>12-2-1993</td>
</tr>
<tr>
<td>Brandy. W</td>
<td>Jl. Anyelir, 11C</td>
<td>10-1-1992</td>
</tr>
<tr>
<td>Cyntia Dewi</td>
<td>Jl. Pahlawan. 10C</td>
<td>13-8-1993</td>
</tr>
</tbody>
</table>

Second, we make its CSS file as follows:

table.listItem {
width:100%;
padding:0.1em;
text-align:center;
border:1px #009966 solid;
background:#FFFFFF;}

table.listItem th {
font-size:1.4em;}

table .nameItem {
background:#006666;
font-weight:bold;
color:#FFFFFF;}

table .oldRow {
background:#009999;}

table .evenRow {
background: #00CC99;}

OK, download the HTML code and CSS code above, and if you see in the browser as a result will like Table above.
Congratulations ….! Testing

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *