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

HTML

<table summary="Employee Pay Sheet" id="hor-minimalist-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

#hor-minimalist-a {
background:#FFF none repeat scroll 0 0;
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#hor-minimalist-a th {
border-bottom:2px solid #6678B1;
color:#039;
font-size:14px;
font-weight:normal;
padding:10px 8px;
}
#hor-minimalist-a td {
color:#669;
border-bottom:1px solid #CCC;
padding:9px 8px 0;
}
#hor-minimalist-b tbody tr:hover td {
color:#009;
}