table基础结构必须包含thead、tbody、tr、th或td；colspan和rowspan值须为≥1整数；表头跨行合并应优先用th并设scope属性；CSS无法替代原生rowspan/colspan实现语义化合并。
table 基础结构必须包含 thead、tbody、tr、th 或 td
浏览器对 table 的解析依赖明确的语义层级。省略 thead 或 tbody 不会报错，但会导致：CSS 选择器失效（如 tbody tr:hover）、屏幕阅读器朗读混乱、JS 操作 rows 集合时索引偏移。实际项目中应始终显式写出：
| 姓名 | 部门 | 职级 |
|---|---|---|
| 张三 | 前端 | P6 |
colspan 和 rowspan 的值必须是整数且 ≥1
设为 0 或负数会被浏览器忽略；设为非数字字符串（如 "2px"）则退化为默认值 1。关键规则：
-
colspan影响的是当前单元格向右“吃掉”多少列，不影响其他行的列数计算 -
rowspan是向下跨行，被跨过的行中对应位置必须留空（即不写td/th），否则表格结构会错位 - 合并后总列数 = 第一行所有
colspan值之和（含隐式colspan="1"）
常见错误示例：在已用 rowspan="2" 的单元格下方又写一个 td，导致第二行多出一列。
表头跨行合并时优先用 th 而非 td，并补 scope 属性
仅靠视觉居中或加粗不足以传达语义。当 th 跨多行/列时，需明确它关联哪些数据单元格：
立即学习“前端免费学习笔记（深入）”；
-
scope="row"表示该表头描述所在行全部数据 -
scope="col"表示描述所在列全部数据 - 跨多行多列时，
scope不支持复合值，此时应改用id+headers显式关联
产品 销量
CSS 无法替代 rowspan/colspan 实现真正的单元格合并
用 display: grid 或 position: absolute 模拟合并，只是视觉重叠。问题包括：
- 导出 Excel 时无法识别为单单元格
- 打印时分页可能割裂内容
- 键盘导航（Tab 键）顺序错乱
- 辅助技术无法正确映射数据关系
真正需要行列合并的场景——比如财务报表中的“合计”行、“类别汇总”列——必须用原生 rowspan/colspan。CSS 只适合做样式微调，比如合并后统一背景色或边框。
