Displaying HTML rows with offset background colours is a great way to present large amounts of data in a table – plus it looks nice.

Here are a few ways I display data in this format :

1. PHP Method (for use with browsers with no JavaScript or CSSv3)

How it works :

We set a variable (i) to the value of 1. We then add 1 to i until it reaches 10.  Within the loop we determine if there is a remainder when dividing i by 2, this lets us know if the number is even or odd.  We add an odd class to every odd table row – and and even class to every even table row.

Why choose this method :

Choose this method when you know your users will be using older browsers or are unsure if they have javascript enabled.

2. CSSv3 Method (For use with newer browsers)

How it works :

CSS sets the ‘nth-child’ to use the defined background colour.

Why choose this method :

Simplicity!, however beware of outdated browsers.

3. jQuery (for use with JavaScript enabled browsers)

How it works :

Similarly to the CSSv3 method above – however does not require CSSv3 support in the browser.  It adds the class ‘odd’ to every other row in the table.

Why choose this method :

Simple to implement however requires JavaScript – do not forget to load jQuery in your document head!