This reference is built into PageRIJ — a live HTML, CSS & SVG authoring and learning environment.

HTML <caption> element

The <caption> element represents the title or caption of a <table>. It gives the table a readable name or short explanation.

A good caption tells the reader what the table is about before they start reading the rows and columns. It can be a simple title, or it can include a little more context if the table needs it.

Place a single <caption> as the first element inside its <table>, before column groups and rows. The caption is attached to the table itself, so software can associate its title with that table.

This makes it different from a paragraph above the table. A paragraph may introduce the table in the surrounding prose, but a caption is part of the table structure.

A table should not need a long essay in its caption. If a long explanation is required, the caption can give the table's title and the surrounding text can carry the larger discussion.

By default, the caption appears above the table. CSS caption-side: bottom can display it below while it remains first in the HTML source. A caption can contain text and inline markup, but must not contain another table.

Attributes: GLOBALS.

Typical layout:
<table>
  <caption>Workshop prices</caption>
  <thead>
    <tr>
      <th scope="col">Workshop</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Flex</th>
      <td>€6</td>
    </tr>
  </tbody>
</table>
Visual representation:
Workshop prices
Workshop Price
Flex €6