Captions and Header Groups

A table caption names the table and helps visitors understand what the data represents. Put caption directly inside table.

<table>
  <caption>Support requests received in October</caption>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Requests</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Account access</th><td>42</td></tr>
    <tr><th scope="row">Billing</th><td>18</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>60</td></tr>
  </tfoot>
</table>

The row headers use scope="row", while the column headings use scope="col". The browser and assistive technology can use these relationships when a visitor moves through the cells.

thead, tbody, and tfoot identify groups of rows. Browsers may create a tbody in the DOM even when it is omitted from source, but writing the grouping explicitly is clearer for larger tables.

A heading before a table can introduce a section that contains more than the table. A caption names the table itself. Both can be appropriate when they serve distinct purposes; avoid repeating the same sentence twice.