Slightly ajar

David Miller wrote an interesting article on A list Apart almost three years ago about How to create Zebra Tables in HTML in the style of iTunes. While the technique was nice, and avoided using class attributes on every odd row, it did require JavaScript to add style to the alternating rows. As he mentioned, it would be possible to do this with CSS when CSS3 arrives. That time is drawing closer now that internal builds of Opera support the required selectors.

My approach, which can be found here does away with the JavaScript and extra classes, and uses nth-of-type(odd) from CSS3 instead. Of course, this is experimental, and only works in limited browsers at present, although the fallback is acceptable if you can do without the stripes. As far as I know, at the time of writing, it only works in our internal builds and probably Konqueror. A screen shot of what it looks like in an Opera internal build is supplied.

The technique is very simple and self explanatory. A regular data table is created with th elements for the column headers, with their required column scope. No class or id attributes are added, except to the table element itself, which was added only for semantic meaning. Once the table is set up, and styled as desired, the stripe affect background was added using:

#playlist tr:nth-of-type(odd) td {
    background-color: #edf3fe;
}

This says that for every element of type tr (or every row) that is an odd number, then style the background colour of each cell to blue. nth-of-type(odd) is short hand for nth-of-type(2n+1), which says select every second row starting after the first row. As well as adding a zebra effect, I've also hi-lighted one row. This is static, as dynamically selecting a row as one clicks would require JavaScript, but it shows of another selector. This uses nth-child(5), which is similar to the previous example, but chooses the 5^th child. This selects the row with Jeff Buckley as the header is also a row.

Once these selectors become widely available in the popular browsers, then it will allow techniques such as this without having knowledge of scripting, or increasing the code size, leading to easier maintainability and slightly faster download times.