表格标题(caption)

表格标题（caption）是HTML中用于描述表格内容的元素，通常显示在表格上方或下方，帮助用户理解表格数据的含义。合理使用caption可以提升网页的可访问性和用户体验。

caption的基本语法

caption元素必须直接嵌套在table标签内，且通常作为table的第一个子元素。基本语法如下：

<table>
  <caption>这是表格标题</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

caption也可以放在table的末尾，但这不是推荐做法：

<table>
  <tr>
    <th>产品</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>手机</td>
    <td>3999</td>
  </tr>
  <caption>产品价格表</caption>
</table>

caption的样式控制

通过CSS可以自定义caption的显示样式。默认情况下，caption显示在表格上方，但可以通过caption-side属性改变位置：

/* 默认在上方 */
caption {
  caption-side: top;
  font-weight: bold;
  padding: 10px;
}

/* 放在表格下方 */
caption.bottom {
  caption-side: bottom;
  font-style: italic;
}

实际应用示例：

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

<table class="price-table">
  <caption>2023年季度销售数据</caption>
  <tr>
    <th>季度</th>
    <th>销售额(万)</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>120</td>
  </tr>
</table>

caption的可访问性

caption对屏幕阅读器用户特别重要，它提供了表格的上下文信息。良好的实践包括：

1. 保持标题简洁但具有描述性
2. 避免使用"表格"、"列表"等冗余词汇
3. 与表格内容直接相关

<!-- 不好的例子 -->
<caption>表格1：数据</caption>

<!-- 好的例子 -->
<caption>2023年员工绩效考核结果</caption>

复杂表格的多级caption

对于复杂的表格结构，可以通过组合使用caption和其他元素创建多级标题：

<table>
  <caption>
    <h2>公司部门结构</h2>
    <p>截至2023年12月数据</p>
  </caption>
  <thead>
    <tr>
      <th>部门</th>
      <th>人数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>技术部</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

caption与figure/figcaption的区别

虽然figure/figcaption也能用于表格，但它们的使用场景不同：

<!-- 使用figure的情况 -->
<figure>
  <table>...</table>
  <figcaption>这是使用figure包装的表格</figcaption>
</figure>

<!-- 直接使用caption的情况 -->
<table>
  <caption>这是直接关联表格的标题</caption>
  ...
</table>

主要区别：

• caption专属于表格，语义更明确
• figure/figcaption适用于任何需要标题的内容组合

响应式设计中的caption

在响应式设计中，可能需要针对不同屏幕尺寸调整caption的显示方式：

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

实际应用案例

电商网站产品比较表格：

<table class="product-comparison">
  <caption>
    <span class="title">智能手机对比</span>
    <span class="subtitle">2023年旗舰机型</span>
  </caption>
  <thead>
    <tr>
      <th>型号</th>
      <th>价格</th>
      <th>屏幕尺寸</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>

动态生成caption

JavaScript可以动态修改caption内容：

<table id="data-table">
  <caption>加载中...</caption>
  <!-- 表格内容 -->
</table>

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

国际化考虑

多语言网站中，caption可能需要根据语言切换：

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

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

浏览器兼容性说明

caption-side属性的浏览器支持情况：

对于不支持caption-side的旧版浏览器，可以使用其他CSS方法模拟：

/* 兼容旧浏览器的底部caption */
table {
  position: relative;
}

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