HTML and CSS —

Grouping Table Columns with colgroup

Another means of grouping columns is to the colgroup element, which performs essentially the same task as col. Example 4-15 takes the basic three-column, three-row table used in Example 4-14 and applies different features to two of those columns.

Example 4-15. Using the col element to apply attributes to a number of columns
<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This table explores
 column grouping">
<caption>Column Grouping</caption>
<colgroup align="right" valign="bottom" />
<colgroup align="right" valign="bottom" />
<tr>
<th>Table Head</th>
<th>Table Head</th>
<th>Table Head</th>
</tr>

<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>

<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>

This then applies the align attribute value to the entire group of table cells, rather than having to add the individual attribute to each of those cells. The visual results are exactly the same as found in Figure 4-16.

Beware Browser Support for col and colgroup

You'll notice that for Figure 4-16, I switched over from my favored browser, Mozilla, to Internet Explorer. Even though Mozilla is generally considered a superior browser, standards-wise, than IE, in this case, Mozilla's support for col and colgroup and their associated attributes is somewhat lacking. The same is true of many other browsers. For this reason, the use of col and colgroup should be limited to situations in which you are aware that your visitors can see the desired results. Many designers prefer not to use col or colgroup at all.