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

Sure. Make them all the same white color (i.e. keep them at the default), then programmatically add an off-white style to every other TD (or span or div or li or...).

Don't forget that you'll need to start at "column" 0 or 1 depending on which row you're on.

Answer 2

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 3

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)
{
    background-color: #ccc;
}

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

Answer 4

To do this with just HTML+CSS and make it work with all major browsers, you will have to add a class to every alternate row by hand:

<tr>
   <td>col1</td>
   <td>col2</td>
</tr>
<tr class="highlight">
   <td>col1</td>
   <td>col2</td>
</tr>
<tr>
   <td>col1</td>
   <td>col2</td>
</tr>
<tr class="highlight">
   <td>col1</td>
   <td>col2</td>
</tr>

etc...

Then use CSS to change the color of the rows:

tr {
  background-color: #FFF;
}
tr.highlight {
  background-color: #CCC;
}

Answer 5

Of course you can. Here is a simple javscript function to take care of it for you:

function altRows() {
    var table = document.getElementById("tableToAlternateRowsIn");
    var tRows = table.getElementsByTagName("tr");
    var cssClassName;

    for(var i = 0; i < tRows.length; i++) {
        (i % 2 == 0) ? cssClassName = "odd" : cssClassName = "even";
        tRows[i].className = cssClassName;
    }
}

window.onload = altRows;

That should do the trick for you. Not tested tho, so might not work exactly as planned.

Answer 6

There are several articles which claim that zebra-striping (to say nothing for checkerboarding) do not help readability. Checker-boarding, while an interesting excersise in CSS, seems to me to be more distracting than helpful. See A List Apart: zebra striping - does it help among other places.