编辑“︁HTML表格标题”︁

{{DISPLAYTITLE:HTML表格标题}}

== 简介 ==
'''HTML表格标题'''（Table Caption）是用于描述表格内容的语义化元素，通过<code><nowiki><caption></nowiki></code>标签实现。它为屏幕阅读器用户提供上下文信息，同时为视觉用户提供表格的简要说明。标题默认显示在表格上方（可通过CSS调整位置），是HTML表格结构的重要组成部分。

== 基本语法 ==
<caption>标签必须作为<table>元素的'''第一个子元素'''出现，语法结构如下：

<syntaxhighlight lang="html">
<table>
  <caption>这里是表格标题</caption>
  <tr>
    <th>表头单元格</th>
    <td>数据单元格</td>
  </tr>
</table>
</syntaxhighlight>

== 属性与特性 ==
=== 全局属性 ===
支持所有HTML全局属性如<code>id</code>、<code>class</code>、<code>style</code>等。

=== 特有行为 ===
* '''位置控制'''：默认显示在表格顶部，可通过CSS的<code>caption-side</code>属性调整
* '''可访问性'''：会被屏幕阅读器作为表格的标签读出
* '''继承性'''：继承父表格的文本方向（dir属性）

== 代码示例 ==
=== 基础示例 ===
<syntaxhighlight lang="html">
<table border="1">
  <caption>2023年季度销售报告</caption>
  <tr>
    <th>季度</th>
    <th>销售额（万元）</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>120</td>
  </tr>
</table>
</syntaxhighlight>

'''输出效果'''：
{| border="1"
|+ 2023年季度销售报告
|-
! 季度 !! 销售额（万元）
|-
| Q1 || 120
|}

=== 带样式控制 ===
<syntaxhighlight lang="html">
<style>
  .financial-table {
    caption-side: bottom;
    text-align: center;
    font-weight: bold;
  }
</style>

<table class="financial-table">
  <caption>财务报表（单位：元）</caption>
  <tr>
    <th>项目</th>
    <th>金额</th>
  </tr>
  <tr>
    <td>收入</td>
    <td>500,000</td>
  </tr>
</table>
</syntaxhighlight>

== 高级应用 ==
=== 结合ARIA增强可访问性 ===
对于复杂表格，可配合<code>aria-describedby</code>提供额外说明：

<syntaxhighlight lang="html">
<table aria-describedby="table-desc">
  <caption id="table-desc">
    温度记录表 - 数据来源：国家气象局
  </caption>
  <!-- 表格内容 -->
</table>
</syntaxhighlight>

=== 响应式设计技巧 ===
通过媒体查询调整标题显示方式：

<syntaxhighlight lang="css">
@media (max-width: 600px) {
  caption {
    font-size: 0.9em;
    padding: 0.5em;
  }
}
</syntaxhighlight>

== 最佳实践 ==
* '''语义优先'''：始终为数据表格添加有意义的标题
* '''简洁明了'''：标题长度建议不超过15个单词
* '''位置一致'''：同一网站中保持标题位置统一（顶部/底部）
* '''样式分离'''：避免在caption标签内使用行内样式

== 常见错误 ==
{| class="wikitable"
! 错误示例 !! 问题分析 !! 修正方案
|-
| <code><nowiki><table><tr><td><caption>错误位置</caption></td></tr></table></nowiki></code> || caption不是table的直接子元素 || 将caption移至table开始标签后
|-
| <code><nowiki><caption style="float: right;"></nowiki></code> || 破坏表格的可访问性 || 使用caption-side属性控制位置
|}

== 浏览器兼容性 ==
所有现代浏览器完全支持caption元素，包括：
* Chrome 1+
* Firefox 1+
* Safari 3+
* Edge 12+
* Opera 7+

== 数学公式示例 ==
当表格包含数学数据时，可在标题中注明公式：

<math>\text{表格数据基于公式：} E = mc^2</math>

== 可视化关系 ==
<mermaid>
flowchart TD
    A[Table] --> B[Caption]
    A --> C[Table Head]
    A --> D[Table Body]
    B --> E[描述性文本]
    B --> F[可选的样式控制]
</mermaid>

== 实际应用场景 ==
=== 场景1：学术数据 ===
<syntaxhighlight lang="html">
<table>
  <caption>图1. 不同光照强度下的光合作用速率（n=3）</caption>
  <tr>
    <th>光照强度(μmol/m²/s)</th>
    <th>光合速率(μmol CO₂/m²/s)</th>
  </tr>
  <tr>
    <td>200</td>
    <td>5.2 ±0.3</td>
  </tr>
</table>
</syntaxhighlight>

=== 场景2：电商比较 ===
<syntaxhighlight lang="html">
<table>
  <caption>热门手机参数对比表</caption>
  <tr>
    <th>型号</th>
    <th>价格</th>
    <th>评分</th>
  </tr>
  <tr>
    <td>Phone A</td>
    <td>$599</td>
    <td>4.5/5</td>
  </tr>
</table>
</syntaxhighlight>

== 相关技术比较 ==
{| class="wikitable"
! 方法 !! 语义价值 !! 样式灵活性 !! 可访问性
|-
| <code><nowiki><caption></nowiki></code> || ★★★★★ || ★★★☆ || ★★★★★
|-
| <code><nowiki><div class="table-title"></nowiki></code> || ★☆☆☆☆ || ★★★★★ || ★★☆☆
|-
| <code><nowiki><h3>+aria</nowiki></code> || ★★★☆☆ || ★★★★☆ || ★★★★
|}

== 总结 ==
HTML表格标题是表格结构的重要组成部分，它：
# 提供表格的语义化描述
# 增强可访问性
# 支持样式定制
# 适用于各种数据展示场景

正确使用caption元素能显著提升表格的可用性和专业性，是Web开发中不应忽视的细节。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]