The <caption>, <colgroup> & <col> elements
The <caption> tag gives a table a visible title, and screen readers announce it when they reach the table. <colgroup> and <col> describe the table’s columns, so you can style a whole column, such as its width or background color, without adding a class to every cell.
Last updated: October 3, 2026
Quick facts
| Category | None of their own — they are only allowed inside tables |
| Content model | <caption>: flow content, but no tables. <colgroup>: zero or more <col> (or nothing if it has span). <col>: empty, it’s a void element |
| Tag omission | <col> is void (no end tag). <caption> and <colgroup> end tags can be left out in some cases, but writing them is best practice |
| Permitted parents | <caption>: a <table>, as its first child. <colgroup>: a <table>, after the caption and before any rows. <col>: a <colgroup> |
| DOM interfaces | HTMLTableCaptionElement, HTMLTableColElement (<colgroup> and <col>) |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
<colgroup> and <col>
| Attribute | Description |
|---|---|
| span | How many columns this element covers (default 1) |
<caption>
| Attribute | Description |
|---|---|
| — | Only the global attributes apply. The old align attribute is obsolete; use the CSS caption-side property. |
Common examples
A table with a caption
The caption names the table and is read first by screen readers.
Highlighting a column
<col> can set a background color for a whole column.
Fixed column widths
With table-layout: fixed, widths on col are respected and big tables render faster.
Caption at the bottom
The CSS caption-side property moves the caption below the table.
<caption> vs <figcaption>
A <caption> belongs inside the table, as its first child, and gives the table an accessible name. A <figcaption> belongs to a <figure>, which can wrap a table together with a longer explanation, a source note or a chart.
For most tables, a caption is all you need. Use a figure with figcaption when the table is a numbered “Figure 3” in a report, or when it sits alongside other content that shares the same caption — and then skip the table caption so it isn’t named twice.
| <caption> | <figcaption> | |
|---|---|---|
| Goes in | <table> (first child) | <figure> |
| Names the table for screen readers | Yes | Via the figure |
| Best for | Most tables | Report figures, table + notes |
Common mistakes to avoid
- A heading or paragraph instead of caption. It isn’t linked to the table, so screen readers don’t announce it with the table.
- Styling text with col. Only border, background, width and visibility work on col; font and color don’t.
- Caption anywhere but first. It must be the very first child of the table.
- A span that doesn’t match.
<col span="2">must match the number of columns you mean to cover.
Accessibility & SEO tips
- Write captions that describe the content, like “Prices for 2026 plans”, not just “Table 1”.
- A clear caption helps search engines understand what the table shows, which helps with table-style featured snippets.
- Color alone shouldn’t carry meaning in highlighted columns; add a label such as “Most popular”.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.
Tutorial: How to make a table