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