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 集合时索引偏移。实际项目中应始终显式写出：
<table>
<thead>
<tr>
<th>姓名</th>
<th>部门</th>
<th>职级</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>前端</td>
<td>P6</td>
</tr>
</tbody>
</table>
colspan 和 rowspan 的值必须是整数且 ≥1
设为 0 或负数会被浏览器忽略；设为非数字字符串（如 "2px"）则退化为默认值 1。关键规则：
-
colspan影响的是当前单元格向右“吃掉”多少列，不影响其他行的列数计算 -
rowspan是向下跨行，被跨过的行中对应位置必须留空（即不写td/th），否则表格结构会错位 - 合并后总列数 = 第一行所有
colspan值之和（含隐式colspan="1"）
常见错误示例：在已用 rowspan="2" 的单元格下方又写一个 td，导致第二行多出一列。
表头跨行合并时优先用 th 而非 td，并补 scope 属性
仅靠视觉居中或加粗不足以传达语义。当 th 跨多行/列时，需明确它关联哪些数据单元格：
阿拉丁·Excel 图表生成器
下载
Excel 数据可视化图表生成器 - 把 Excel/表格数据一键转为柱状图、折线图、饼图、雷达图、堆叠柱状图、散点图、面积图、环形图、气泡图、极坐标图、水平柱状图、柱+线组合双轴图。支持数据透视后绘图(--pivot),输出交互式 HTML(可悬停查看数值、一键下载 PNG)与静态 PNG(可嵌入文档/PPT)。提供两套配色方案: cn-stock(涨红跌绿, 金融财报默认) 与 vibrant(明亮风格, 适合演示报告)。当用户提到数据可视化、画图、图表、走势图、占比图、趋势图、对比图、透视表、Exc
立即学习“前端免费学习笔记（深入）”；
-
scope="row"表示该表头描述所在行全部数据 -
scope="col"表示描述所在列全部数据 - 跨多行多列时，
scope不支持复合值，此时应改用id+headers显式关联
<th rowspan="2" scope="col">产品</th> <th colspan="2" scope="colgroup">销量</th> <!-- 注意：scope="colgroup" 用于 colspan 多列的顶层表头 -->
CSS 无法替代 rowspan/colspan 实现真正的单元格合并
用 display: grid 或 position: absolute 模拟合并，只是视觉重叠。问题包括：
- 导出 Excel 时无法识别为单单元格
- 打印时分页可能割裂内容
- 键盘导航（Tab 键）顺序错乱
- 辅助技术无法正确映射数据关系
真正需要行列合并的场景——比如财务报表中的“合计”行、“类别汇总”列——必须用原生 rowspan/colspan。CSS 只适合做样式微调，比如合并后统一背景色或边框。
