【干货】html表格的跨行合并与跨列合并

article/2025/11/11 16:08:40

在HTML中经常会用到表格，但由于我们想要的表格总是需要不规则的。而表格的合并常常会经常用到，今天我们来看一下表格的合并。

首先我们要了解一下合并的步骤

先确认是跨行合并还是跨列合并
根据单元格先上后下，先左后右来进行合并
如果要合并的单元格有内容则需要先将内容消除

在表格合并前需要明确我们的合并是跨行合并还是跨列合并
在这里插入图片描述

一、跨行合并rowspan

在 HTML 中，可以使用属性 rowspan 来合并行，即合并纵向的多个相邻单元格

首先我做了一个HTML表格
在这里插入图片描述

现在我想将5、10、15合并，接下来按照跨行的步骤进行

步骤：

确定为跨行合并
跨行合并按照先上后下的原则进行合并，即把属性rowspan放到需要合并的最上面单元格的td标签中。
rowspan的参数数字是你要合并几个表格就是多少
将被合并的td标签和其内容全部删除

所以我们将属性rowspan放到5的td标签中

在这里插入图片描述
发生了错误，那这个为什么呢？

原因是我忘记将10，15的td标签删除，所以出现了错误

注意：当我们弄完rowspan属性后一定要将剩下被合并的td标签删除
具体代码如下：

注意：10，15的td标签被删除了<tr><td class="b1"><p>1</p></td><td class="b1"><p>2</p></td><td class="b1"><p>3</p></td><td class="b1"><p>4</p></td><td class="b1" rowspan="3"><p>5</p></td></tr><tr><td class="b1"><p>6</p></td><td class="b1"><p>7</p></td><td class="b1"><p>8</p></td><td class="b1"><p>9</p></td></tr><tr><td class="b1"><p>11</p></td><td class="b1"><p>12</p></td><td class="b1"><p>13</p></td><td class="b1"><p>14</p></td></tr>

当我们删除后：
在这里插入图片描述

叮咚，我们成功了！

二、跨列合并colspan

在 HTML 中，可以使用属性 colspan 来合并列，即合并横向的多个相邻单元格。

还是我们原来的表格：

在这里插入图片描述
当我们想要将11，12，13进行合并，具体的步骤如下：

步骤：

确定为跨列合并
跨行合并按照先左后右的原则进行合并，即把属性colspan放到需要合并的最左边单元格的td标签中。
colspan的参数数字是你要合并几个表格就是多少
将被合并的td标签和其内容全部删除

代码如下：

注意：12，13的td标签被删除了<tr><td class="b1" colspan="3"><p>11</p></td><td class="b1"><p>14</p></td><td class="b1"><p>15</p></td></tr>

运行之后：

在这里插入图片描述

大体的步骤与问题和跨行合并类似。
好啦，到这里我们的跨列合并也完毕了！
如果大家有什么疑问可以在评论区留言或者私信我哈！
附上跨行合并和跨列合并的全部代码，大家可以参考一下！

跨行合并的全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格合并</title>
</head>
<style type="text/css">body{position: relative;margin:60px;}.b1{width:60px;text-align: center;}
</style>
<body><table border="1"><tr><td class="b1"><p>1</p></td><td class="b1"><p>2</p></td><td class="b1"><p>3</p></td><td class="b1"><p>4</p></td><td class="b1" rowspan="3"><p>5</p></td></tr><tr><td class="b1"><p>6</p></td><td class="b1"><p>7</p></td><td class="b1"><p>8</p></td><td class="b1"><p>9</p></td></tr><tr><td class="b1"><p>11</p></td><td class="b1"><p>12</p></td><td class="b1"><p>13</p></td><td class="b1"><p>14</p></td></tr><tr><td class="b1"><p>16</p></td><td class="b1"><p>17</p></td><td class="b1"><p>18</p></td><td class="b1"><p>19</p></td><td class="b1"><p>20</p></td></tr></table>
</body>
</html>

跨列合并的全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格合并</title>
</head>
<style type="text/css">body{position: relative;margin:60px;}.b1{width:60px;text-align: center;}
</style>
<body><table border="1"><tr><td class="b1"><p>1</p></td><td class="b1"><p>2</p></td><td class="b1"><p>3</p></td><td class="b1"><p>4</p></td><td class="b1"><p>5</p></td></tr><tr><td class="b1"><p>6</p></td><td class="b1"><p>7</p></td><td class="b1"><p>8</p></td><td class="b1"><p>9</p></td><td class="b1"><p>10</p></td></tr><tr><td class="b1" colspan="3"><p>11</p></td><td class="b1"><p>14</p></td><td class="b1"><p>15</p></td></tr><tr><td class="b1"><p>16</p></td><td class="b1"><p>17</p></td><td class="b1"><p>18</p></td><td class="b1"><p>19</p></td><td class="b1"><p>20</p></td></tr></table>
</body>
</html>