Styling Tables - HTML5 - page 140

readability. For example, say you wanted to make the header row really stand out. One technique is
to set the background to a dark color and then make the type white. Here's how to do that in CSS:
th {
background-color: black;
color: white;
}

Because the th selector causes the CSS rule to only
affect the header cells, the rather dramatic change
(Figure 17-10) is very targeted.

Another common table effect is called zebra
striping . As the term implies, alternating rows (or
columns) of a table are given a different color to
make it easy to differentiate between the data.
This technique is extremely useful in large tables
with a lot of data, but it can also be applied to
smaller tables as well. To achieve the zebra strip-
ing look, you need to define at least one class
and apply that class to alternating <tr> tags. For
example, if I wanted to give the even rows of my
table a bluish-green background, I would set up
the CSS rule like this:
.evenRow {
background-color: #66FFFF;
}

FiGure 17-10

The .evenRow class is then added to every other table data row, starting with the second one, as in
this example:
<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Extension</th>
</tr>
<tr>
<td>Pat</td>
<td>Peterson</td>
<td>x394</td>
</tr>
<tr class=”evenRow”>
<td>Ricky</td>
<td>Johnson</td>
<td>x553</td>
</tr>
<tr>
<td>Naomi</td>
<td>Freders</td>
<td>x932</td>
</tr>