HTML and CSS Reference
In-Depth Information
The
<col>
tag also accepts the
span
attribute, so you can apply the same class to multiple adjacent columns.
The following example applies the
datacol
class to the three middle columns of a table:
<colgroup>
<col class="labelcol">
<col span="3" class="datacol">
<col class="lastcol">
</colgroup>
The number of columns in the table must be the same as specified in the
<colgroup>
and
<col>
tags.
■
in modern browsers, you can use the
:nth-child()
and related pseudo-classes (see
Chapter 13
) to style
table columns without the need for
<colgroup>
and
<col>
. However, they can be useful for styling table columns in
older browsers that don't support CSS3 selectors.
Tip
Defining Table Header and Footer Rows
Immediately after the column definitions, you can define table header and footer rows. The table header comes
first and consists of one or more table rows enclosed in a pair of
<thead>
tags. The table footer follows the table
header and consists of one or more table rows inside a pair of
<tfoot>
tags.
The principal advantage of using
<thead>
and
<tfoot>
is that browsers add the header and footer rows at
the top and bottom of each page when printing a long table. Although it seems counterintuitive, the
<tfoot>
section normally comes before the main body of the table. You'll see how this works in the next section.
Grouping Table Rows into Sections
To divide a table into horizontal sections, you can wrap one or more rows in pairs of
<tbody>
tags. The table in
table_sections.html uses
<tbody>
tags to separate a company's sales report into sections. It also has table header
and footer rows like this:
<table>
<thead>
<tr>
<th>Period</th>
<th>Results</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Period</th>
<th>Results</th>
<th>Amount</th>
</tr>
</tfoot>
<tbody id="q1">
<tr>
<td>Q1</td>
<td>Sales</td>
