<caption>-表格标题

<caption>标签的基本概念

<caption>标签用于定义表格的标题，必须直接放置在<table>开始标签之后。这个标题通常显示在表格上方，但可以通过CSS调整位置。一个表格只能有一个<caption>元素。

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

<caption>标签的显示特性

默认情况下，<caption>会显示在表格上方，居中显示。但浏览器对它的渲染可能略有不同：

• Chrome/Firefox：默认居中对齐，与表格等宽
• Safari：默认左对齐
• Edge：默认居中对齐

可以通过CSS的caption-side属性控制标题位置：

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

<caption>与无障碍访问

<caption>对屏幕阅读器用户特别重要，它提供了表格内容的上下文。没有标题的表格可能让视障用户难以理解表格内容。

良好的实践是让标题简洁但具有描述性：

<table>
  <caption>2023年1-4月各地区销售额对比（单位：万元）</caption>
  <!-- 表格内容 -->
</table>

与<figcaption>的区别

虽然<caption>和<figcaption>都用于提供描述性文本，但它们用途不同：

• <caption>专用于表格
• <figcaption>用于<figure>元素，可以描述任何内容（图片、图表、代码片段等）

<!-- 使用caption -->
<table>
  <caption>员工薪资表</caption>
  <!-- 表格内容 -->
</table>

<!-- 使用figcaption -->
<figure>
  <img src="chart.png" alt="销售趋势图">
  <figcaption>2023年季度销售趋势</figcaption>
</figure>

高级应用场景

复杂表格的多级标题

对于复杂表格，可以在<caption>中使用HTML元素创建多级标题：

<table>
  <caption>
    <h2>2023年度报告</h2>
    <p>数据截止日期：2023年12月31日</p>
    <p class="note">注：所有金额单位为人民币元</p>
  </caption>
  <!-- 表格内容 -->
</table>

响应式设计中的<caption>

在移动设备上，可能需要调整标题样式：

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

实际开发中的常见问题

忘记关闭标签

<caption>需要闭合标签，否则会导致渲染问题：

<!-- 错误示例 -->
<table>
  <caption>未闭合的标题
  <!-- 表格内容 -->
</table>

<!-- 正确示例 -->
<table>
  <caption>已正确闭合的标题</caption>
  <!-- 表格内容 -->
</table>

错误的放置位置

<caption>必须是<table>的第一个子元素：

<!-- 错误示例 -->
<table>
  <tr>
    <th>标题放在这里无效</th>
  </tr>
  <caption>错误的位置</caption>
</table>

<!-- 正确示例 -->
<table>
  <caption>正确的位置</caption>
  <tr>
    <th>表头</th>
  </tr>
</table>

与其他HTML元素的交互

与<colgroup>和<col>一起使用

当表格使用列分组时，<caption>仍然保持其位置：

<table>
  <caption>带有列分组的表格</caption>
  <colgroup>
    <col span="2" style="background-color: #f5f5f5">
    <col style="background-color: #e9e9e9">
  </colgroup>
  <!-- 表格内容 -->
</table>

在JavaScript动态表格中的应用

通过JavaScript动态添加表格时，也应该包含<caption>：

function createTable(data, captionText) {
  const table = document.createElement('table');
  const caption = document.createElement('caption');
  caption.textContent = captionText;
  table.appendChild(caption);
  
  // 添加表头和表格内容
  // ...
  
  return table;
}

样式设计技巧

创建视觉上突出的标题

caption {
  background-color: #2c3e50;
  color: white;
  padding: 12px;
  font-size: 1.2em;
  border-radius: 5px 5px 0 0;
  margin-bottom: -1px; /* 消除与表格边框的间隙 */
}

添加图标或装饰元素

caption::before {
  content: "📊 ";
  margin-right: 8px;
}

caption::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(to right, transparent, #3498db, transparent);
  margin-top: 8px;
}

浏览器兼容性注意事项

所有现代浏览器都支持<caption>标签，但需要注意：

• IE8及更早版本对caption-side: bottom的支持不完全
• 某些旧移动浏览器可能忽略caption-side属性
• 打印样式表中可能需要特别处理<caption>的显示

@media print {
  caption {
    page-break-after: avoid;
    font-size: 1.1em !important;
  }
}

性能优化考虑

虽然<caption>本身对性能影响极小，但在渲染大量表格时：

1. 避免在<caption>中使用复杂的选择器
2. 减少<caption>中的嵌套元素数量
3. 对于静态内容，避免通过JavaScript频繁更新<caption>

// 不佳的做法 - 频繁更新
setInterval(() => {
  document.querySelector('caption').textContent = `实时数据 ${new Date().toLocaleTimeString()}`;
}, 1000);

// 更好的做法 - 使用requestAnimationFrame
function updateCaption() {
  requestAnimationFrame(() => {
    document.querySelector('caption').textContent = `实时数据 ${new Date().toLocaleTimeString()}`;
    updateCaption();
  });
}
updateCaption();