colgroup Element

Module

The colgroup element is declared by the XHTML 1.1 Tables Module but is not present in the *W3C XHTML 1.1 Basic Tables Module

Elements in the Tables Module are:
table | caption | col | colgroup | thead | tfoot | tbody | tr | th | td

Description

A table's columns may semantically be divided into column groups. By default, all of the columns within a table are effectively placed into a single column group. However, if more than one column group is required (for example, in order to use scope="colgroup" for a subset of the table's columns), the table may instead be divided into multiple column groups by using colgroup elements.

<table>
  <tr><th colspan="3" scope="colgroup">Heading for all Columns</th></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
</table>

<table>
  <colgroup span="3"></colgroup>
  <tr><th colspan="3" scope="colgroup">Heading for all Columns</th></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
</table>

<table>
  <colgroup span="2"></colgroup>
  <colgroup span="1"></colgroup>
  <tr>
    <th colspan="2" scope="colgroup">Header for 1 and 2</th>
    <th scope="colgroup">Header for 3</th>
  </tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
</table>

Presentational Matters and the col Element

As well as having semantic meaning with regard to scope, colgroup elements may also be used to specify certain presentational aspects of all columns within the group, using the width attribute and a small number of CSS styles. If more fine-grained control is required of the individual columns within the group, the col element may be used (colgroup elements may not be nested). A col element is an empty element which essentially allows similar control over presentation as that of colgroup but doesn't create any associated column group - and so has no semantic meaning with regard to scope. The main difference between the two elements, presentationally, is that rules="groups" applies only to column groups (and row groups) and not to col elements.

<table>
  <col span="2" class="blue" />
  <col class="pink" />
  <tr><th colspan="3" scope="colgroup">Heading for all Columns</th></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
</table>

<table>
  <colgroup>
    <col span="2" class="blue" />
    <col class="pink" />
  </colgroup>
  <tr><th colspan="3" scope="colgroup">Heading for all Columns</th></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
</table>

The align and valign attributes are designed to allow control of the horizontal and vertical alignment of cell content. However, since some popular browsers (e.g. Firefox) do not support these attributes on colgroup or col elements, it is not recommended to use them on these elements.

Unfortunately, the alternative technique of using CSS also runs into problems when trying to control alignment: according to the *CSS2 Specification: Column Selectors, only four CSS properties may be applied to colgroup and col elements. These are:

width

specifies the minimum width of each column spanned by the colgroup or col element

background

specifies the background for each cell within the spanned columns (but only if both the cell and its row have transparent backgrounds)

visibility

only the declaration visibility:collapse is specified to have any effect, which is to prevent the display of each spanned column (cells overlapping into other columns should be clipped)
This property is not currently widely or consistently supported.

border

specifies a border for spanned columns (applies only if 'border-collapse' is set to 'collapse' on the table element)
This property is not currently widely or consistently supported.

Since, of these four, only width and background are reliably supported, this reduces even further the usefulness of col and colgroup as presentational tools.

The reason for this restricted list of properties for colgroup and col is that these elements are not ancestors of the cells within their columns and so the normal CSS style inheritance rules cannot apply. The upshot of all this is that many common styling requirements for columns (e.g. control of alignment and text colour) cannot be accomplished simply by styling the colgroup or col element. Some browsers, e.g. Internet Explorer, do allow a wider range of CSS properties to be used on these elements but this behaviour is against the specification and so is not cross-browser compatible. The above CSS restriction is possibly the reason that Firefox and others do not support align and valign on col and colgroup.

The most reliable method of styling columns within a table is to give every table cell within the column(s) a class which is then styled in the CSS. This does make for less elegant and more bulky code, however.

For simple tables, it may be possible to use CSS sibling selectors and/or :first-child pseudo-classes to style columns (in those browsers which support them, including Firefox). For example, the following rule

table.admin td + td + td + td { text-align:right }

will align to the right the contents of the fourth and all subsequent "columns" of any table elements with class="admin"; and the rule

thead td:first-child + td + td { color:#ffc; background-color:#333 }

will set both text and background colour for just the third "column" in all thead row groups. I write "column" in quotes because these CSS methods are not foolproof: any colspan or rowspan attributes will change the number of siblings in certain rows and hence, for example, the third child cell of a tr element may not be in the third column of the table.

Column Widths

The width attribute may be used to control the width of each column spanned by the colgroup or col element (if more than one column is spanned, then that width is applied to each one of the spanned columns - i.e. it does not represent the total width). For more information, see the discussion of the MultiLength Attribute Type.

However, defining specific column widths can get really complicated - there are so many different parameters which affect the widths of columns within a table - and so many user-agent inconsistencies - that I am not going to get bogged down with it all here, except to say that column widths may be affected by:

1. any width attribute or width CSS style on the table element
2. any width attributes or width CSS styles on colgroup or col elements
3. any width CSS styles on the table cells, most notably on the first row of cells
4. the way in which the above widths are specified (absolute, percentage, relative, proportional - or a mixture of any of these)
5. any table-layout CSS style on the table element (auto or fixed)
6. the actual contents of the cells

There are probably even more factors I've forgotten to mention. The best idea is to test your tables in as many browsers as possible to check that they render satisfactorily.

#REQUIRED Attributes

There are no #REQUIRED attributes on the colgroup element.

Specific Attributes

From the Tables Module - the Element's own Module

align [ type Enumeration (left | center | right | justify | char) ]

Horizontal alignment of text within the cells of the spanned columns.
Note: Not supported on col and colgroup by several major user agents, notably Firefox

char [ type Character ]

When the align attribute is set to "char", this specifies a single character at which to align the contents of all cells in the spanned columns
Note: User agents are not obliged to support this attribute (in fact I don't know of any which do)

charoff [ type Length ]

Offset within each cell of the first occurrence of the alignment character char (again, I don't know of any user agents which support this attribute)

span [ type Number - default="1" ]

Number of columns in the colgroup - this attribute is ignored entirely if the colgroup contains any col elements

valign [ type Enumeration (top | middle | bottom | baseline) ]

Vertical alignment of text within the cells of the spanned columns.
Note: Not supported on col and colgroup by several major user agents, notably Firefox

width [ type MultiLength ]

Width of each spanned column in any of the MultiLength formats

Common Attributes

From the Core Attribute Collection

class [ type NMTOKENS ]

One or more space separated classes

id [ type ID ]

A unique identifier for the element

style [ type CDATA ], from the Style Attribute Module (deprecated)

Element-specific styles

title [ type Text ]

Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module

Left-to-right or right-to-left directionality

xml:lang [ type LanguageCode ]

A language code for the element

From the Events Attribute Collection

All attributes in the Events Attribute Collection are supported:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Content Model

col*

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of colgroup

• From the Tables Module: col

Valid parents of colgroup

• From the Tables Module: table