rowspan 与 colspan

合并行列,构建更复杂的表格布局

概念说明

rowspancolspan 用于合并单元格,创建跨行或跨列的结构。 合并后的单元格会占据更多网格空间。

常见坑:每一行的“总列数”必须一致,否则表格会错位。 这里的总列数是把 colspan 计算进去后的占位数;合并并不破坏一致性,只是改变占位。 使用 rowspan 时,下一行要减少对应单元格,否则会出现错位与语义混乱。

  • rowspan:跨多行
  • colspan:跨多列

基础语法

<td rowspan="2">合并两行</td>
<td colspan="3">合并三列</td>

演示

合并行列示例
时间段 周一 周二 周三
上午 产品评审 数据分析 设计讨论
下午 跨部门协作
晚间 复盘 学习 分享
<td rowspan="2">产品评审</td>
<td colspan="2">跨部门协作</td>