The <col> and <colgroup> Elements

The col element is used to define columns in a table. It is an empty element and can only be used within the table element where is should appear before any tr elements. In (X)HTML, tables are constructed with rows, therefore the col element is useful because it allows one to define and then style columns instead of rows or individual cells.

According to the w3.org specification, the col element does not group columns structurally (semantically). Structural grouping is specified by the colgroup element. A table can have more than one colgroup elements.

The colgroup element specifies structural (semantic) columns in a table. This element may contain col child elements. The colgroup element is always found in the table element, and should appear before any tr elements.

Using this element, it is possible to apply attributes and styles to groups of columns.

Attributes

Both col and colgroup elements can have the following attributes.

Core Attributes

The core attributes can be applied to this element.

align

This attribute specifies the horizontal text alignment in the column. It can take the values left, right, center, justify, or char. When align="char", the text is, by default, aligned around the decimal point character for the current language, or the character specified in the "char" attribute.

Note: Though this attribute is not deprecated, to set text alignment, the CSS property text-align is preferred.

char

The value of this attribute is a single character around which the text is aligned when align="char".

charoff

When present, this attribute specifies the offset to the first occurrence of the alignment character on each line. Source: w3.org

span

The value of this attribute is a number. This specifies how many columns are spanned by the current col element.

valign

Specifies the vertical alignment of the text in the cells of the column. It can take the values of top, middle, bottom, and baseline.

Though this attribute has not been deprecated, the CSS property vertical-align is preferred.

width

This attribute can take pixel values, percentage values, or values in the form n*, where n is a number. This attribute specifies the width of the column. When the value is in the form of n*, for example 3*, the current column is n-times wider than the other columns. 0* sets the column width to the minimum necessary to accommodate the contents.

Though this attribute has not been deprecated, using the CSS width property.

Example 1:
<table>
<caption>the table caption</caption>
<col style="background-color:red" />
<col />
<col style="background-color:navajowhite" />
<col span="2" style="background-color:darkslategray" />
<tr><th>heading</th> <th>heading2</th> <th>heading3</th></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
</table>

Example 2:
<table>
<caption>the table caption 2</caption>
<colgroup>
<col span="2" style="background-color:red" />
</colgroup>
<colgroup span="3" style="background-color:cornsilk"></colgroup>
<tr><th>heading</th> <th>heading2</th> <th>heading3</th></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
</table>