The <col> Element

Technical summary

Definition, placement, and HTML requirements

A col represents one or more columns in its parent colgroup when that group belongs to a table. A colgroup with a span attribute must not also contain child col elements.

span and column counts

A col without span represents one column. Conforming HTML can specify an integer from 1 through 1000. If a colgroup has child col elements, their span values describe the number of columns in that group.

<colgroup>
  <col>              <!-- 1 column -->
  <col span="2">     <!-- 2 columns -->
</colgroup>

HTML conformance and DOM property behavior are separate rules. HTMLTableColElement.span is an unsigned long whose default is 1. Setting it from script clamps values to the range 1–1000. When the table model forms columns, invalid or zero values are treated as 1, and values above 1000 are limited to 1000.

A group can use colgroup span without child col elements, or it can add child col span values. Do not combine the two methods on the same group.

Table model, parser, and DOM API

The table model builds a grid of rows, columns, and cell slots. col and its span participate in forming columns and column groups, while cells remain DOM children of tr. A cell is not a child of a col.

Conforming HTML puts col inside colgroup. The parser can create an implied colgroup when it encounters col directly under a table, but parser recovery does not make that source markup conforming.

const column = document.querySelector("col");

column instanceof HTMLTableColElement; // true
column.span;                           // 1 when omitted
column.span = 0;
column.span;                           // 1

// Table cells are children of tr, not col.

col and colgroup use the same HTMLTableColElement interface. The HTML Standard does not define a column collection property such as table.columns.

CSS column boxes

The CSS table model has boxes for columns, but these boxes do not wrap cells in the DOM. CSS 2.1 limits the properties that apply to columns and column groups, and defines conditions for how they affect cell painting and table width.

As a result, properties such as color or padding do not affect cell text or spacing in the same way as they affect ordinary elements. Selected WPTs include unresolved differences in CSS column sizing, so measurements are not presented as guarantees for every browser.

Header relationships and accessibility mapping

col does not provide visible heading text or an accessible name for a column. Write headings in th and use scope or headers to express header relationships when the table structure requires them. Do not make color the only way to tell columns apart.

The HTML-AAM Editor's Draft lists no computed role or mapping for col in the platform accessibility APIs covered by the draft. This describes specification mappings. A browser accessibility tree, operating-system API, and screen-reader speech are separate observations.

Facts and evidence

The main normative claims are linked to their source locations. Browser observations are recorded separately below, and unmeasured scope remains listed under Coverage.

Evidence

1. HTML Standard: The col element — context, empty content model, end-tag omission, span, and interface
2. HTML Standard: Forming a table — columns, groups, slots, and cell spans
3. HTML Standard: The “in table” insertion mode — parser handling of table children
4. CSS 2.1: Columns — applicable properties and column effects
5. HTML-AAM: col — computed role and platform mappings
6. Web Platform Tests: col-span-limits.html — span limits, reflection, and table layout
7. Web Platform Tests: colgroup-col.html — tentative CSS column and column-group width checks

Implementation evidence

Browser DOM and CSS observations, selected WPTs, and accessibility-tree queries are recorded separately. Each result is limited to its environment and test scope.

Coverage and open issues

• SPECElement meaning, placement, content model, span, table model, CSS 2.1, and HTML-AAM mapping
• IMPLFixture observations in one Chrome environment. Other browsers, OS builds, printing, and complex rowspan/colspan grids were not measured
• WPTSelected tests only. The wpt.live revision, the full test directory, and other browsers were not checked
• AAMChrome browser accessibility-tree query only. Windows UIA, IAccessible2, ATK, Apple AX, and screen-reader speech were not measured
• ReviewExpert-gap Review is not complete

This Topic has initial coverage. Selected fixture and WPT results are not generalized to every HTML structure, browser, operating system, CSS implementation, or assistive technology.

Related surfaces

For a beginner-friendly example, see How to Use the col Element in Yugien. Column groups are covered in the colgroup Topic, the whole table in the table Topic, and column headings and header associations in the th Topic.