Simple CSS-Based Zebra Striping
Nov 4
posted by Roger Skalbeck in
Web Development, Graphic Design, Site Enhancements
Zebra Striping is a practice to assign alternating background colors to tables of information. It makes it easier to track information and it looks pretty. Long ago, people would achieve this through CSS class names or JavaScript, such as shown in this A List Apart article from 2004. Now it's possible to use zebra stripes on HTML tables with simple rules. We've added it to our site and it seems to work well. Here's a simplified view of the CSS code:
1tr:nth-child(odd) {
2 background-color: #f2f2f2;
3}
4tr:nth-child(even) {
5 background-color: #ffffff;
6}
Note that for nth-child, you don't have to use odd/even pairs. This article from an Opera blog shows rules for doing this using various multiples of rows. The nth-child rules have been along for a while, but are now supported in most browsers, so we think it's time to stripe our tables. Unsurprisingly, IE8 and below don't support this rule, but the recent tests showing IE9's good ranking in HTML5 tests are promising for users of Microsoft's browser. Here's some further reading on the perceived benefits of zebra striping:
2 background-color: #f2f2f2;
3}
4tr:nth-child(even) {
5 background-color: #ffffff;
6}
- Zebra Striping: Does it Really Help? by Jessica Enders [May 6, 2008]
- Zebra Striping: More Data for the Case by Jessica Enders [September 9, 2008]
