0%

<caption> Table caption

A table's title, written as the table's first child.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<caption> is the title of a table. It has to be the first child of <table>, and browsers display it above the table unless told otherwise.

When someone enters the table, the screen reader announces the caption, so they can decide whether to read on. A heading or paragraph placed above the table gets no such connection. The CSS caption-side property moves the caption if you want it elsewhere.

The caption element definition (opens in a new tab) requires it to come first inside the table. Practise in the Headers and Captions lesson.

Syntax

<table>
  <caption>Table title</caption>
  <tr>
    <td>Data</td>
  </tr>
</table>

When to use it

People meet tables out of context all the time: a pricing table, a train timetable, a results table in a report (Table 2: Survey responses by age). A <caption> tells them what the numbers are about before they read a single cell.

If a table is alone inside a figure, the figure's figcaption can name it and the caption can go. Don't write the same text in both. When the table opens a whole section, put a heading above it, and give the table a short caption of its own anyway.

Hide a caption with display:none to save space and screen reader users lose the table's name too. If it has to be invisible, use a visually hidden CSS class that leaves it in the accessibility tree. Browsers also center the caption over the table, which turns a long caption into an awkward tall block on a narrow table.

Live example

Edit the code and watch the preview.

<table>
  <caption>Opening hours</caption>
  <tr>
    <th scope="row">Mon-Fri</th>
    <td>8:00-18:00</td>
  </tr>
  <tr>
    <th scope="row">Sat</th>
    <td>9:00-13:00</td>
  </tr>
</table>

More examples

Numbered caption at the bottom

Reports tend to number their tables and print the caption underneath. caption-side:bottom in the CSS moves it below the table, though it is still the first child in the markup. A small element adds the unit.

<style>
.rain caption{caption-side:bottom;text-align:left;padding-top:4px}
</style>
<table class="rain">
  <caption>Table 1: Monthly rainfall <small>(in millimetres)</small></caption>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Rain</th>
  </tr>
  <tr>
    <td>April</td>
    <td>48</td>
  </tr>
  <tr>
    <td>May</td>
    <td>61</td>
  </tr>
</table>

Table in a figure

This table is all the figure contains, so the figcaption names it and there is no caption element. Pick one of the two. Never write the same text twice.

<figure>
  <figcaption>Figure 4: Class sizes in 2026</figcaption>
  <table>
    <tr>
      <th scope="col">Class</th>
      <th scope="col">Students</th>
    </tr>
    <tr>
      <td>7A</td>
      <td>24</td>
    </tr>
    <tr>
      <td>7B</td>
      <td>27</td>
    </tr>
  </table>
</figure>

Tip: Give each data table its own caption.

Browser support

Every browser supports caption and draws it as part of the table, centered above it unless you say otherwise. The CSS caption-side property works with top and bottom in all current browsers. The old align attribute on caption is obsolete, so position it with CSS.

Accessibility

The caption is the table's accessible name. Keep it short and descriptive, and move any long explanation into a paragraph linked with aria-describedby. Worked examples are in the W3C caption and summary tutorial (opens in a new tab).

Common mistakes

Wrong

<h3>Opening hours</h3>
<table>...</table>

Right

<table>
  <caption>Opening hours</caption>
  ...
</table>

A heading above the table has no link to it. The caption is what names the table.

Frequently asked questions

Where does the caption go in a table?

First. <caption> must be the first child of <table>, ahead of any colgroup, thead or rows. By default browsers center it above the table. For a caption underneath, use CSS caption-side:bottom; in the markup it still comes first.

Is a table caption important for accessibility?

Yes. It becomes the table's accessible name. Screen readers announce it when a user reaches the table or lists the tables on the page, which lets them decide whether to dig in. Sighted users read the data faster with a visible caption as well. For naming a data table, caption is the preferred method.

Practise it

Related tables elements

<table>Tabular data laid out in rows and columns.<colgroup>Groups table columns so you can style them as one.<col>Stands for one or more columns in a colgroup, for styling.<thead>Wraps the header row or rows of a table.<tbody>Wraps the main rows of data in a table.<tfoot>Holds summary rows such as totals at the foot of a table.<tr>A single table row of cells.<th>Header cell for a column or row, shown bold and centered by default.<td>A normal data cell inside a table row.