HTML如何合并单元格_HTML表格rowspan与colspan合并方法

答案：通过rowspan和colspan属性可实现HTML表格中单元格的跨行跨列合并，提升布局灵活性。

在HTML表格中，合并单元格是通过 rowspan 和 colspan 属性实现的。它们分别用于跨行和跨列合并单元格，让表格结构更灵活，适用于复杂布局。

使用 colspan 合并同一行中的列

colspan 用来让一个单元格横跨多列。比如你想让某一行中的一个单元格占据两列或更多列的宽度，就可以设置这个属性。

<table border="1">
  <tr>
    <td colspan="2">合并两个列</td>
  </tr>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
</table>

在这个例子中，第一行只有一个单元格，但它占用了两个列的位置。

使用 rowspan 合并同一列中的行

rowspan 让一个单元格纵向跨越多行。当你希望某个单元格从上到下贯穿几行时，就用它。

立即学习“前端免费学习笔记（深入）”；

<table border="1">
  <tr>
    <td rowspan="2">合并两行</td>
    <td>右边单元格</td>
  </tr>
  <tr>
    <td>第二行右侧</td>
  </tr>
</table>

这里第一个单元格跨了两行，所以第二行不需要再写对应的左侧单元格。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

同时使用 rowspan 和 colspan

在复杂的表格中，可能需要同时合并行和列。这时可以一起使用这两个属性。

<table border="1">
  <tr>
    <td rowspan="2" colspan="2">跨行跨列合并</td>
    <td>右1</td>
  </tr>
  <tr>
    <td>右2</td>
  </tr>
  <tr>
    <td>底部左</td>
    <td>底部中</td>
    <td>底部右</td>
  </tr>
</table>

注意：合并后要合理安排其他单元格数量，避免错位。

基本上就这些。掌握 rowspan 和 colspan 的用法，就能应对大多数表格合并需求。关键是理解“占位”逻辑——被合并的单元格不再单独出现。

以上就是HTML如何合并单元格_HTML表格rowspan与colspan合并方法的详细内容，更多请关注php中文网其它相关文章！