How do I style the background color of alternating table rows?

Question

I was was just wondering how to get this kind of design done when things are fetched dynamically? I mean there has to be only one class which can be used to get the background colour depending upon whether block is odd or even. I hope my requirements are clear: background color varying with the odd or even number for the rows.

Answer 1

You're looking for alternating rows. This is accomplishable by adding a different class to every other row.

Tutorials are plenty on how to do this.

CSS3 also provides a new way to do this without adding classes:

tr:nth-child(odd)   { background-color:#eee; }
tr:nth-child(even)    { background-color:#fff; }

Answer 2

As you've not specified a language for what's returning the code I'll give you a pure CSS answer.

tr:nth-child(2n+1) {YOURSTYLEINHERE}
or
tr:nth-child(odd) {YOURSTYLEINHERE}