Checkerboard tables

Zebra tables on steroids

I’ve been thinking about the well known A List Apart article: Zebra Tables. I’ve always thought this approach to row highlighting had potential as a workaround until CSS3 selectors are widely supported.

The problems

The problem with the “zebra tables” script is it applies background-colors directly to the <td>s of the table, instead of allowing CSS to do it’s job.

Another issue is that “zebra tables” does not handle colspans or rowspans correctly (the colours continue out of alignment).

It would be nice if the script supported column highlighting also.

The solutions

The checkerboard script improves on “zebra tables” by applying classes to alternating <tr>s instead of colours directly to the <td>s, so the colours can
be handled seperately in the CSS.

Checkerboard goes one further, allowing columns to be highlight also, if desired.
It achieves this by adding classes to alternating <td>s within each <tr> which can then be targeted by CSS and styled appropriately.

Checkerboard also compensates for colspans or rowspans correctly, so your complex tables are safe.