Table caption

The table caption is an HTML element used to describe the content of a table, typically displayed above or below the table to help users understand the meaning of the table data. Proper use of captions can enhance web accessibility and user experience.

Basic Syntax of Caption

The caption element must be nested directly within the table tag and is usually the first child element of the table. The basic syntax is as follows:

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

The caption can also be placed at the end of the table, though this is not recommended:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Phone</td>
    <td>3999</td>
  </tr>
  <caption>Product Price List</caption>
</table>

Styling Captions

The display style of the caption can be customized using CSS. By default, the caption appears above the table, but its position can be changed using the caption-side property:

/* Default: top */
caption {
  caption-side: top;
  font-weight: bold;
  padding: 10px;
}

/* Place at the bottom */
caption.bottom {
  caption-side: bottom;
  font-style: italic;
}

Practical example:

<style>
  .price-table caption {
    background-color: #f2f2f2;
    padding: 8px;
    text-align: center;
    font-family: Arial, sans-serif;
  }
</style>

<table class="price-table">
  <caption>2023 Quarterly Sales Data</caption>
  <tr>
    <th>Quarter</th>
    <th>Sales (10K)</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>120</td>
  </tr>
</table>

Accessibility of Captions

Captions are particularly important for screen reader users, as they provide context for the table. Best practices include:

1. Keeping the caption concise but descriptive
2. Avoiding redundant terms like "Table" or "List"
3. Ensuring it directly relates to the table content

<!-- Bad example -->
<caption>Table 1: Data</caption>

<!-- Good example -->
<caption>2023 Employee Performance Evaluation Results</caption>

Multi-Level Captions for Complex Tables

For complex table structures, multi-level headings can be created by combining caption with other elements:

<table>
  <caption>
    <h2>Company Department Structure</h2>
    <p>Data as of December 2023</p>
  </caption>
  <thead>
    <tr>
      <th>Department</th>
      <th>Headcount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Technical</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

Differences Between caption and figure/figcaption

While figure/figcaption can also be used for tables, their use cases differ:

<!-- Using figure -->
<figure>
  <table>...</table>
  <figcaption>This is a table wrapped in a figure</figcaption>
</figure>

<!-- Using caption directly -->
<table>
  <caption>This is a caption directly associated with the table</caption>
  ...
</table>

Key differences:

• caption is specific to tables and has clearer semantics
• figure/figcaption can be used for any content that requires a caption

Captions in Responsive Design

In responsive design, you may need to adjust the display of captions for different screen sizes:

@media (max-width: 600px) {
  caption {
    font-size: 14px;
    padding: 5px;
  }
  
  .responsive-table caption {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
  }
}

Practical Application Example

E-commerce product comparison table:

<table class="product-comparison">
  <caption>
    <span class="title">Smartphone Comparison</span>
    <span class="subtitle">2023 Flagship Models</span>
  </caption>
  <thead>
    <tr>
      <th>Model</th>
      <th>Price</th>
      <th>Screen Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Phone A</td>
      <td>5999</td>
      <td>6.1"</td>
    </tr>
    <tr>
      <td>Phone B</td>
      <td>6799</td>
      <td>6.7"</td>
    </tr>
  </tbody>
</table>

Dynamically Generated Captions

JavaScript can dynamically modify caption content:

<table id="data-table">
  <caption>Loading...</caption>
  <!-- Table content -->
</table>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('data-table');
    const caption = table.querySelector('caption');
    caption.textContent = `Total ${table.rows.length - 1} records`;
  });
</script>

Internationalization Considerations

For multilingual websites, captions may need to switch based on language:

<table>
  <caption data-lang="en">User List</caption>
  <caption data-lang="zh" hidden>用户列表</caption>
  <!-- Table content -->
</table>

<script>
  function setLanguage(lang) {
    document.querySelectorAll('caption[data-lang]').forEach(cap => {
      cap.hidden = cap.dataset.lang !== lang;
    });
  }
</script>

Browser Compatibility Notes

Browser support for the caption-side property:

For older browsers that do not support caption-side, alternative CSS methods can simulate the effect:

/* Fallback for bottom captions in legacy browsers */
table {
  position: relative;
}

.legacy-caption-bottom {
  display: block;
  text-align: center;
  margin-top: 10px;
}