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.
alignThis 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".
charoffWhen present, this attribute specifies the offset to the first occurrence of the alignment character on each line.
Source: w3.org
spanThe value of this attribute is a number. This specifies how many columns are spanned by the current col
element.
valignSpecifies 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.
widthThis 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>
