col element represents one or more columns in a
table. This element becomes useful when there's a need to assign a set of attributes to all the cells in one or more columns. In such case, the attributes can be declared directly into the
col element and their effect will be automatically transfered to the columns it represents.
span attribute, authors can specify how many consecutive columns the
col element will affect. The column count goes from left to right, so to have a
col element representing the third column in a table, you must first represent with other
col elements the first two.
The next example shows a
table with six columns. The first three columns are grouped with a
colgroup element and the second three with another. Inside the second group of columns, two
col elements are declared, the first one with no attributes (but needed as spaceholder), representing the first column in the group, and the second with a background color, representing the two last columns in the group. This background color will be reflected in all columns the element represents, which are the last two according to its position and the value of its
In this particular case, the
col element is used to highlight a couple of columns in an attemp to draw the user's attention to them. In many situations, authors could use it for other reasons, such as specifiyng the language, the direction of text, the width or the font style.
<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>
Note that, in contrast with the
colgroup element, that groups columns thematically, the
col element doesn't have any semantic meaning. Its purpose is to assign common attributes to the columns it respresents, and it becomes necessary due to the structure of tables in HTML, which consists of a set of rows (and not columns) containing cells.
The number of columns to be "spanned" by the element (from it's position and to the right) and, therefore, affected by other of its attributes. When this attribute isn't present the element affects only one column.
<col span="3" style="color: rgba(255, 128, 0,0.3);">
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 (
- center: text is centered. This is the default value for header cells (
- 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
This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with style sheet declarations.
<col span="2" align="center">
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.
<col align="char" char="c">
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.
<col align="char" char="t" charoff="7">
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.
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.
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.