HTML5静态表格必须用、、三标签构建语义结构，禁用废弃属性，配合scope、caption、colgroup等确保可访问性与响应式退化可用。
HTML5 里做静态表格，不用框架、不靠 CSS 框架也能清晰排版，关键不是“怎么写 ”，而是哪些标签必须配对用、哪些属性已废弃、哪些语义缺失会导致可访问性问题。直接上手写容易出错，尤其在表头对齐、跨行跨列、响应式退化这些地方。
必须用对的三个核心标签：、、|
很多初学者只写 + + ，结果表头无法被屏幕阅读器识别，打印时表头不重复，滚动时表头消失。正确结构必须显式划分：
包住所有表头行（），里面用 而非 标记列名
包住全部数据行，即使只有一行也要包 —— 浏览器和辅助工具依赖这个语义
默认居中加粗，但更重要的是它自带 scope 属性语义（如 scope="col" 或 scope="row"），能明确告诉读屏软件“这一格是哪一列的标题”
| 姓名 |
部门 |
入职时间 |
| 张三 |
前端组 |
2022-03-15 |
colspan 和 rowspan 的坑：别只看视觉合并，要看语义断裂
这两个属性常被用来“合并单元格”，但滥用会导致表格逻辑混乱，尤其影响屏幕阅读器遍历顺序和 Excel 导入结果。
-
colspan="2" 表示该单元格横跨 2 列，但它不会自动让下一行对应列空缺；你得手动跳过那列的 ，否则表格错位
-
rowspan 更危险：如果某格 rowspan="3"，后面两行的同一列位置必须完全留空（不写 ），否则浏览器会强行补全，造成错行
- 跨多行的表头建议优先用
配合嵌套 ，比硬塞 rowspan 更健壮
CSS 排版绕不开的四个控制点
纯 HTML 只定义结构，真正对齐、间距、边框、响应式靠 CSS。但要注意 HTML5 已移除 border、cellpadding、cellspacing 等属性，全得用 CSS 控制：
立即学习“前端免费学习笔记（深入）”；
陌言AI
陌言AI是一个一站式AI创作平台，支持在线AI写作，AI对话，AI绘画等功能
下载
- 边框统一用
border-collapse: collapse 在 上，避免双线缝隙
- 文字对齐别只靠
（已废弃），改用 text-align 作用于 th 和 td
- 列宽控制优先用
加 width 更高效且语义清晰
- 移动端小屏显示不全？不要用
overflow-x: auto 包死整个 table —— 它会让焦点键盘导航失效；更稳妥的是用 display: block + max-width + 媒体查询隐藏非关键列
容易被忽略的可访问性细节
一个“看起来正常”的表格，在残障用户或自动化工具眼里可能完全不可读：
- 缺少
caption 标签：每个 应有简短说明，比如 2024 年 Q1 各部门请假统计
- 复杂表头没用
id/headers 关联：当表头是二维结构（如“季度+产品线”），需用 + 显式绑定
- 没设
summary 属性（虽然 HTML5 不再推荐，但部分旧读屏仍依赖）：若必须兼容，可保留但优先用 caption + ARIA aria-label
表格不是越“像 Excel”越好，而是结构清晰、语义准确、退化可用——写完自己关掉样式看源码结构，再用键盘 Tab 键走一遍，基本就能发现大半问题。
| |
|
|
|
|
|
| | |
|
|
