合并单元格后怎么分成多行(合并单元格后怎么分成两行)

长大是一辈子的事！大家好！我在问新问题。分享一下前端，Python等技术，以及个人成长路上的那些事。

表格可以与单元格合并。

例如，如下所示:

单元格A跨越两列，单元格E跨越两行。这是细胞的合并。

Colspan属性

colspan属性用于设置td或th的列跨度。

Col表示列，span表示跨度。

所以colspan是一个属性，它指示跨越了多少列。

例如，如下图:

单元格A跨越两列，单元格E跨越三列。这种形式如何实现？

代码如下:

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& ltmeta name = & # 34视窗& # 34；内容= & # 34；宽度=设备宽度，初始比例= 1.0 & # 34；& gt& lttitle & gt合并单元

浏览器中的效果如下:

因此，一个单元格跨越几列，colspan属性的值是几个。

我们看到上表:

第一行的单元格A横跨两列，也就是说A上面有两个单元格，B和C是正常单元格，2+1+1=4，相当于这一行一共四个单元格。

第二行的单元格E横跨三列，即E顶部有三个单元格，D为正常列，即一个单元格，1+3=4，相当于这一行总共有四个单元格。

第三行的f、G、H、I都是正常的列，即每列占一个单元格，1+1+1+1=4，相当于这一行总共四个单元格。

看，每行所占的单元格总数是一样的，除了一些小单元格。这是colspan属性合并单元格的功能。Colspan属性写在td上。

Rowspan属性

rowspan属性用于设置td或th的行间距。

例如，下表所示:

f跨2行，H跨3行。

注意:f和h都属于2线，一定要说清楚。

判断跨库单元属于哪一行，要看它的起点是哪一行，属于哪一行。比如上图，f和h的起点都是2号线。

那么上图所示的表格，让我来看看每一行包括哪些单元格:

上表总共有四行。

第一行是ABCD的一个小单元格。

第二行是EFGH的四个细胞。

第三行只有两个单元格，I和J。一般情况下，I和J是挨着的，但是因为F向下穿越侵占了第三排的位置而分开了。

荷航第四排只有三个牢房。

我用相同的颜色圈出属于同一行的单元格:

这是为了更直观地演示哪个单元格属于哪个行。

但我相信，你不用付出也能圈出来，你已经很清楚该如何判断了。

当你能清楚地知道哪个单元格属于哪一行，也就是你能清楚地知道哪一行包含了哪些单元格，那么你就能清楚地写出代码。

例如，上表，

我们已经知道第一行包括四个单元，A、B、C和D，

第二行包括四个单元，e、f、g和h，

第三行包括两个单元，I和J，

第四行包括三个单元格:k、l和m。

如果表中有几行，就用几个tr标签对，每行是一个tr标签对。

每行有几个单元格，所以在tr标签对中写几个td标签对。

然后哪个单元格是跨列或者跨行的，在上面写colspan或者rowspan属性就可以了。

按照这种思路，代码很好写，上面跨线表的实现代码如下:

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& ltmeta name = & # 34视窗& # 34；内容= & # 34；宽度=设备宽度，初始比例= 1.0 & # 34；& gt& lttitle & gt合并单元

浏览器中的效果如下:

有rowspan和colspan属性。

单元格可以同时具有rowspan和colspan属性，也就是说，它们可以同时跨越行和列。

例如，下表所示:

在这个表中，F横跨两行，G横跨三行两列。

那么g同时具有rowspan和colspan属性。

然而，它仍然是关键问题——你能说出哪个细胞属于哪条线吗？

或者根据单元格的起点，属于起点所在的线。

所以，

该表的第一行包括四个单元格:A、B、C和d。

第二行包括三个单元格:e、f和g。

第三行只包括h的一个小单元格。

第四行只包括两个单元格，I和j。

这个表格有4行，所以写4个tr标签对。

第一行有四个单元，所以在第一个tr标签对中写入四个td标签对。

第二行中有3个单元，因此第二个tr标签对中有3个td标签对。

第三行有一个单元，所以在第三个tr标签对中写入一个td标签对。

第四行有两个单元，因此在第四个tr标签对中写入两个td标签对。

F跨两行，就在F所在的td上写rowspan = & # 342"。

G横跨三行两列，同时在G所在的td上写rowspan = & # 343"而colspan = & # 342"。

其他单元格没有属性。

根据这种想法，代码很容易编写:

& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& ltmeta name = & # 34视窗& # 34；内容= & # 34；宽度=设备宽度，初始比例= 1.0 & # 34；& gt& lttitle & gt合并单元

浏览器中的显示效果如下:

补充说明:

为了防止展示时三张桌子挤在一起，我在每张桌子前面都贴了一个h2标签。为什么不使用h1标签？由于HTML规范的原因，每页只允许有一个h1标记，并且可以有多个h2标记。

感谢阅读！总结知识不容易，请点个赞或者转发鼓励一下！想系统学习前端的小伙伴可以关注我！