HTML and CSS Reference
In-Depth Information
Figure 14-27.
The data is neatly aligned in each column
10. give the table rows in the
<tbody>
section alternate background colors using the
:nth-child()
pseudo-class.
tbody tr:nth-child(odd) {
background-color: #FFEDD2;
}
tbody tr:nth-child(even) {
background-color: #D8CCBA;
}
11. For older browsers, use one of the colors for the whole
<tbody>
. Although you're
using the same color, you can't use a group selector because browsers ignore the
entire style rule if they don't recognize one of the selectors. So, add this after the
styles you have just entered:
tbody {
background-color: #FFEDD2;
}
12. As a final touch, add a rule to change the background color of a row when the
mouse pointer hovers over it:
tbody tr:hover {
background-color: #F4F1EC;
}
13. Save the style sheet, and test the table in a modern browser. it's now styled like
Figure
14-28
.
