Tabellen zijn gedacht voor het weergeven van data (dat is een globaal begrip) niet om layout van een website te maken. Dit is deel 2 van verschillende mogelijkheden van tabellen van style te voorzien.

HTML

<table summary="Employee Pay Sheet" id="box-table-a">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>

CSS

#box-table-a {
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#box-table-a th {
background:#B9C9FE none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:4px solid #AABCFE;
color:#039;
font-size:13px;
font-weight:normal;
padding:8px;
}
#box-table-a td {
background:#E8EDFF none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:1px solid transparent;
color:#669;
padding:8px;
}
#box-table-a tr:hover td {
background:#D0DAFD none repeat scroll 0 0;
color:#339;
}