col (HTML element)

Spec
Depr. Empty Version
No Yes HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<col align=" { center | char | justify | left | right } "span="number" valign=" { baseline | bottom | middle | top } " width=" { number | percentage } ">
</col>

Description

Tables are primarily constructed by defining rows, but it’s often useful to define their structure as columns as well. Unlike rows, columns don’t directly contain any cells; rather, they implicitly group adjacent cells between rows. This may not seem important, but it means that there isn’t an easy way to select a column for styling purposes (the best you could do was to set a width attribute on the top-most table cells, be they th or td elements).

The col element aims to solve the problem by providing a mechanism for selecting columns and applying the necessary attributes. The idea is that you can use the col element to define all of your columns’ attributes—alignment, colors, and so on, up-front, before you begin the process of writing out each row.

The col element can appear on its own (as shown in the HTML example below, there’s one col for each of the subsequent rows’ cells, with alignments set only for the first three columns), but it can also appear inside a colgroup element. It is important to note that if you use one or more colgroup then all cols must be enclosed in one or more colgroups

Example

Below, the col element is used to set different class attributes on the first three columns in the table (which can then be styled with CSS):

<table border="1">
  <col class="col1"/>
  <col class="col2"/>
  <col class="col3"/>
  <col/>
  <tr>
    <th colspan="4" scope="col">Work Contact Points</th>
  </tr>
  ⋮
</table>

Use This For …

This element is used for identifying individual table columns and applying styles to them (either using HTML attributes or CSS), rather than repeating the styles for each cell, row after row after row.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

This element has reasonable support, though the breadth of support depends heavily on which attributes are applied. Attribute support varies between browsers (it would be so much easier if all browsers tested, supported, and ignored the same set of attributes, but unfortunately, this is not the case).

A better approach is to apply class names to the respective col elements, then let CSS styling take care of alignment, colors, widths, and so on.

In this Section

User-contributed notes

Related Products