47. 合并单元格 colspan rowspan

实际表格中，经常需要让一个单元格跨越多列或多行。HTML 用 colspan 和 rowspan 两个属性实现。

colspan：跨列合并

colspan 让一个单元格横向跨越多列：

<table>
  <tr>
    <th colspan="3">学生成绩</th>
  </tr>
  <tr>
    <th>语文</th>
    <th>数学</th>
    <th>英语</th>
  </tr>
  <tr>
    <td>90</td>
    <td>85</td>
    <td>88</td>
  </tr>
</table>

这个例子中，第一行的 th 跨越了 3 列，所以它下面有 3 个单元格。

| 学生成绩（跨3列） | |---|---| | 语文 | 数学 | 英语 | | 90 | 85 | 88 |

rowspan：跨行合并

rowspan 让一个单元格纵向跨越多行：

<table>
  <tr>
    <td rowspan="2">饮料</td>
    <td>咖啡</td>
  </tr>
  <tr>
    <td>牛奶</td>
  </tr>
</table>

饮料（跨2行）	咖啡
	牛奶

“饮料”这个单元格占了两行，所以第二行只有一个 td。

同时使用 colspan 和 rowspan

两个属性可以一起用：

<table>
  <tr>
    <th colspan="2">上午</th>
    <th colspan="2">下午</th>
  </tr>
  <tr>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>体育</td>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

合并时的注意事项

被合并的单元格不需要再写

用 colspan 或 rowspan 后，被覆盖的格子从代码中删除：

<!-- 错误：多写了被覆盖的 td -->
<tr>
  <td colspan="2">标题</td>
  <td>多余的</td>  <!-- 这行不要 -->
</tr>

<!-- 正确 -->
<tr>
  <td colspan="2">标题</td>
</tr>

每行的总列数要一致

跨行跨列后，确保每行的逻辑列数相同，否则表格会错位。

实际应用场景

带汇总行的表格：

<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>5</td>
      <td>10</td>
      <td>50</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>3</td>
      <td>8</td>
      <td>24</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">合计</td>
      <td>74</td>
    </tr>
  </tfoot>
</table>

课程表（跨行合并同一课程）：

<table>
  <tr>
    <th>时间</th>
    <th>周一</th>
    <th>周二</th>
  </tr>
  <tr>
    <td>第1节</td>
    <td rowspan="2">数学</td>
    <td>语文</td>
  </tr>
  <tr>
    <td>第2节</td>
    <td>英语</td>
  </tr>
</table>

小结

• colspan 横向合并（跨列）
• rowspan 纵向合并（跨行）
• 被覆盖的单元格要从代码中删除
• 合并后每行的逻辑列数保持一致

下一节，我们学习列分组 col 和 colgroup。