Alt-Web Design & Publishing
CSS 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 bloat is significantly reduced making your pages leaner and faster loading. For another take on CSS styled tables, see 3-Color Columned Table.

Example:

Zebra Table styled with CSS
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:

How I survived a computer disaster

 

Spam Filter - Free Trial

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; }

.subtitle {font: 14px bold; font-style:italic; color:#000;}

/**Zebra Stripes**/

tr td {background-color: #F1F1F1;}

tr.odd td {background-color: #ECE7CA;}


Earn money from your website with Lunarpages Affiliate Program.
Lunarpages.com Web Hosting

XHTML Code

<table cellspacing="0" cellpadding="5">

<caption>Zebra Table styled with CSS</caption>

<tr>
<th>Table Header 1<br />
<span class="subtitle">Subtitle</span></th>
<th>Table Header 2 <br />
<span class="subtitle"> Subtitle</span></th>
<th>Table Header 3<br />
<span class="subtitle">Subtitle</span></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>

 

 

bookmarks

 

 

Lunarpages.com Web Hosting

 

Valid XHTML 1.0 Transitional    Valid CSS!

Demos:

CSS Templates: