illegalCreed

中文

English

中文

English

Appearance

单元格合并 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • colspan：让一格横向吃掉同一行里相邻的若干列；默认值 1
  • rowspan：让一格纵向吃掉后续若干行的同列位置；默认值 1
  • 两属性可用在 <th> 与 <td> 上，常一起用来搭多级表头
  • colspan 取值范围：大于 0 且不超过 1000 的整数
  • rowspan 取值范围：不超过 65534 的整数；rowspan="0" 特例 = 跨满当前行组剩余所有行
  • 合并后该格占据多个「网格槽位」，被它盖住的位置不要再写格子，否则行会被挤宽/挤乱
  • 合并越多，读屏越难理清行列关系——多级表头务必配 headers/id（见上一页）
  • 视觉合并 ≠ 语义清晰：能用结构表达就别滥用合并；表越简单越好

colspan：横向合并 ​

colspan 写在单元格上，让它在同一行内横跨相邻的多列。最经典的用法是「一个大表头压着几个小表头」：

html
<thead>
  <tr>
    <th scope="col" rowspan="2">姓名</th>
    <th scope="col" colspan="2">会籍日期</th>
  </tr>
  <tr>
    <th scope="col">加入</th>
    <th scope="col">取消</th>
  </tr>
</thead>

这里「会籍日期」用 colspan="2" 横跨两列，正好盖在第二行的「加入 / 取消」之上，形成两级表头。

colspan 也常用于表尾汇总行——让「合计」标签横跨前几列，只在最后一列放数字：

html
<tfoot>
  <tr>
    <th scope="row" colspan="3">合计</th>
    <td>52.00</td>
  </tr>
</tfoot>

colspan 的取值上限

规范规定 colspan 是「大于 0 且小于等于 1000」的有效非负整数，默认值 1。日常远用不到上限，知道有这条边界即可（写超界值会被钳到合法范围）。

rowspan：纵向合并 ​

rowspan 让单元格向下跨越后续若干行的同一列位置。它写在「被合并区域最上面那一行」的格子上。上节例子里「姓名」用 rowspan="2" 纵跨两行，与横跨的「会籍日期」拼出完整的两级表头。

再看一个数据区纵向合并的例子——同一个分类下有多行明细：

html
<tbody>
  <tr>
    <th scope="rowgroup" rowspan="2">饮品</th>
    <td>美式咖啡</td>
    <td>18</td>
  </tr>
  <tr>
    <!-- 这一行不再写「饮品」那一格，它已被上面的 rowspan 盖住 -->
    <td>拿铁</td>
    <td>22</td>
  </tr>
</tbody>

rowspan 的取值与「0」的特例

rowspan 是「小于等于 65534」的有效非负整数，默认值 1。一个特例：rowspan="0" 表示这一格跨满它所在行组（<tbody> 等）剩余的所有行——行数不确定时很方便（注意 colspan 没有这个 0 特例）。

合并的关键坑：别在被盖住的位置再写格子 ​

这是初学者最常踩的雷。当一格 colspan / rowspan 出去后，它占据了多个网格槽位；被它盖住的那些位置，对应行里不能再写 <td> / <th>，否则那一行的格子总数会超标，把表格挤变形。

html
<!-- ❌ 错误：第二行多写了一格，行被挤宽 -->
<tr>
  <td rowspan="2">A</td>
  <td>B</td>
</tr>
<tr>
  <td>A 已经盖住这里，不该再写</td>  <!-- 多余 -->
  <td>C</td>
</tr>

<!-- ✅ 正确：第二行只写没被盖住的那一格 -->
<tr>
  <td rowspan="2">A</td>
  <td>B</td>
</tr>
<tr>
  <td>C</td>
</tr>

记忆法：合并后，脑子里把那块矩形区域当成已填满，后续行列只填「空着的槽位」。

浏览器如何「拼」出一张表 ​

规范定义了一套表格模型形成算法：浏览器会把每个 <td> / <th> 按 colspan / rowspan 映射到一个二维网格的若干槽位上，据此算出表的真实行列数，并检测「有没有重叠 / 有没有空洞」这类表格模型错误。理解这一层有助于解释一个现象——你写的 <tr> 里格子数可能各不相同，但只要合并算得对，最终都能拼成规整矩形。

合并与可访问性 ​

合并是把双刃剑：视觉上它让表头层次分明，但对读屏是负担——格子与行列的对应关系变复杂，自动推断容易失准。两条实践：

  1. 多级表头必配 headers/id：把每个下级表头/数据格显式关联到它的所有上级表头（见 单元格与表头关联），别指望 scope 在多级结构里还能推对。
  2. 能不合并就不合并：web.dev 与规范一致强调，合并越少的表越好理解、也越好维护。如果一张表靠大量 colspan/rowspan 才能表达，先想想能不能拆成两张简单表。

小结 ​

colspan 横向合并、rowspan 纵向合并，默认值都是 1，上限分别是 1000 与 65534（rowspan="0" 跨满行组）。合并后切记不要在被盖住的槽位重复写格子，且多级表头务必补 headers/id。合并解决的是「单元格跨格」，而要给整列统一上色或定宽，得用另一套元素：列样式 <col> / <colgroup>。