如何使用CAPTION标签给HTML表格添加说明：设置表格标题文字

CAPTION标签必须紧随<table>开始标签后、首个<tr>前，不可嵌套在<thead>或<div>中；其位置由caption-side控制，语义上用于说明整表用途而非列名，对可访问性至关重要。

CAPTION 标签必须直接放在 <table> 开头内部

它不是表格的任意子元素，而是必须紧随 <table> 开始标签之后、第一个 <tr> 之前。放错位置（比如塞进 <thead> 或套在 <div> 里）会导致无效，浏览器可能忽略或将其渲染为普通文本。

正确写法示例：

<table>  <caption>2024 年销售数据汇总</caption>  <thead>    <tr><th>月份</th><th>销售额（万元）</th></tr>  </thead>  <tbody>    <tr><td>1月</td><td>120</td></tr>  </tbody></table>

用 CSS 控制 <caption> 位置和样式很常见但有坑

caption-side 决定标题上下左右，默认是 top；但注意：IE 不支持 bottom 以外的值（除非用现代模式），且部分旧版 Safari 对 left/right 支持不稳定。

• 居中标题：默认已居中，无需额外设置 text-align: center
• 靠左/右对齐：需配合 caption-side: left 或 right，再加 text-align: left 或 right
• 字体大小单独设：<caption> 不继承表格字体，常需显式定义 font-size

语义重要：屏幕阅读器依赖 <caption> 理解表格用途

它不只是视觉装饰，是 WAI-ARIA 可访问性链条的关键一环。省略 <caption> 或用 <div> 模拟标题，会让视障用户失去上下文。

立即学习“前端免费学习笔记（深入）”；

如果表格本身已有明确上下文（如页面标题已说明“订单列表”），可省略；但若表格独立存在、嵌入复杂布局，或含多张表，<caption> 就不可替代。

避免写空内容或纯符号，例如：<caption></caption> 或 <caption>---</caption>，这会被读作“空白”或“破折号”，造成困惑。

不要用 <caption> 替代表头行（<th>）

常见误解：把列名写进 <caption>，比如 <caption>姓名 | 年龄 | 城市</caption>。这是错的——<caption> 描述整张表，不是列定义。

列名必须用 <th> 放在 <thead> 或首行 <tr> 中；<caption> 是更高层级的说明，比如“员工基本信息表”或“各城市平均气温（2024 Q1）”。

如果真需要多行标题说明，可用 <caption> 包裹多个 <p>，但需确保语义清晰，不宜过长。

复杂表格的可访问性边界往往就卡在这儿：标题太简略，或混用结构，导致机器无法区分“这是什么表”和“这列叫什么”。