HTML表格中如何使用colspan合并表头（基础教程）-html教程-PHP中文网

colspan="n"表示从当前列起向右占据n列，需确保每行逻辑列数总和一致，否则导致错位、读屏异常；多层表头须配合rowspan，响应式场景优先用grid替代表格。

html表格中如何使用colspan合并表头（基础教程）

colspan 能让一个

<th> 横向占满多列，但直接写上属性不等于就“合并成功”——多数错位、错行、读屏异常，都出在列总数没对齐。

<h3>colspan="n" 是怎么算列数的</h3>
<p>它表示「这个 <code><th> 向右占满 n 列」，不是“视觉上变宽”，而是从当前列起，跳过接下来 n−1 列的位置。浏览器会按这个逻辑重新排布后续单元格。
<ul><li>总列数为 5，第一行写 <code><th colspan="3">类别</th>

，后面必须只放 2 个

<th> 或 1 个 <code><th colspan="2">，否则整行列数超限
<li>
<code>colspan="0"

无效，会被忽略；colspan="1" 等价于不写，没意义

别用 colspan 当“撑宽工具”——想控制宽度，该用 CSS 的 width 或 table-layout: fixed

表头合并时 tbody 行数对不上怎么办

常见翻车：第一行 <th colspan="4">销售数据</th>，第二行却写了 4 个 <td> —— 这会导致浏览器自动补空单元格，<code>row.cells.length 可能和预期不符，JS 操作或屏幕阅读器都会出问题。

<thead> 里用了 <code>colspan，<tbody> 每行的 <code><td> 总数必须等于 <code><thead> 所声明的“逻辑列数”（即所有 <code>colspan 值 + 普通单元格数之和）
手写时建议每行都手动累加验证：比如 <th colspan="2"></th> <th></th> → 2 + 1 = 3 列，下一行也得是 3 列（如 3 个 <td>，或 <code><td colspan="3"></td>）
用开发者工具的「Computed」面板看实际渲染列宽，比肉眼判断更可靠

多层表头里 colspan 和 rowspan 必须配对用

单写 colspan 只能做扁平合并；真要分组（比如「产品」跨 3 列，下面再分「A」「B」「C」），就必须靠 rowspan 配合留出垂直空间。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

典型结构：<tr><th colspan="3">产品</th></tr> + <tr> <th>A</th> <th>B</th> <th>C</th> </tr>
如果第一行还希望「产品」同时跨 2 行，就得改成 <th colspan="3" rowspan="2">产品</th>，且第二行对应位置不能再放 <th> <li>二维合并时，被覆盖的所有格子必须删干净——留空标签 <code><td></td> 或漏删都会导致错位