Notes 5
— print (last updated: Jun 28, 2009) — print

Select font size:

Row groups: the tbody, thead, tfoot elements.

The elements thead, tbody and tfoot are used to create logically separate row groups. See the (relevant HTML4.01 specs). Their attributes are the same as the tr attributes but they provide a more convenient way to apply a set of attributes to a group of rows at a time. Furthermore, the table lines can be specified to respect the groups.

The thead and tfoot groups are meant to function so that whatever rows are put into them go to the top and bottom of the table, respectively. However, I wouldn't count on this actually working. In fact, you really only need the tbody element since it can be used whenver you want to create a row group.

Let's revisit our working example from the last set of notes with border and cellpadding specified: 
<table summary="" border="1" cellpadding="10px">

<tr>
<th colspan="3">Source: RTFM bulletin</th>
</tr>

<tr>
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tr> 
<td>5.31</td> <td>4.2</td> <td>percent increase</td>
</tr>

<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>hardware<br />and<br />software</td>
</tr>

</table>
which gives us this appearance:
Source: RTFM bulletin
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

Attributes for multiple consecutive rows

Suppose, for example, that we want to right-align every cell in the table except for the cell in the first row. So far we have two alternative ways to do this:
  1. add "align=right" to 9 cells, i.e., the td and th tags
  2. add "align=right" to 3 rows, i.e., to the tr tags
Clearly the latter alternative is better than the former, but there is still a simpler way to do this:
  1. surround the 3 rows by <tbody> </tbody> and add "align=right" to the tbody tag
Here is the table with the suggested addition: 
<table summary="" border="1" cellpadding="10px">

<tr>
<th colspan="3">Source: RTFM bulletin</th>
</tr>

<tbody align="right">

<tr>
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tr> 
<td>5.31</td> <td>4.2</td> <td>percent increase</td>
</tr>

<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>hardware<br />and<br />software</td>
</tr>

</tbody>

</table>
and here is its appearance:
Source: RTFM bulletin
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

Row groups with rules="groups"

Another usage of row groups is to specify that the internal lines of a table should separate row groups only, not all rows. Recall the attribute values for rules in the table attributes. In this case we want to use rules="groups" setting. Here is our same example modified to illustrate this feature: 
<table summary="" border="1" frame="box" rules="groups" cellpadding="10px">

<tr>
<th colspan="3">Source: RTFM bulletin</th>
</tr>

<tr>
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tbody>

<tr> 
<td>5.31</td> <td>4.2</td> 
<td>percent increase</td>
</tr>

<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>hardware<br />and<br />software</td>
</tr>

</tbody>

</table>
and here is its appearance:
Source: RTFM bulletin
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
The rules delineate the groups we've created. We'll see in the next section how to create column groups towards the same end.

The colgroup and col elements.

The colgroup and col elements allow us to specify information about entire columns or groups of columns (see HTML4.01 colgroup and col specs). Both of these elements have these attributes: When used, these elements are placed right after the table start tag. In particular, the width attribute, used in td or th elements, is more correctly used in col or colgroup elements, since the width of a single cell really affects the width of the entire column.

Unfortunately, the col and colgroup elements may not work uniformly across all browsers and using the width in td and th elements, although deprecated, often creates more portable HTML code.

Here is an example using the col element: 
<table summary="" border="1" cellpadding="10px">
<col span="2" width="200" ></col> 

<tr>
<th colspan="3">Source: RTFM bulletin</th>
</tr>

<tr>
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tr> 
<td>5.31</td> <td>4.2</td> <td>percent increase</td>
</tr>

<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>hardware<br />and<br />software</td>
</tr>

</table>
and here is its appearance:
Source: RTFM bulletin
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
In the above example we've use the span attribute to specify the number of columns over which the width has an effect.

The colgroup elements constructs a column group much as the tbody elements construct row groups.

Using colgroup with rules="groups"

The colgroup element functions just like the col element, except that it creates a group of columns which can be used by the rules="groups" setting. For example, 
<table summary="" border="1" frame="box" rules="groups" cellpadding="10px">
<colgroup span="2"></colgroup>

<tr>
<th colspan="3">Source: RTFM bulletin</th>
</tr>

<tr>
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tr> 
<td>5.31</td> <td>4.2</td> <td>percent increase</td>
</tr>

<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>hardware<br />and<br />software</td>
</tr>

</table>
has this appearance
Source: RTFM bulletin
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
The col and colgroup elements can be combined in various ways. You can place col elements between the start and end tags of colgroup elements if you so desire.

Example using rowgroups and colgroups

When the rules="groups" table attribute setting is chosen usually we want to specify both row groups and column groups to get the right visual effect. Here is an example: 
<table summary="" border="1" frame="box" rules="groups" cellpadding="10px">
<colgroup span="2"></colgroup>

<tbody>
<tr>
<th colspan="3">Source: RTFM bulletin</th>
</tr>
</tbody>

<tr>
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tbody valign="top">
<tr> 
<td>5.31</td> <td>4.2</td> <td>percent increase</td>
</tr>

<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>hardware<br />and<br />software</td>
</tr>
</tbody>

</table>
which looks like this:
Source: RTFM bulletin
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

© Robert M. Kline