<caption> - Table caption

<caption> is a dedicated HTML tag designed for tables, used to provide descriptive content for <table> elements. It is typically placed directly after the opening <table> tag, and a table can only contain one <caption>.

Basic Syntax of <caption>

The syntax for <caption> is very simple—just wrap it inside the <table> tag:

<table>
  <caption>This is a table caption</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Zhang San</td>
    <td>25</td>
  </tr>
</table>

Default Styling of <caption>

By default, <caption> appears at the top of the table and is center-aligned. Different browsers may have slight variations, but its position and style can usually be adjusted with CSS.

caption {
  font-weight: bold;
  text-align: center;
  padding: 10px;
  background-color: #f0f0f0;
}

Adjusting <caption> Position

By default, <caption> is positioned at the top of the table, but its location can be changed using the CSS caption-side property:

caption {
  caption-side: bottom; /* Possible values: top (default), bottom */
}

Example:

<table>
  <caption style="caption-side: bottom;">Caption at the bottom</caption>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>¥5</td>
  </tr>
</table>

Accessibility of <caption>

<caption> not only provides a visual title but also enhances the accessibility of the table. Screen readers will announce the <caption> content, helping visually impaired users understand the table's purpose.

<table>
  <caption>2023 Sales Data</caption>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>January</td>
    <td>¥10,000</td>
  </tr>
</table>

Difference Between <caption> and <th>

<caption> serves as the title for the entire table, while <th> represents headers for rows or columns within the table.

<table>
  <caption>Student Grades</caption>
  <tr>
    <th>Name</th>
    <th>Math</th>
    <th>Chinese</th>
  </tr>
  <tr>
    <td>Li Si</td>
    <td>90</td>
    <td>85</td>
  </tr>
</table>

Nesting Rules for <caption>

<caption> must be a direct child of <table> and cannot be nested inside other tags, as this may cause rendering issues.

❌ Incorrect Example:

<table>
  <div>
    <caption>Incorrect Nesting</caption>
  </div>
  <tr>
    <td>Content</td>
  </tr>
</table>

✅ Correct Example:

<table>
  <caption>Correct Nesting</caption>
  <tr>
    <td>Content</td>
  </tr>
</table>

Advanced Styling for <caption>

Beyond basic text styling, <caption> can be enhanced with CSS for richer visual effects, such as borders, gradients, and more.

caption {
  font-size: 1.2em;
  color: white;
  background: linear-gradient(to right, #4a90e2, #8e44ad);
  padding: 12px;
  border-radius: 5px 5px 0 0;
  margin-bottom: 10px;
}

Example:

<table>
  <caption>Table Caption with Gradient Background</caption>
  <tr>
    <th>Item</th>
    <th>Progress</th>
  </tr>
  <tr>
    <td>Frontend Development</td>
    <td>80%</td>
  </tr>
</table>

Responsive Design for <caption>

On mobile or small-screen devices, you may need to adjust <caption> styling to fit different screen sizes.

@media (max-width: 600px) {
  caption {
    font-size: 0.9em;
    padding: 8px;
  }
}

Semantic Advantage of <caption>

Using <caption> instead of a generic <div> or <p> for table titles enhances HTML semantics, making the code more readable and standards-compliant.

❌ Not Recommended:

<table>
  <div class="table-title">Non-Semantic Title</div>
  <tr>
    <td>Content</td>
  </tr>
</table>

✅ Recommended:

<table>
  <caption>Semantic Title</caption>
  <tr>
    <td>Content</td>
  </tr>
</table>

Interactive Enhancement for <caption>

With JavaScript, you can dynamically update <caption> content, such as changing the table title based on user actions.

<table>
  <caption id="table-caption">Default Caption</caption>
  <tr>
    <td>Data</td>
  </tr>
</table>

<script>
  document.getElementById("table-caption").textContent = "Updated Caption";
</script>

Browser Compatibility for <caption>

<caption> is well-supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. For older versions of IE, CSS fallbacks can be used.

SEO Impact of <caption>

Search engines parse <caption> content, so proper usage can improve the indexability of table data.

<table>
  <caption>Hot City Housing Price Comparison</caption>
  <tr>
    <th>City</th>
    <th>Average Price</th>
  </tr>
  <tr>
    <td>Beijing</td>
    <td>¥80,000/m²</td>
  </tr>
</table>