Super easy zebra-striped tables using CSS selectorsOctober 16, 2013
I read about this trick in an article in the October 2013 issue of Australian Personal Computer (‘Powerful styling with CSS selectors’ by John Allsopp, p98-100) and thought I’d give it a try.
Here’s the result (ignore the ugly colors — they were just for testing the code):
Here’s the code in my test CSS file that created the differently colored rows for odd and even rows (yes, I comment my code, especially where I can’t figure out what a color is by the hex value):
How simple and elegant is that! Basically just two lines of CSS and you’re done. Of course, substitute your own colors.
One caveat: If you have a TH row at the top of the table, it gets ‘counted’ as Row 1 (an odd row), so the color striping is ‘out’ by one.
And here’s the bare bones HTML code I used for my test file:
Thanks for the article, John!
(John’s article has more on how this all works, and how to assign different column colors using math in the CSS, but for this post I just wanted to share the simplicity of the doing ‘zebra’ striped tables with CSS.)