Table Caption and Summary

The <caption> element provides a title for a table. It must be the first child of <table> and is displayed centered above the table by default. A caption helps all users understand the purpose of the data at a glance.

Accessibility and the Summary

For complex tables, the summary attribute (HTML4) provided a description for screen readers, but it was removed in HTML5. The modern approach is to use <caption> for a visible title, and add a longer description either before the table in a <p>, or link to one using aria-describedby. The <details> element inside the caption is another progressive approach.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table Caption</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    caption {
      caption-side: top;
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 8px;
      text-align: left;
    }
    th, td { border: 1px solid #ccc; padding: 8px 12px; }
    th { background: #f4f4f4; }
  </style>
</head>
<body>
  <p id="desc">This table shows monthly website visitors by region.</p>
  <table aria-describedby="desc">
    <caption>Website Traffic — Q1 2025</caption>
    <thead>
      <tr><th>Region</th><th>Jan</th><th>Feb</th><th>Mar</th></tr>
    </thead>
    <tbody>
      <tr><td>North America</td><td>12 400</td><td>13 100</td><td>15 800</td></tr>
      <tr><td>Europe</td><td>8 200</td><td>9 000</td><td>11 200</td></tr>
      <tr><td>Asia-Pacific</td><td>5 500</td><td>6 100</td><td>7 400</td></tr>
    </tbody>
  </table>
</body>
</html>

HTML

Full Editor

Pro Tip

Use caption-side: bottom in CSS if you prefer the caption to appear below the table — this is common in academic and scientific documents where captions follow the figure or table.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned