表格标题(caption)

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

caption的基本用法

caption元素必须作为table元素的第一个子元素出现。基本语法如下：

<table>
  <caption>2023年销售数据统计</caption>
  <tr>
    <th>季度</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>第一季度</td>
    <td>¥120,000</td>
  </tr>
</table>

这个例子展示了一个简单的表格，caption清楚地说明了表格内容的主题。浏览器默认会将caption显示在表格上方，但可以通过CSS调整位置。

caption的定位控制

使用CSS的caption-side属性可以控制caption的位置：

/* 将caption放在表格下方 */
caption {
  caption-side: bottom;
  text-align: right;
  padding: 10px;
  font-weight: bold;
}

这个CSS规则会将caption移动到表格底部，并添加右对齐、加粗和内边距等样式。caption-side支持两个值：

• top（默认值）
• bottom

caption的样式定制

caption可以像其他HTML元素一样应用各种CSS样式：

<style>
  .styled-caption {
    caption-side: top;
    font-size: 1.2em;
    color: #2c3e50;
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 5px 5px 0 0;
    margin-bottom: -1px;
    text-align: center;
  }
</style>

<table>
  <caption class="styled-caption">员工绩效评估表</caption>
  <!-- 表格内容 -->
</table>

复杂表格中的caption应用

对于包含多个thead或tbody的复杂表格，caption仍然应该放在最前面：

<table>
  <caption>2023年各区域销售对比</caption>
  <thead>
    <tr>
      <th rowspan="2">区域</th>
      <th colspan="3">季度</th>
    </tr>
    <tr>
      <th>Q1</th>
      <th>Q2</th>
      <th>Q3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据 -->
  </tbody>
</table>

caption的可访问性考虑

为提升可访问性，caption应该：

1. 简明扼要地描述表格内容
2. 避免使用"表格"、"列表"等冗余词汇
3. 对于数据表格，可以包含单位信息

<table>
  <caption>各城市PM2.5指数（单位：μg/m³）</caption>
  <!-- 表格内容 -->
</table>

caption与figure/figcaption的区别

虽然figure/figcaption也能实现类似效果，但语义不同：

<!-- 使用table+caption表示表格数据 -->
<table>
  <caption>实验数据记录</caption>
  <!-- 表格内容 -->
</table>

<!-- 使用figure+figcaption表示包含表格的图示 -->
<figure>
  <table>
    <!-- 表格内容 -->
  </table>
  <figcaption>图1：实验数据可视化</figcaption>
</figure>

响应式设计中的caption

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

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

动态修改caption

JavaScript可以动态更新caption内容：

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

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('data-table');
    table.caption.textContent = '最新财务报告（更新于' + new Date().toLocaleDateString() + '）';
  });
</script>

多语言支持的caption

对于多语言网站，可以通过数据属性动态切换caption：

<table>
  <caption data-lang="en">Sales Report</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与ARIA的配合

虽然caption本身已经提供了良好的可访问性，但可以进一步使用ARIA属性：

<table aria-describedby="table-desc">
  <caption id="table-desc">2023年度各产品线利润率对比表</caption>
  <!-- 表格内容 -->
</table>

表格分组中的caption

即使表格使用了colgroup，caption仍然应该放在最前面：

<table>
  <caption>项目进度跟踪表</caption>
  <colgroup>
    <col span="2" style="background-color:#f5f5f5">
    <col style="background-color:#e9e9e9">
  </colgroup>
  <!-- 表格内容 -->
</table>

caption的嵌套限制

caption不能嵌套在其他元素中，必须直接作为table的子元素。以下写法是错误的：

<table>
  <thead>
    <caption>错误的caption位置</caption> <!-- 无效 -->
    <!-- 其他内容 -->
  </thead>
</table>

打印样式中的caption

为确保打印时caption可见，可以添加专门的打印样式：

@media print {
  caption {
    font-size: 14pt;
    color: black;
    text-align: center;
  }
}

caption与表格分页

当表格跨越多页时，caption通常只出现在第一页。如果需要每页都显示，可以考虑以下方案：

@media print {
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
  }
  caption {
    display: table-header-group;
  }
}