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

HTML

<table summary="Most Favorite Movies" id="ver-zebra">
<colgroup>
<col class="vzebra-odd"/>
<col class="vzebra-even"/>
<col class="vzebra-odd"/>
<col class="vzebra-even"/>
    </colgroup>
<thead>
<tr>
<th id="vzebra-comedy" scope="col">Comedy</th>
<th id="vzebra-adventure" scope="col">Adventure</th>
<th id="vzebra-action" scope="col">Action</th>
<th id="vzebra-children" scope="col">Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>Scary Movie</td>
<td>Indiana Jones</td>
<td>The Punisher</td>
<td>Wall-E</td>
</tr>
<tr>
<td>Epic Movie</td>
<td>Star Wars</td>
<td>Bad Boys</td>
<td>Madagascar</td>
</tr>
<tr>
<td>Spartan</td>
<td>LOTR</td>
<td>Die Hard</td>
<td>Finding Nemo</td>
</tr>
<tr>
<td>Dr. Dolittle</td>
<td>The Mummy</td>
<td>300</td>
<td>A Bug’s Life</td>
</tr>
</tbody>
</table>

CSS

#ver-zebra {
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:0 20px 20px;
text-align:left;
width:480px;
}
.vzebra-odd {
background:#EFF2FF none repeat scroll 0 0;
}
.vzebra-even {
background:#E8EDFF none repeat scroll 0 0;
}
#ver-zebra th {
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#003399;
font-size:14px;
font-weight:normal;
padding:12px 15px;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action {
background:#DCE4FF none repeat scroll 0 0;
border-bottom:1px solid #D6DFFF;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children {
background:#D0DAFD none repeat scroll 0 0;
border-bottom:1px solid #C8D4FD;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action {
background:#DCE4FF none repeat scroll 0 0;
border-bottom:1px solid #D6DFFF;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children {
background:#D0DAFD none repeat scroll 0 0;
border-bottom:1px solid #C8D4FD;
}
#ver-zebra td {
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#669;
padding:8px 15px;
}