Zebra-striping tables is certainly not a new thing; it has been done and discussed for years. They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another. I say allegedly, there has been research into their effectiveness, conducted by Jessica Enders over at A List Apart which proved pretty inconclusive.
Striping a table’s alternate rows couldn’t be simpler. By programatically adding a class of odd or suchlike to every other <tr> you can then apply styles to this row (usually a pale background colour) and create zebra-stripes. An even better method would be to ditch the extraneous class and use the nth-of-type selector, thus:
tbody tr:nth-of-type(odd){
background:rgba(255,255,136,0.5); /* Pale yellow with 50% opacity */
}What the nth-of-type selector is doing here is looking for every odd <tr> in the <tbody>, that is to say the 1st, 3rd, 5th, 7th and so on.
By understanding this, we can apply that logic to create zebra-striped columns, too. Thus:
tbody td:nth-of-type(odd),
thead th:nth-of-type(odd){
background:rgba(255,255,136,0.5);
}Above: Here we target every other <th> in the <head>, and <td> in the <tbody>.
We can also combine the two, to create a table where every other row and every other column is striped simultaneously, and by using the rgba() colour declaration we can effectively layer the stripes, therefore showing where they cross over. The code for this simply combines the two:
tbody td:nth-of-type(odd),
tbody tr:nth-of-type(odd),
thead th:nth-of-type(odd){
background:rgba(255,255,136,0.5);
}You wanna see a demo?
Sure thing, here you go…
Addendum
After questions about browser support, I have decided to add a little onto the article…
The selectors involved here are only supported in CSS3 capable browser, that is to say pretty much anything but Internet Explorer. However, due to zebra-striping’s negligible benefits and inherently progressive nature, I don’t feel that it is a feature that is important enough to warrant full cross-browser support. Research shows that tables are just as usable without zebra-striping as with, therefore in IE et al, the user is not receiving a sub-par experience.
Of course if you do want to support Internet Explorer, you can always revert to programmatically adding an odd class to <tr>, <th> and <td> elements.
By Harry Roberts on Tuesday, August 31st, 2010 in Web Development. Tags: CSS, Tables, Usabiliy | 14 Comments »
+
Iain Fergus said on 31 August, 2010 at 10:46 pm
I’ve recently used the nth-of-type selector to apply a very basic zebra striping, but never consider it’s use along with rgba to create a layering effect. Clever stuff!
Nice post Harry.
dVyper said on 1 September, 2010 at 11:13 am
Unfortunately it seems this method doesn’t work in IE7 :-(
matt said on 3 September, 2010 at 12:04 am
does that work in all browsers?
Ramm said on 3 September, 2010 at 12:17 am
Yeah, this is very nice, but it doesn’t work for production since IE 6, 7 and 8 don’t support this selector. This could be very nice to work with in meny other scenarios… only if….
Graham Miller said on 3 September, 2010 at 8:11 am
A lot of CSS3 doesn’t work in IE7 – but future IE versions should be a different story. Another reason to move to Chrome.
Chordian said on 3 September, 2010 at 8:14 am
It works in the newest versions of Firefox, Google Chrome and Opera. It doesn’t work in IE6, IE7 or even IE8.
Russell Bishop said on 3 September, 2010 at 9:23 am
I like the idea of using rgba to double-highlight a cell, that’s great!
With regards to these IE issues, firstly, it doesn’t HAVE to work in IE. Zebra striping isn’t essential (probably).
But this should work in IE6+ using ie-css3.js (assuming the user has JavaScript enabled).
Matthew Carleton said on 3 September, 2010 at 11:19 am
@Russel, I think thats a good point. Not using certain things that aren’t detrementel to the design because of IE problems shouldn’t be a concern. IE can go blow itself.
Neonjack said on 25 October, 2010 at 3:25 pm
Well, all those comments on IE* are so not realistic…
Really? IE can blow itself? Come on people, what are you talking about? People who pay to get websites WANT their website to work on IE, because they use IE, their client use IE, your mother use IE. Is it good? Of course not!
So what do you say to your client? Blow yourself?
Right. Don’t be surprised if he blows your check.
I would…
Rizky Syazuli said on 2 November, 2010 at 5:18 am
@Neonjack: the key is to educate.. let people know there’s better browser than IE. tell that to your client and your mother (my mother use safari btw).. i know it’s easier said than done.. but you should start doing it..
this is how i do it to my last client who uses IE in their office: give em a list of browser stats from few of my most visited websites. and let them know that IE is mostly in the bottom of those lists.
their company uses IE, of course.. so does many other big corporates. but i simply tell them that’s just not the case outside of your company wall.. the people who uses their products and their sites are not forced to use IE like they do..
in the end.. some may understand.. some don’t… but there’s no harm in trying.. right guys?
Neonjack said on 12 November, 2010 at 6:55 pm
@Rizky: Yes, I agree with you. We push Open Source and all sorts of things, but still, many clients just listen to us, with blank eyes, and ends up saying “so does that mean our site will also work in IE?”.
So I totally embrace all that you said. But I still think that in some case, unfortunately, we still have to make IE7 compliant sites.
How about Graceful Degradation…
Matt Berridge said on 24 January, 2011 at 2:50 pm
You could use Selectivizr to generate support for nth-child and nth-of-type in IE
You could also use jQuery to add
.oddclasses dynamicallyAnd if you’re using the
<!--[if IE ]>-->statement method on thebodyorhtmlelement – only apply this to IE 8 and below specifically.Gerard Banasig said on 3 March, 2011 at 7:43 pm
Yeah, I agree to make the zebra table work on IE, you can use jquery.
zvz said on 26 April, 2011 at 3:55 pm
Assign background to TR is not a good idea (should be TD), but looks it works for most browsers, so no need to worry :) I wrote article about creating zebra stripes using multiple techniques also in plain JavaScript. Hope, someone will find it useful.
http://www.iinuu.eu/en/it-guru/how-to-create-zebra-stripes-in-table-smarty-jquery-css3