Tables in HTML (page 4)

Vertical grouping

The other way to group cells in a table is the vertical grouping. This not only useful to group columns thematically, but also allows to assign attributes to entire columns of a table. The grouping can be done using two tags: the HTML colgroup tag and the HTML col tag. These two tags may be used separately or altogether.

In the example below we'll insert a very simple table that will define column attributes using the HTML col tag:

Note the tag closing used (" />") to make our code XHTML compliant. To learn more about the attributes used in this example, please refer to this description page about the HTML col tag.

In the previous example, common attributes have been definedfor all cells in the affected columns at once, but you cannot define semantically column groups without using the HTML colgroup tag:

Now in this example we have three real, semantically speaking, column groups with the attributes for all cells in the group properly set.

So what is the HTML col tag good for then? There are some cases when authors need to set groups of columns (semantically) but apply different attributes to the columns in a same group. To solve this problem authors may use both tags nested:

This way we're still defining three column groups but giving the columns specific characteristics no matter if they belong to the same column group or not.