Table Caption

Learn how to use the <caption> element to provide a semantic, accessible title for HTML tables.

What it is

The <caption> element defines a title or description for a table. Unlike placing text above a table with a generic heading, the caption is semantically linked to the table structure itself. This ensures that assistive technologies, such as screen readers, announce the caption when the user navigates to the table, providing immediate context about the data being presented.

Why it matters

• Accessibility: Screen readers rely on captions to identify which table corresponds to which dataset, especially on pages with multiple tables.
• Semantic Structure: It keeps the title logically bound to the content, improving SEO and document outline clarity.
• Styling Control: Captions can be styled independently from other headings, allowing for specific visual treatments like centering or smaller font sizes.
• Standard Compliance: Using <caption> adheres to HTML5 standards for tabular data presentation.

Syntax or steps

The <caption> element must be placed immediately after the opening <table> tag and before any <thead>, <tbody>, or <tr> elements. A table can have only one caption.

<table>
  <caption>Your Title Here</caption>
  <!-- Table rows go here -->
</table>

Example

Below is a realistic example of a sales report table using a caption.

<table border="1">
  <caption>Q3 Sales Performance by Region</caption>
  <thead>
    <tr>
      <th>Region</th>
      <th>Revenue</th>
      <th>Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>North</td>
      <td>$50,000</td>
      <td>+5%</td>
    </tr>
    <tr>
      <td>South</td>
      <td>$45,000</td>
      <td>+2%</td>
    </tr>
  </tbody>
</table>

Explanation: The <caption> tag contains the text "Q3 Sales Performance by Region." When a screen reader encounters this table, it will read this title first, informing the user what data follows. Visually, browsers typically render the caption centered above the table by default.

Common mistakes

• Placing the caption outside the table: Putting the caption in a separate <p> or <div> breaks the semantic link. Always keep it inside the <table> tags.
• Using multiple captions: Only one <caption> is allowed per table. If you need more detail, use the summary attribute (deprecated in HTML5 but still supported) or descriptive cell headers.
• Hiding the caption visually: While you can style it to look different, avoid setting display: none unless necessary for design reasons, as this may hide it from some assistive technologies depending on implementation. Use visibility: hidden or off-screen positioning if needed.
• Confusing with <figcaption>: <figcaption> is used for figures (images, charts), not tables. Do not mix them up.

When to use it

Compare <caption> with using a standard heading (<h2>) above a table.

Use <caption> whenever the table stands alone as a distinct data set. Use headings when the table is embedded within a larger narrative flow.

Practice

Guided Exercise: Create a simple table listing three fruits and their colors. Add a caption titled "Fruit Color Chart."

Challenge: Style the caption so it appears bold and left-aligned instead of the default centered position.

Hint: Use CSS: caption { text-align: left; font-weight: bold; }

Quick check

Question: Where must the <caption> element be placed within a table?

Answer: Immediately after the opening <table> tag and before any row groups or rows.

Summary

The <caption> element provides essential semantic context for HTML tables, enhancing accessibility and structure. By keeping the title inside the table markup, you ensure that both users and machines understand the relationship between the label and the data.