HTML and CSS Reference
In-Depth Information
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:
<th>First name</th>
<th>Last name</th>
<tr class=”evenRow”>
Search WWH ::

Custom Search