CHAPTER 15 ■ TABLESStriped Tables
Aliases Greenbar, Zebra Stripes
Problem You want to style alternating rows with different background colors—much like reports
printed on greenbar paper.
Solution You can optionally assign a standard background color to all cells or leave them all
transparent. You can add a class to odd rows, even rows (or any arbitrary row for that
matter), and you can use this class to select and style the background of cells in these
rows. You can optionally style the backgrounds of cells in columns as well.
Pattern
HTML
| CONTENT |
CSS #TABLE_ID .odd td { background:COLOR; }^
or
#TABLE_ID .odd th { background:COLOR; }
Location This pattern applies to cells in a row.
Advantages Styling alternate rows in alternating background colors makes it easier to read extra wide
tables. It also enables the user to read data in rows.
Disadvantages When styling the backgrounds of columns, it takes careful planning and color
coordination to make the background of columns blend well with the alternating
backgrounds of rows. Furthermore, if you want a column background to override an
alternating row background, you need to make sure the column selector has a higher
priority in the cascade order than the row selector. In the example, I made the column
selector equal priority to the alternating selector by using #t1 td.c3 instead of #t1 .c3,
and I made it a higher priority by placing it after the alternating row selector in the style
sheet.
Tips The most important point of this simple design pattern is selecting and styling cells
within rows. If you style the background of a row element, you will not see the
background unless the background of each cell in the row is transparent. This is because
the background of each cell overlays the background of its row. Even when you use
separated borders, the spacing between cells does not reveal a row’s background—it
reveals the table’s background. Thus, this design pattern uses the descendant operator to
select and style the cells in a row rather than the row itself.
In addition to background, you may also want to style border and padding differently for
alternating cells. You may also want to style text properties differently, such as font-
size, font-style, font-variant, font-weight, text-decoration, text-transform,
line-height, letter-spacing, and word-spacing.
Related to Border, Padding, Background (Chapter 6); Font (Chapter 10); Spacing (Chapter 11)^