HTML caption: Table Titles and Top or Bottom Positioning

HTML <caption> provides the title or a short description of an entire table. Place it as the first child element inside table, and use CSS caption-side to control whether it appears above or below the table.

Distinguish table titles from column and row headers

A caption explains what the table is about; th identifies a particular column or row. Replacing the caption with a td in the first row changes the relationship between the table title and its data cells. Use a specific subject and scope rather than only “Table 1” so readers can identify the purpose when scanning or navigating with assistive technology.

Use only one caption per table. Add lengthy interpretation, cautions, or data sources to the nearby text instead of dividing the table title among multiple caption elements.

Complete example: check the caption position

Save the code as table-caption.html and open it in a browser. The numbers are practice data used to explain the table structure.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Positioning a table caption</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    .jb-table-scroll { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
    caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Practice data</h1>
  <div class="jb-table-scroll">
    <table class="jb-table-01">
      <caption>Example document counts by category in a practice library</caption>
      <thead>
        <tr><th scope="col">Category</th><th scope="col">Documents</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">HTML</th><td>3</td></tr>
        <tr><th scope="row">CSS</th><td>2</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

The caption Example document counts by category in a practice library appears above the table, followed by the Category and Documents columns and two data rows. The caption explains the table’s purpose, while th elements with scope identify its column and row headers.

Change CSS caption-side: top to caption-side: bottom and reload the page. The title moves below the table while remaining its first child element in HTML. Change it back to top to restore the original position. Use text-align for horizontal alignment rather than the obsolete align attribute.

Write useful table captions

A caption is a visible title and helps provide an accessible name for the table. Actual screen-reader behavior depends on the browser, assistive technology, and other accessibility attributes. Adding a caption alone does not resolve every accessibility issue in a complex table: also check the relationships between headers and data cells and the reading order.

A table’s background color does not automatically apply to its caption; set the caption background separately when needed. If a table is the only content of a figure, use figcaption to caption the figure instead of duplicating the same title in caption and figcaption. The MDN caption reference provides rules and examples.