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