Grouping Columns - HTML

HTML 4.01 has added a few extra tags to make defining and formatting groups of columns easier. The two tags, <colgroup> and <col>, are used together to define and optionally format column groups and individual columns. The <colgroup> tag is used to define and optionally format groups of columns. The tag supports the same formatting attributes as the <tr> and <td>/<th> tags (align, valign, width, and so on). Any columns defined by the <colgroup> will inherit the formatting contained in the <colgroup> tag.

To define columns in a group, use the span attribute with the <colgroup> tag to indicate how many columns are in the group. For example, the following HTML table code places the first three columns in a group:

<table><colgroup span=“3”></colgroup>

Note that additional <colgroup> tags can be used to create additional column groups. You must use additional column groups if the columns you are grouping are not contiguous or do not start with the first column. For example, the following
HTML table code creates three column groups:

  • Columns 1 and 2, formatted with centered alignment
  • Columns 3–5, formatted with decimal alignment
  • Columns 6–10, formatted with right alignment and bold text

Note: Column groups that do not have explicit formatting attributes defined in their respective <colgroup> tags inherit the standard formatting of columns within the table. However, the group is still defined as a group and will respond accordingly to table attributes that affect groups (rules=“groups”, and so on).

What if you don’t want all the columns within the group formatted identically? For example, in a group of three columns, suppose you wanted the center column (column number 2 in the group) to be formatted with bold text? That’s where the <col> tag comes into play, defining individual columns within the group. For example, to format a group using the preceding example (middle column bold), you could use code similar to the following:

The <col> tag follows similar rules to that of the <colgroup> tag, namely the following:

  • Empty tags (those without explicit formatting) are simply placeholders.
  • You must define columns in order, and in a contiguous group, using blank <col> tags where necessary.
  • Missing or empty <col> tags result in the corresponding columns inheriting the standard formatting for columns in the table

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics