The HTML <caption> tag
The HTML <caption> element provides a title for a <table>. It must be the table's first child and gives the table an accessible name that screen readers announce.
Overview
The <caption> element is a table's title. It must be the first child of the <table>, and it appears above the table by default.
Its real value is accessibility: the caption gives the table an accessible name, so a screen-reader user knows what the table is about before they start navigating its cells. A table without a caption is just a grid of numbers with no context.
Keep the caption concise and descriptive, and position or restyle it with CSS — the caption-side property moves it below the table, for instance. Reach for it on every data table; it is one of the cheapest accessibility wins available.
Syntax
<table>
<caption>Monthly sales</caption>
…
</table>Example
<table border="1">
<caption style="font-weight:700;">Top cities</caption>
<tr><th>City</th></tr>
<tr><td>Tokyo</td></tr>
</table>Best practices
- Make the
<caption>the very first child of the <table>. - Add one to every data table so it has a clear accessible name.
- Keep it short and descriptive of the table's contents.
- Reposition it with the CSS
caption-sideproperty if you want it below the table.
Accessibility
A <caption> is the simplest way to give a table an accessible name. Screen readers announce it when the user enters the table, providing vital context before they navigate the cells.
Frequently asked questions
What is the caption element?
Where does the caption element go?
Why is a table caption good for accessibility?
How do I move the caption below the table?
caption-side: bottom on the table or caption.