Creating Alternate Row Colors

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; } 

Figure 14.4. Screenshot of styled alternate rows.