HTML and CSS Reference
In-Depth Information
The
:nth-child
pseudo-class matches an element or set of elements based on the keyword or formula
passed to it in parenthesis. In the example above, only even-numbered rows are matched by the selector.
As Figure 7-11 shows, the second table row in the body of the table has a background color. The
keywords
even
and
odd
are equivalent to the formulas
2n
and
2n+1
, respectively. Older browsers may not
support these selectors but should render the table in an attractive, usable format, just with slightly fewer
bells and whistles.
For a greatly detailed description of
:first-child
,
:nth-child
, and other pseudo-
class selectors, see the W3C's section on Pseudo-classes in the Selectors Level 3
module at
w3.org/TR/css3-selectors/#pseudo-classes
.
Styling Columns
Now that we've successfully styled a table and its rows, headings, and cells, we'll show you some options
for styling columns. As we mentioned earlier in this chapter, tables in HTML and CSS are predominately
row-based creatures. Unfortunately, styling tables from a column-based approach is a bit more
complicated, with fewer options available.
The first step is to add some column information to our table, as shown in Listing 7-23.
Listing 7-23.
A basic table with column groupings added
<table>
<colgroup>
<col id="products">
<col id="quantities">
<col id="prices">
<col id="totals">
</colgroup>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
<th scope="col">Totals</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Utility Belts</th>
<td>9</td>
<td>$129.99</td>
<td>$1,169.91</td>
</tr>
<tr>
<th scope="row">Grappling Hooks</th>
<td>27</td>
<td>$79.99</td>
<td>$2,159.73</td>
