Zebra-striping Tables with CSS3

, , Leave a comment

Today I'm going to show you How to use Zebra Stripping tables in CSS3. Zebra-striping tables is certainly not a new thing, it has been done and discussed for years. Zebra Stripping is the technique of having different colors per each line. It is generally considered to help users read large tables of information.

First we will start with the markup

The Mark up

{code} <table class="table1">

<thead>
<tr>
<th></th>
<th>Sendesignz Starter</th>
<th>Sendesignz bronze</th>
<th>Sendesignz silver</th>
<th>Sendesignz gold</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Price per month</th>
<td>$ 12.90</td>
<td>$ 15.90</td>
<td>$ 19.90</td>
<td>$ 29.90</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Disk Storage</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th>Bandwidth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th>Website Addon</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th>FTP Addon</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th>MSSQL 2008</th>
<td>$5/month</td>
<td>$5/month</td>
<td>$5/month</td>
<td>$5/month</td>
</tr>

</tbody>

</table> {/code}
We have all the elements a table needs, a header, a body and a footer. In this tutorial we will use a hosting plan comparison table as example.

CSS Table Final Output you will get:

Highlighting a table's alternate rows in a series, has traditionally involved javascript, then looping through them and highlighting all the odd elements. CSS 3 introduces the pseudo-class “nth-child”, which makes it ridiculously simple to do this without javascript.

To add Zebra Strips to a table, all you need to do is adding the following pseudo-class.
{code} tbody tr:nth-of-type(2n+1){
background:rgba(212,229,255,0.5);

} {/code}
The value n+1 is actually simple:

  • 2n selects every second item. If you wrote 3n it would select every third item, 4n every fourth item, and so on.
     
  • The +1 tells the browser to start at element 1. You probably know that all arrays start at 0, and this is also true here. This means that element 1 is actually the second element in the series.

Alternatively, you could use "odd" and "even"
{code} tbody tr:nth-of-type(odd){
background:rgba(212,229,255,0.5);
} {/code} {code} tbody tr:nth-of-type(even){
background:rgba(212,229,255,0.5);

} {/code}

Now we want to select specific "th" cells in the header and td cells in the footer to give them a unique color. With the :nth-child(number) we can select the exact child:
{code} .table1 thead :nth-child(2),
.table1 tfoot :nth-child(2){
background-color: #c8e5ff;

}

.table1 thead :nth-child(3),
.table1 tfoot :nth-child(3){
background-color: #aed7fc;
}
.table1 thead :nth-child(4),
.table1 tfoot :nth-child(4){
background-color: #98ccfd;
}

.table1 thead :nth-child(5),
.table1 tfoot :nth-child(5){
background-color: #7ec0fe;

} {/code}
Now we are going to style the headers and footers with rounded corners. The border-radius property rounds the top left, bottom left, top right and bottom right border of the cells.

{code} .table1 tfoot :nth-child(2){
-moz-border-radius:0px 0px 0px 5px;
-webkit-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
}
.table1 thead :nth-child(2){
-moz-border-radius:5px 0px 0px 0px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
}

.table1 thead :nth-child(5){
-moz-border-radius:0px 5px 0px 0px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
}
.table1 tfoot :nth-child(5){
-moz-border-radius:0px 0px 5px 0px;
-webkit-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;

} {/code}
Now we will style the table. Let's start with the general style for the table:

{code} table.table1{
font-family: Arial;
font-size: 12px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse:separate;

} {/code}
To make some space between the table cells make the border-collapse separate.

The common style for all th cells in the header will be:
{code} .table1 thead th{
padding:6px 10px;
text-transform:uppercase;
color:#000;
font-weight:bold;
border-bottom:5px solid #1d5182;

} {/code}

Now, we have to take care of that on th that is empty. With CSS3 selectors we can do some unbelivable things, and this is one of them: select the th that is empty. Below the style:
{code} .table1 thead th:empty{
background:transparent;
border:none;

} {/code}

The footer td cells style will be:
{code} .table1 tfoot td{
font-size:14px;
font-weight:bold;
padding:5px;
text-shadow:1px 1px 1px #fff;

} {/code}
And that's it!.
The page renders correctly in modern browsers only.

Share this: