Section 13.4. Columns and Column Groups

13.4. Columns and Column Groups

As mentioned earlier in this chapter, the columns in a table are just implied by the number of cells in the longest row. In some instances, however, it is desirable to identify conceptual columns of data cells or groups of columns. The col (column) and colgroup (column group) elements allow authors to conceptually join a group of cells that appear in a column (or columns).

Column and column groups offer a number of conveniences. Their original intent was to speed up the display of tables in visual user agents. By specifying the width of each column, the user agent does not need to parse the contents of the entire table in order to calculate column and table. Columns and column groups are also useful for applying attributes (such as width or align) to all the cells they include. They may also be used as "hooks" for a limited number of style properties (see note). When used with the scope attribute (discussed in the upcoming accessibility section), they may also provide helpful context for screen readers and other non-visual browsing devices.

The CSS 2.1 Recommendation states that only the following four style properties may be applied to the col and colgroup elements: border, background, width, and visibility. For an in-depth explanation of why this is the case, read Ian Hickson's blog entry, "The mystery of why only four properties apply to table columns" at ln.hixie.ch/?start=1070385285&count=1. See also Chapter 22 of this book for more information on style properties for tables.

col

---

 <col /> 

Attributes

Core(id, class, style, title), Internationalization, Events

align="left|center|right|justify|char"

char="character"

charoff="length"

span="number"

valign="top|middle|bottom|baseline"

width="pixels, percentage, n*"

colgroup

---

 <colgroup>...</colgroup> 

Attributes

Core(id, class, style, title), Internationalization, Events

align="left|center|right|justify|char"

char="character"

charoff="length"

span="number"

valign="top|middle|bottom|baseline"

width="pixels, percentage, n*"

The col element is used to label or to apply attribute specifications to an individual column (or across several columns via the span attribute) without actually grouping the columns together structurally or conceptually. An empty element, col is used only to apply attributes or styles to the columns to which it refers.

The colgroup element defines a conceptual group of columns. The number of columns included in the group is indicated with the span attribute or by the total of col elements (with their span values) within the column group. Attributes, such as width or align, applied to the colgroup element apply to every column within that group.

The colgroup and/or col elements must appear before any row or row group elements. They are placed either immediately after the table start tag or immediately after the caption element, if there is one. In this example, column group information has been added to the previous sample table markup.

     <table>     <colgroup >        <col span="2" width="100" />        <col span="1" width="50"  />     </colgroup>     <thead>     <tr><th>Employee</th><th>Salary</th><th>Start date</th></tr>     </thead>     <tfoot>     <tr><td colspan="3">Compiled by Buster D. Boss</td></tr>     </tfoot>     <tbody>     <tr><td>Wilma</td><td>5,000</td><td>April 6</td></tr>     <tr>... more data cells...</tr>     <tr>... more data cells...</tr>     </tbody>     </table> 

The colgroup element identifies the three columns as part of the same structural group. (There may be many column groups in a table, but for simplicity's sake, this example has just one.) Within the colgroup, the first col element identifies two columns (span="2"), each with a width of 100 pixels. The remaining col has a width of 50 pixels. If all the columns in the table were to be the same width, the width could have been specified in the colgroup element. The third column is identified with a class attribute that could later be targeted with a style property (such as background).