colgroup element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The colgroup element represents a group of one or more columns in a table. This element can also provide common attributes to the columns it represents in the same way the col element does.

To specify the number of consecutive columns that will be grouped by this element, authors can use one of two methods (but not both): declaring the span attribute with the number of columns grouped as value or adding one or more col elements as children. Whatever method is chosen, the column count goes from left to right, so to have a colgroup element representing the third column in a table, you must first represent with another colgroup elements the first two.

Authors may use any of the two methods to specify the number of columns in the group (with the span attribute and with col children) but never both at the same time.

This element exceeds col in performance by providing a semantic meaning: the spanned columns constitute a column group. Authors must take this into consideration and avoid misusing the element for presentational purposes only.

The colgroup element must be declared at the begining of the table, before any other element expect caption (if present).

Examples

The next example shows a table with six columns, where the first three are grouped with a colgroup element and the second three with another. In the first group, the columns grouped are specified with the span attribute. In the second group, the columns affected by the group can be interpreted as the columns affected by the col elements declared as its children, which are: one column affected by the first col child and two more affected by the second one.

<table class="default">
  <colgroup span="3"></colgroup>
  <colgroup>
    <col>
    <col span="2" style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">
  </colgroup>
  <tr>
    <th>City</th>
    <th>Language</th>
    <th>Currency</th>
    <th>Area</th>
    <th>Population</th>
    <th>Density</th>
  </tr>
  <tr>
    <td>London</td>
    <td>English</td>
    <td>GBP</td>
    <td>1,572.00 km<sup>2</sup></td>
    <td>8,416,535</td>
    <td>5,354/km<sup>2</sup></td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>English</td>
    <td>USD</td>
    <td>177.0 km<sup>2</sup></td>
    <td>646,449</td>
    <td>4,066/km<sup>2</sup></td>
  </tr>
  <tr>
    <td>Moscou</td>
    <td>Russian</td>
    <td>RUB</td>
    <td>2,511 km<sup>2</sup></td>
    <td>11,503,501</td>
    <td>4,581.24/km<sup>2</sup></td>
  </tr>
</table>
City Language Currency Area Population Density
London English GBP 1,572.00 km2 8,416,535 5,354/km2
Washington English USD 177.0 km2 646,449 4,066/km2
Moscou Russian RUB 2,511 km2 11,503,501 4,581.24/km2

Note that, despite the purpose of the col elements in this example, both colgroup elements state that the columns affected by them are grouped.

Attributes

Specific attributes

span

The number of columns to be spanned by the element (from it's position and to the right) and, therefore, grouped and affected by other of its attributes. When this attribute isn't present and the element has no col elements as children, it affects only one column.

Authors may use any of the two methods to specify the number of columns in the group (with the span attribute and with col children) but never both.

Example

<colgroup span="3" style="color: rgba(255, 128, 0,0.3);">

align

The horizontal alignment of text in all affected cells. There are five possible values (case-insensitive):

  • left: text is aligned to the left margin. This is the default value for data cells (td).
  • center: text is centered. This is the default value for header cells (th).
  • right: text is aligned to the right margin.
  • justify: text is justified or aligned to both margins.
  • char: text is aligned to a specific character. It's used together with the char attribute.

This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with style sheet declarations.

Example

<colgroup span="2" align="center">

char

A caracter that will act as axis for text alignment. It's meant to work together with the align attribute when it has the "char" value. In other situations it will be completely ignored.

This attribute has become obsolete in HTML5 and its use is consequently invalid. Authors are adviced to replace it with style sheet declarations.

Example

<colgroup align="char" char="c">

charoff

An offset, from the first occurrence of the alignment caracter (specified in the char attribute) and in the direction of the text. The resulting character of this calculation will be the axis for text alignment.

For this attribute to be considered, the align attribute's value must be "char" and the char attribute must be present.

This attribute is considered obsolete by HTML5 and its use is no longer recommended. Authors should drop its use in favor of style sheets.

Example

<colgroup align="char" char="t" charoff="7">

valign

The vertical alignment of text in all affected cells. There are four possible values (case-insensitive):

  • top: text is aligned to the top margin.
  • middle: text is vertically centered.
  • bottom: text is aligned to the bottom margin.
  • baseline: all the cells in a row with this alignment should have their first text line on a common baseline.

This attribute is obsolete according to the HTML5 standard and, therefore, invalid. Authors are adviced to avoid its use and replace it with style sheet declarations.

Example

<colgroup valign="top">

width

A width for each of the affected columns. It can be specified in a number of pixels, a percentage or a value representing a portion of the available space.

This attribute has become obsolete according to the HTML5 standard and, therefore, its use is no longer valid. Authors are encouraged to avoid using it in favor of style sheets.

Example

<colgroup width="250">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.