如何设置HTML表格和表格属性？

本文共计948个文字，预计阅读时间需要4分钟。

HTML表格不使用``或``模拟，而是使用专门的``元素——但它的位置非常规范：

常见错误是把它写在 thead 里面、或者放在 table 外面当普通标题，结果浏览器虽然可能渲染出文字，但实际不被识别为表格标题。

• <table><caption>销售数据</caption><thead>...</thead></table> ✅ 正确
• <table><thead><caption>销售数据</caption>...</thead></table> ❌ 无效，caption 不是 thead 的合法子元素
• <h3>销售数据</h3><table>...</table> ❌ 无语义关联，不能被辅助技术识别为该表标题

caption 默认居中且不可继承 text-align

caption 在所有主流浏览器中默认水平居中（即使父 table 设置了 text-align: left），这是 CSS 规范定义的特殊行为。想让它左对齐或右对齐，不能靠继承，必须显式设置 caption-side 和 text-align。

注意：caption-side 控制标题位置（上/下），text-align 控制文字对齐方式，两者要配合使用。

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

• 顶部居左：caption { caption-side: top; text-align: left; }
• 底部居右：caption { caption-side: bottom; text-align: right; }
• 仅设 text-align 不设 caption-side，可能在某些旧版 Safari 中失效

caption 不支持 colspan 或 rowspan，但可嵌套内联元素

caption 本身不是单元格，所以不能加 colspan、rowspan 属性，也不参与表格网格计算。但它可以包含 strong、em、span 甚至 a（比如链接到数据源说明），这对可访问性和语义表达很有帮助。

例如：

<caption>2024 年 Q1 <strong>华东区</strong>销售额（单位：万元）</caption>

这种写法既保持语义清晰，又便于 CSS 单独样式化关键词；但不要在里面放 div、p 等块级元素——HTML 规范只允许其内容为“短语内容”（phrasing content）。

用 aria-labelledby 替代 caption 的场景

当一个表格需要多个逻辑标题（比如主标题 + 副标题 + 更新时间），或者标题需要复用（多个表格共用同一段说明），caption 就不够用了——它只能有一个，且必须紧贴 table 开始处。

这时更灵活的做法是：把标题写在 table 外部（如 h2 + p），然后用 aria-labelledby 关联：

<h2 id="sales-title">销售数据概览</h2><br><p id="sales-desc">截至 2024-04-15，含退货调整</p><br><table aria-labelledby="sales-title sales-desc">...</table>

注意：aria-labelledby 的值是空格分隔的多个 ID，顺序即朗读顺序；这种方式绕过了 caption 的结构限制，但需确保 ID 唯一且不被动态移除。

真正容易被忽略的是：视觉隐藏的标题（比如用 sr-only 类）如果没通过 aria-labelledby 或 aria-label 显式绑定，屏幕阅读器大概率不会把它和表格关联起来。