Sams Teach Yourself CSS in 10 Minutes

It is possible to style alternate table rows so that they have different background colors. This aids readability, especially on a long table.

One method is to add a class to every second <tr> element. In this case, the class is alternate. The <td> and <th> elements within these rows can be given a slightly different background color. The selectors will need to be tr.alternate td {...} and tr.alternate th {..} as shown in Listing 14.14. The results can be seen in Figure 14.4.

Listing 14.14. CSS Code for Styling Alternate Rows

caption { text-align: left; margin: 0 0 .5em 0; font-weight: bold; } table { border-collapse: collapse; } th, td { border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: .5em; } tr { background: #B0C4D7; } thead th { background: #036; color: #fff; } tbody th { font-weight: normal; background: #658CB1; } tr.alternate { background: #D7E0EA; } tr.alternate th { background: #8AA9C7; }