HTML / Element

How to Use the caption Element — Give a Table a Name

The caption element gives a table a title or a short description of what it shows. When that context sits with the table, people can understand its purpose before reading the data.

The short answer

Use caption to say what the table is about. Use th for a row or column heading inside the table. They have different jobs.

Write caption as the first child element of table. CSS can display it below the table while it stays first in the HTML.

A small example

<table>
  <caption>Library opening hours by day</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Opening hours</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>9:00–18:00</td></tr>
    <tr><th scope="row">Tuesday</th><td>9:00–18:00</td></tr>
  </tbody>
</table>

Library opening hours by day
Day	Opening hours
Monday	9:00–18:00
Tuesday	9:00–18:00

The title tells readers what the table is about before they scan it. “Day” and “Opening hours” are column headings inside the table, so they use th.

Put caption inside table

caption is the first child element of the table it names. Valid HTML has one caption for a table. A paragraph before or after a table does not automatically become its caption.

<table>
  <caption>Visitors by month</caption>
  <!-- Add the table rows and cells here. -->
</table>

Use CSS to change where it appears

The caption usually appears above the table. Use caption-side to display it below. Keep it first in the HTML even when CSS moves it visually.

caption {
  caption-side: bottom;
}

How it differs from figcaption

caption names a table. figcaption describes a figure, which can group a picture, diagram, or other content. If a table is the only content in a figure apart from its figcaption, the HTML Standard advises using figcaption instead of a nested caption.

Common mistakes

Placing caption outside table. HTML no longer connects it to that table.
Using th for the table title. th labels a row or column inside the table.
Using bold text as the title without adding a caption. Visual style alone does not create the HTML relationship.
Assuming hidden caption text always names the table for assistive technology. Some ways of hiding it also remove it from the accessibility tree.

A little more detail

Browsers can expose the caption text as the table's accessible name. What is announced when someone reaches the table can vary by browser and assistive technology, so check the combinations your audience uses.

For the whole table, see How to Use the table Element. For heading cells inside it, see How to Use the th Element. The specification and browser and assistive-technology evidence are in the caption topic in Yugien Atlas.