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 .
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
<col id="products">
<col id="quantities">
<col id="prices">
<col id="totals">
<th scope="col">Product</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
<th scope="col">Totals</th>
<th scope="row">Utility Belts</th>
<th scope="row">Grappling Hooks</th>
Search WWH ::

Custom Search