Checkered table rows and columns?

Question

Is there a way to make the rows and columns in an HTML table checkered between 2 different colors?

I made a spread-sheet like list of data and I am thinking it will look better and be easier on the eyes if the rows/columns were checkered between white and off-white colors.

Thanks!

Answer 1

See an example in Colorize - jQuery Table Plugin - it involves some Javascript, but you can use it as is, or read as an example.

Colorize is a jQuery plugin to add background color to alternate table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows as you want. A repeat mouse click reverts the row to the original background color.

Answer 2

What kind of browser support requirements do you have? Are you able to forgo support for IE7 and earlier? If so, you can do this purely with CSS using the n-th expression:

tr td
{
    background-color: #fff;
}

tr:nth-child(even) td:nth-child(odd), 
tr:nth-child(odd) td:nth-child(even)
{
    background-color: #ccc;
}