HTML <col> element

The <col> element represents one or more columns in a table. It is used inside a <colgroup> element, before the table rows are written.

This is useful because table markup is normally written row by row, while some styling or meaning belongs column by column. A <col> gives the author a way to point at a column directly.

The span attribute is an integer from 1 to 1000, defaulting to 1. For example, span="2" makes that column definition cover two consecutive columns. It does not merge their cells; merging is controlled by colspan on <td> or <th>.

The element is empty. It has no closing tag and no cell content. It does not create a visible table cell; it describes columns that the cells will later occupy.

Column styling is limited. A column background can show through transparent cells, but cell backgrounds cover it. Cells are not children of <col>, so properties such as color and text-align do not inherit from it; apply those styles to the cells themselves.

In the example, the first <col> describes the name column and the second covers both score columns. Its background highlights the two score columns without changing the row-by-row markup.

Attributes: span, GLOBALS.

Typical layout:
<table>
  <caption>Workshop scores</caption>
  <colgroup>
    <col>
    <col span="2" style="background:#343450;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HTML</th>
      <th scope="col">CSS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ada</th>
      <td>92</td>
      <td>88</td>
    </tr>
  </tbody>
</table>

Visual representation: