- Created on Wednesday, 05 January 2011 14:01
- Last Updated on Saturday, 15 February 2014 16:11
- Written by Terrence
- Hits: 4012
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
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:
To add Zebra Strips to a table, all you need to do is adding the following pseudo-class.
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"
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:
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.
Now we will style the table. Let's start with the general style for the table:
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:
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:
The footer td cells style will be:
And that's it!.
The page renders correctly in modern browsers only.