HTML and CSS Reference
In-Depth Information
Zebra Tables
A common interface idiom with any kind of table is to display alternating rows or columns
with subtly different background colors. Doing so aids in reading, and it helps keep readers on
top of which column or row they are currently reading.
Most major browsers do not currently support styling the
col
element. As such, this approach
is only practical for rows. (You could achieve the effect on columns, but it would require adding
a
class
to a lot of cells. This may be OK for very small tables but usually proves to be impracti-
cal for tables of any size.) However, future versions of browsers should let you apply the same
approach to columns as well.
To do this in today's browser environment, you'll need to add a
class
to every other row in
your table. A common practice is to add
class="odd"
to each of the odd numbered-rows. How-
ever, this isn't a practical thing to do manually, especially on large tables. Besides needing to
manually put the
class
on every row, you also have to go back and rework the entire table when
you add a single row to the middle of the table somewhere. As such, web developers often use
DOM scripting or server-side template languages to add the
class
automatically. (For an exam-
ple of such a DOM scripting trick, check out David F. Miller's article at
http://alistapart.com/
articles/zebratables
.) No matter how you add the
class
to your document, it's simple to style
the table accordingly once it's there:
tr.odd {
background-color: #dfdfdf;
}
Check out the result in Figure 10-8.
Figure 10-8.
Making our table into a zebra!
