<col> Table column
Stands for one or more columns in a colgroup, for styling.
<col> is a void element that lives in a <colgroup>. Each one stands for a single column, or for several when you add span.
A col has no content. Its only purpose is to let you put a class or style on an entire column. The limits are the same as for colgroup: background, border, width and visibility work, nothing else. Writing col outside a colgroup is invalid, even though browsers will create the colgroup for you.
The col element definition (opens in a new tab) confirms it is a void element inside colgroup. For grouping, see the colgroup element.
Void element: it has no content and no closing tag.
Syntax
<colgroup>
<col>
<col span="2">
</colgroup>When to use it
Say you have a pricing table and the recommended plan sits in column three. You could add the same class to forty <td> elements, or you could write one <col> with a background. The second option is far less work to maintain. The same goes for a fixed width on a narrow ID column or shading the weekend in a staff rota.
CSS on the cells, such as td:nth-child(3), is the other route. You need it for anything col ignores: text-align, padding, font weight. For background, border and width, col keeps the column styling in one place at the top of the table.
This one catches people out. Column backgrounds are painted underneath row and cell backgrounds, so zebra stripes on the rows or a background color on the cells will cover the col background completely. Put col inside the colgroup element, and leave the rows transparent wherever the column color should show.
Attributes
| Attribute | What it does |
|---|---|
span | Number of columns this col covers (default 1). |
Live example
Edit the code and watch the preview.
<table>
<colgroup>
<col style="background:#eef">
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ana</td>
<td>92</td>
</tr>
</table>More examples
Highlighting the recommended plan
A single <col> with a background marks the third column as the recommended plan. No cell was edited. The header also says recommended in words, because color on its own does not reach every reader.
<table>
<caption>Plans</caption>
<colgroup>
<col>
<col>
<col style="background:#fff4cc">
</colgroup>
<tr>
<th scope="col">Feature</th>
<th scope="col">Basic</th>
<th scope="col">Pro (recommended)</th>
</tr>
<tr>
<th scope="row">Storage</th>
<td>5 GB</td>
<td>100 GB</td>
</tr>
<tr>
<th scope="row">Price</th>
<td>$0</td>
<td>$8 per month</td>
</tr>
</table>Fixed width and a spanned group
The first col fixes the width of the shift column. The last one has span="2", so one element shades both weekend columns. Rotas and calendars often have neighbouring columns that share a style, and this is the cheap way to do it.
<table>
<colgroup>
<col style="width:7em">
<col span="2">
<col span="2" style="background:#eef">
</colgroup>
<tr>
<th scope="col">Shift</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Sat</th>
<th scope="col">Sun</th>
</tr>
<tr>
<th scope="row">Morning</th>
<td>Ana</td>
<td>Ben</td>
<td>Cleo</td>
<td>Ana</td>
</tr>
<tr>
<th scope="row">Evening</th>
<td>Dev</td>
<td>Ana</td>
<td>Ben</td>
<td>Dev</td>
</tr>
</table>Tip: col styles an entire column in one go.
Browser support
Every browser supports col, and it is in the HTML Living Standard. Only four kinds of CSS have any effect on it: borders (with collapsed borders), backgrounds, width and visibility:collapse. Browsers disagree most on that last one. Test it before you count on it to hide a column.
Accessibility
Screen readers ignore col because it only affects styling. Column colors on their own must never carry meaning, and headers have to come from th cells, as the W3C tables tutorial (opens in a new tab) explains.
Common mistakes
Wrong
<table>
<col>
</table>Right
<table>
<colgroup><col></colgroup>
</table>Put col in a colgroup. The parser adds one if you do not.
Wrong
<col></col>Right
<col>col is void, so it never gets an end tag.
Frequently asked questions
How do I set the width of a table column?
Put <col> elements in a <colgroup> and give them a CSS width, like <col style="width:40%">. Pair that with table-layout:fixed on the table for the most reliable result. The width attribute on col is obsolete, so use CSS. Without a fixed layout, long cell content can still push a column wider.
Why does text-align not work on col?
Cells belong to rows. They are not children of columns, so inherited properties like text-align, color and font-weight never reach them from a <col>. Only background, border, width and visibility apply. To align a column, use a selector such as td:nth-child(3){text-align:right}.