<caption>-表格标题

<caption> 是 HTML 中专门为表格设计的标题标签，用于为 <table> 元素提供描述性内容。它通常直接放置在 <table> 开始标签之后，且一个表格只能包含一个 <caption>。

<caption> 的基本语法

<caption> 的语法非常简单，只需将其包裹在 <table> 标签内即可：

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

<caption> 的默认样式

默认情况下，<caption> 会显示在表格的顶部，并且居中显示。不同的浏览器可能会稍有差异，但通常可以通过 CSS 调整其位置和样式。

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

<caption> 的位置调整

默认情况下，<caption> 位于表格顶部，但可以通过 CSS 的 caption-side 属性调整其位置：

caption {
  caption-side: bottom; /* 可选值：top（默认）、bottom */
}

示例：

<table>
  <caption style="caption-side: bottom;">表格标题在底部</caption>
  <tr>
    <th>产品</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>苹果</td>
    <td>5元</td>
  </tr>
</table>

<caption> 的可访问性

<caption> 不仅提供视觉上的标题，还能提升表格的可访问性。屏幕阅读器会读取 <caption> 的内容，帮助视障用户理解表格的用途。

<table>
  <caption>2023年销售数据</caption>
  <tr>
    <th>月份</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>¥10,000</td>
  </tr>
</table>

<caption> 与 <th> 的区别

<caption> 是整个表格的标题，而 <th> 是表格内行或列的标题。

<table>
  <caption>学生成绩表</caption>
  <tr>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
  </tr>
  <tr>
    <td>李四</td>
    <td>90</td>
    <td>85</td>
  </tr>
</table>

<caption> 的嵌套规则

<caption> 必须是 <table> 的直接子元素，不能嵌套在其他标签内，否则可能导致渲染异常。

❌ 错误示例：

<table>
  <div>
    <caption>错误的嵌套方式</caption>
  </div>
  <tr>
    <td>内容</td>
  </tr>
</table>

✅ 正确示例：

<table>
  <caption>正确的嵌套方式</caption>
  <tr>
    <td>内容</td>
  </tr>
</table>

<caption> 的样式进阶

除了基本的文本样式，<caption> 还可以结合 CSS 实现更丰富的视觉效果，例如添加边框、背景渐变等。

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;
}

示例：

<table>
  <caption>带渐变背景的表格标题</caption>
  <tr>
    <th>项目</th>
    <th>进度</th>
  </tr>
  <tr>
    <td>前端开发</td>
    <td>80%</td>
  </tr>
</table>

<caption> 的响应式设计

在移动端或小屏幕设备上，可能需要调整 <caption> 的样式以适应不同尺寸。

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

<caption> 的语义化优势

使用 <caption> 而非普通的 <div> 或 <p> 作为表格标题，能增强 HTML 的语义化，使代码更易读且符合标准。

❌ 不推荐：

<table>
  <div class="table-title">非语义化标题</div>
  <tr>
    <td>内容</td>
  </tr>
</table>

✅ 推荐：

<table>
  <caption>语义化标题</caption>
  <tr>
    <td>内容</td>
  </tr>
</table>

<caption> 的交互增强

结合 JavaScript，可以动态修改 <caption> 的内容，例如根据用户操作更新表格标题。

<table>
  <caption id="table-caption">默认标题</caption>
  <tr>
    <td>数据</td>
  </tr>
</table>

<script>
  document.getElementById("table-caption").textContent = "更新后的标题";
</script>

<caption> 的浏览器兼容性

<caption> 在所有现代浏览器中均得到良好支持，包括 Chrome、Firefox、Safari、Edge 等。如果需要兼容旧版 IE，可以结合 CSS 进行降级处理。

<caption> 的 SEO 影响

搜索引擎会解析 <caption> 的内容，因此合理使用可以提升表格数据的可索引性。

<table>
  <caption>热门城市房价对比</caption>
  <tr>
    <th>城市</th>
    <th>平均房价</th>
  </tr>
  <tr>
    <td>北京</td>
    <td>¥80,000/㎡</td>
  </tr>
</table>