Alt-Web Design & Publishing
CSS2 Zebra Table
Description:
Table rows with alternating background colors or stripes are commonly known as Zebra tables. Tables styled with CSS are more efficient than HTML styled tables. By keeping style separate from content, HTML code is reduced making your pages leaner and faster loading.
Tested and works in IE6+, Firefox 2+, Chrome, Safari & Opera.
For a newer take on styling Zebra Tables with :nth-child selectors, see CSS3 Zebra Tables (new).
Example:
| Table Header 1 Subtitle |
Table Header 2 Subtitle |
Table Header 3 Subtitle |
|---|---|---|
| even | some text here | some text here |
| odd | Some text here | Some text here |
| even | Some text here | Some text here |
| odd | Some text here | Some text here |
Method:
CSS2 Code
table {
width: 90%;
border: 2px groove silver;
font: 12px Geneva, Arial, Helvetica, sans-serif;
margin: 0 auto; /**centers table on screen**/
}
caption {
font-size: 2em;
text-align:left;
color: #336699;
font-style:italic;
line-height: 1.8;
font-weight: bold;
}
th {
font:16px bold Arial, Helvetica, sans-serif;
color: maroon;
text-align:center;
background-color: #FFFF99;
}
th,td,tr {border: 1px solid silver; vertical-align:middle; height: 45px; }
em {font-size: 14px bold; font-style:italic; color:#000;}
/**Zebra Stripes**/
tr td {background-color: #F1F1F1;}
tr.odd td {background-color: #ECE7CA;}
XHTML Code
<table cellspacing="0" cellpadding="5">
<caption>Zebra Table styled with CSS</caption>
<tr>
<th>Table Header 1<br />
<em>Subtitle</em></th>
<th>Table Header 2 <br />
<em>Subtitle</em></th>
<th>Table Header 3<br />
<em>Subtitle</em></th>
</tr>
<tr>
<td>even</td>
<td>some text here</td>
<td>some text here</td>
</tr>
<tr class="odd">
<td>odd </td>
<td>Some text here </td>
<td>Some text here </td>
</tr>
<tr>
<td>even </td>
<td>Some text here </td>
<td>Some text here </td>
</tr>
<tr class="odd">
<td>odd </td>
<td>Some text here </td>
<td>Some text here </td>
</tr>
</table>
