colspan属性用于让<td>或<th>单元格横向跨多列，值为正整数；必须作用于单元格标签而非<tr>，且每行总列数（含colspan贡献）须一致，否则导致错位。
用 colspan 合并第一行单元格最直接
HTML 表格里让第一行横跨全部列，本质是控制单元格的列跨度。不需要 JS 或 CSS 伪装，原生 <th> 配合 colspan 属性就能搞定。关键不是“合并”，而是告诉浏览器：“这个单元格要占满整行”。
常见错误是写成 <tr colspan="3"><th>标题</th></tr> —— colspan 只能作用于 <td> 或 <th>，不能加在 <tr> 上，否则无效且可能被浏览器忽略。
-
colspan的值必须等于表格实际列数（比如三列就写colspan="3"） - 如果后续行用了
<colgroup>或 CSSgrid-column，colspan仍以 HTML 结构为准，不被覆盖 - 语义上推荐用
<th>而非<td>，屏幕阅读器会正确识别为标题行
多级标题行？嵌套 colspan 和 rowspan
当需要“大标题 + 小分组标题”两层结构（比如“销售数据”下面再分“华东”“华北”），就得同时用 colspan 和 rowspan。难点不在语法，而在列数对齐：每一行所有单元格的 colspan 值之和必须严格等于总列数。
例如 6 列表格，第一行一个 <th colspan="6">总览</th>；第二行两个 <th colspan="3">华东</th><th colspan="3">华北</th>；第三行才开始放具体字段（如“城市”“销量”“金额”），这时每个 <th> 默认 colspan="1"，加起来刚好 6。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 漏算
colspan总和会导致表格错位，浏览器通常不会报错，但渲染异常 -
rowspan用于纵向合并（比如左侧“部门”跨多行），和colspan搭配时，被跨过的单元格必须留空（即不写<td>），否则结构混乱 - 避免在同一个单元格同时设大
colspan和大rowspan，可读性和维护性会急剧下降
用 CSS display: table 模拟？不推荐
有人想用 div + display: table 实现“标题行合并”，理由是“更灵活”。实际踩坑不少：CSS 表格模型对 colspan/rowspan 支持不完整，多数浏览器根本不识别 colspan 属性（即使写了也无效），只能靠 grid-column 或绝对定位硬凑，语义丢失、响应式困难、屏幕阅读器无法理解。
- 原生
<table>的colspan是标准行为，所有浏览器一致支持 - CSS 表格适合布局替代方案，但涉及数据表格语义（尤其是标题行）时，应优先用真实表格元素
- 如果真要用 div 模拟，至少用 ARIA 属性补足语义，比如
role="rowheader"，但复杂度远超直接写<th colspan="X">
导出 Excel 时 colspan 会被保留吗？
取决于导出方式。用纯前端库（如 SheetJS / xlsx）解析 DOM 表格时，colspan 属性默认会被读取并映射为 Excel 的“合并单元格”，但要注意：
- 必须确保
colspan值准确，否则 Excel 合并区域错位，甚至报错“无法合并不规则区域” - 某些旧版导出工具（如早期
table2excel）会忽略colspan，只按单元格位置硬生成，结果就是标题挤在第一列 - 服务端生成 Excel（如 Python 的
openpyxl）不依赖 HTML 结构，colspan完全无关，需单独调用merge_cells()
真正容易被忽略的是：合并单元格后，如果该单元格设置了 text-align: center，在部分旧版 IE 或打印预览中可能失效，稳妥做法是额外加 style="text-align: center;" 内联样式。
