Creating Alternate Row Colors

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