Super easy zebra-striped tables using CSS selectors

October 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.

Wow! Super simple! Much better and cleaner than using JavaScript or coding each table row with an odd/even class.

The result

Here’s the result (ignore the ugly colors — they were just for testing the code):

zebra_tables01 The CSS

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.)

One comment

  1. This is very nice and helpful tutorial, recently i also wrote the same tutorial but i also added the auto numbering with each row, hope you find it helpful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: