使用COLSPAN和ROWSPAN可合并单元格；COLSPAN横向合并，如标题跨三列显示“学生成绩汇总”；ROWSPAN纵向合并，如“张三”跨两行关联多科目成绩；二者结合需注意布局规划，避免错位，合理设计表格结构。

在HTML表格中，想要将多个单元格合并成一个大单元格，需要用到 COLSPAN 和 ROWSPAN 属性。这两个属性可以分别控制单元格横跨的列数和纵跨的行数，让表格布局更灵活。

COLSPAN：横向合并单元格

当你希望一个单元格占据多列时，使用 COLSPAN 属性。

例如，你想让第一行的标题横跨三列：

<table border=”1″>
  <tr>
    <td colspan=”3″>学生成绩汇总</td>
  </tr>
  <tr>
    <td>姓名</td>
    <td>科目</td>
    <td>分数</td>
  </tr>
</table>

这里 colspan=”3″ 表示该单元格占三列宽度，下方的三列数据会正常排列，不会重叠。

ROWSPAN：纵向合并单元格

如果需要一个单元格跨越多行，使用 ROWSPAN 属性。

飞书多维表格

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

26

查看详情

比如，某位学生的数学和英语成绩在同一人名下，可将姓名纵向合并：

<table border=”1″>
  <tr>
    <td rowspan=”2″>张三</td>
    <td>数学</td>
    <td>85</td>
  </tr>
  <tr>
    <td>英语</td>
    <td>90</td>
  </tr>
</table>

rowspan=”2″ 表示“张三”这个单元格占两行高度，第二行不再重复写姓名单元格。

同时使用 COLSPAN 和 ROWSPAN

在复杂表格中，有时需要同时合并行列。注意要合理规划结构，避免错位。

例如：一个表头既要跨列又要跨行：

• 设置好每行的单元格数量，确保总数一致
• 合并后，被占用的位置不能再添加新单元格
• 建议先画草图，再编写代码，减少错乱

基本上就这些。掌握 COLSPAN 和 ROWSPAN 能让你更自由地设计表格结构，关键是理解它们如何影响周围单元格的布局。不复杂但容易忽略细节。