A popular feature of tables in many media, not just the web, is to have the table rows in alternating colours (or “colors” for the victims of Noah Webster). This is not just attractive, if done properly, but also helps the reader to follow the table rows across the page.
On this page I not only show how to do them properly, but also introduce Quagga tables as well – something for you to look forward to.
In principle there is a simple way of achieving alternating colours with CSS: just style alternate rows differently, e.g:
<TR class="odd" ><TD>... <TR class="even"><TD>...
This is however very clumsy with tables which change frequently, especially large ones, because one has to adjust the class attributes every time.
The best way of tackling this is undoubtedly to add the class attributes automatically before sending to the client, using either preprocessing or some form of server-side processing such as PHP or JSP. However not everyone has server-side processing available, and not every preprocessor can handle this, so the striping is often added with Javascript.
There are many scripts available on the web to do striping with Javascript, but when I was looking around for one, I discovered that all the ones I looked at had defects of one sort or another. For example:
By far the worst error was writing the whole table from within Javascript, which is not only unnecessarily complex, but also renders the table invisible to anyone without Javascript (such as handicapped readers). Perhaps the oddest page was one which presented a script solution but had marked up the examples manually, and so did not use its own method!
This page offers a “drop-in” script for zebra tables. It can be used to style any or all tables on a page. Furthermore you can use as many different colour schemes as you wish on a page, without modifying the script at all. The tables are written with HTML and CSS only, so anyone without Javascript can read them normally; only the striping is missing.
| Species | Pairs in 2003 | Pairs in 2004 | Pairs in 2005 |
|---|---|---|---|
| Wren | 8 | 6 | 8 |
| Chiffchaff | 3 | 3 | 3 |
| Willow Warbler | 4 | 3 | 4 |
| Chaffinch | 2 | 2 | 3 |
To use it, you define some CSS classes as follows. Firstly, any common markup, which applies to all zebra tables on the page, is defined in class “zebra”.
.zebra { border-collapse: collapse; }
.zebra TH, .zebra TD { border: thin solid black; padding: 0.3em; }
I would suggest using “border-collapse: collapse” in all zebra tables as the result looks a little odd otherwise.
Then you define the colour scheme in another class – I use scheme1 as an example – with the alternative colour in class “even”:
.scheme1 { background-color: rgb(249, 222, 183); }
.scheme1 .even { background-color: rgb(242, 189, 111); }
And then give your table the two classes “zebra” and whatever you have called your colour scheme:
<TABLE class="zebra scheme1">
Finally, insert a call to the script anywhere after the table:
<SCRIPT TYPE="text/javascript"> paintZebra(); </SCRIPT>
If you want another scheme then just declare another scheme, such as “scheme2”, and invoke it with
<TABLE class="zebra scheme2">.
| aaaa | bbbbb | ccccc |
| d | e | f |
| g | h | i |
| j | k | l |
Any further adjustments to the colour schemes can be achieved just by editing the CSS.
The script has been tested with Opera versions 7 to 11, Firefox 1 to 3, and Internet Explorer 6 to 8. Feel free to copy the script for your own pages. (And the colour schemes, in the unlikely event that you like them.)
For very wide tables, two alternating colours may not quite be sufficient to guide the reader’s eye across the page. For these I suggest using a four-row pattern, alternating pale-medium-pale-dark. (I don’t suppose this is an original idea, but I can’t actually recall having seen it before.)
The quagga table works in almost the same way as a zebra table. The classes for the two darker stripes I have dubbed ‘primary’ and ‘secondary’.
| aaaa | bbbbb | ccccc |
| d | e | f |
| g | h | i |
| j | k | l |
| j | k | l |
| j | k | l |
| j | k | l |
In case you are wondering, the quagga is, or rather was, a relative of the zebras, whose name happens to share a few letters with “quadruple”.