<caption>

<caption> gives a table a visible title. Assistive technology can use it to name the table, which helps readers find it among several tables.

Name the table

Put one caption as the table’s first element child, before column groups and rows. “Workshop registrations” tells readers what the numbers describe.

<table>
  <caption>
    Workshop registrations
  </caption>
  <thead>
    <tr>
      <th scope="col">Workshop</th>
      <th scope="col">Places booked</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML basics</th>
      <td class="amount">12</td>
    </tr>
    <tr>
      <th scope="row">CSS layout</th>
      <td class="amount">8</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td class="amount">20</td>
    </tr>
  </tfoot>
</table>

/* Presentation: these styles make the table easier to read. */
table {
  border-collapse: collapse;
}
caption {
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
th,
td {
  border: 1px solid #94a3b8;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

Placement and content

A caption can contain text and other flow content, but not a nested table. A useful title is short; put long methodology or caveats nearby and connect them with aria-describedby if needed. A heading outside the table is not automatically its accessible name.

The default position is above the table. Change caption-side to bottom in the editor to move it below; the caption remains the table’s caption. Do not use deprecated HTML align for positioning.

When to use it

Use captions when readers need to identify or compare tables. If nearby text already supplies the name, avoid needlessly repeating a long sentence, but still make the association explicit. Captions do not replace header cells, which describe the individual rows and columns.

Sources and browser support

MDN: caption describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.