rowspan 与 colspan
合并行列,构建更复杂的表格布局
概念说明
rowspan 和 colspan 用于合并单元格,创建跨行或跨列的结构。
合并后的单元格会占据更多网格空间。
常见坑:每一行的“总列数”必须一致,否则表格会错位。 这里的总列数是把
colspan 计算进去后的占位数;合并并不破坏一致性,只是改变占位。 使用
rowspan 时,下一行要减少对应单元格,否则会出现错位与语义混乱。
- rowspan:跨多行
- colspan:跨多列
基础语法
<td rowspan="2">合并两行</td>
<td colspan="3">合并三列</td>
演示
合并行列示例
| 时间段 | 周一 | 周二 | 周三 |
|---|---|---|---|
| 上午 | 产品评审 | 数据分析 | 设计讨论 |
| 下午 | 跨部门协作 | ||
| 晚间 | 复盘 | 学习 | 分享 |
<td rowspan="2">产品评审</td>
<td colspan="2">跨部门协作</td>