A pricing table shows a "Total price" column that needs highlighting along its full height, or a whole column that should be lightly shaded to set it apart visually from the others. Applying that style cell by cell, repeating CSS classes on every <td> of the column, works but quickly gets heavy to write and fragile to maintain the moment a row gets added to the table.
The <col> tag answers that exact need. It represents a whole column of a table, which makes it possible to apply a style in a single declaration, without touching the content or the style of any individual cell.
Definition
<col> is an empty element, with no content and no separate closing tag, that represents a whole column of a table. It only exists to carry styling or layout attributes applied to the entire column at once, and never holds text or visible content on its own.
Syntax: inside colgroup, with the span attribute
<col> is never used on its own: it always sits inside a <colgroup>, itself placed right after an optional <caption> and before the table body. The span attribute lets a single <col> tag cover several consecutive columns at once, avoiding the need to repeat the tag as many times as there are affected columns.
<table>
<colgroup>
<col />
<col span="2" style="background-color: #f4f4f4" />
</colgroup>
<tbody>
<tr>
<td>Product</td>
<td>Price excl. tax</td>
<td>Price incl. tax</td>
</tr>
</tbody>
</table>In this example, the first column keeps no particular style, while the second <col> tag, thanks to span="2", applies a grey background to the next two columns, "Price excl. tax" and "Price incl. tax", in one single move.
Use case: styling without touching every cell
The main value of <col> lies in maintenance. On a table with several dozen rows, adding or removing a row requires no change to the column's style: the declaration stays centralised in the <colgroup>, at the top of the table, rather than scattered across every affected cell.
Only a small handful of CSS properties actually apply through <col>: mostly width, visibility and background. Properties that depend on the text content, such as text colour or font, do not apply reliably through this tag and need to stay on the cells themselves.
col versus td, a whole column against a single cell
The difference with <td> lies in the scale of what each tag designates. <td> represents a single cell, at the intersection of one row and one column, with its own content. <col> represents the column as a whole, with no content at all, only to carry a style shared by every cell that sits in it, whatever the row.
| Element | What it designates | Can hold text |
|---|---|---|
<col> | A whole column of the table | No |
| <td> | A specific cell, row by column | Yes |
Frequently asked questions
col be used outside of colgroup?No, <col> only makes sense inside a <colgroup>. Used on its own, outside that container, it is simply not recognised by the browser and its styling effect disappears, whatever the CSS property applied to it.
col tags are needed for ten identical columns?Just one, as long as the span="10" attribute is used on that single tag. Writing ten repeated <col> tags produces exactly the same visual result, but the span attribute stays the shortest and clearest way to express it.
col always win over the content of the cells?Not necessarily. The final width calculation for columns also depends on the table's layout algorithm and on the actual content of the cells, particularly text that cannot be broken. <col> gives a width hint, not an absolute constraint that the browser honours in every case.