HTML---表格合并(详解)

例子详解:

在这里插入图片描述
关键字解释:

border="1" :表格标签默认是无边框的,所以这里加上border=”1“是为了更好的进行样式展示;
colspan="2":表示的是进行单元格列合并,在该行中,先是th表头占据了一个单元格,之后遇到th,用colspan=2进行属性设置,表示该单元格横跨两列(也就是列合并);
rowspan="2":表示的是进行单元格行合并,在该行中,直接先是在th中设置属性rowspan=2,表明该单元格横跨两行,但是列大小不变(也就是行合并),这里设置完之后,需要注意的是,第三行就少一个单元格内容,所以在进行第三行添加的时候,添加的是一个单元格,而不是两个单元格。

实例演示:

中间两行两类的合并:
在这里插入图片描述

注意合并之后,单元格需要插入的个数

不同行不同类合并:
在这里插入图片描述

  • 总结:重点就是计算,在合并之后,每行还需要插入单元格的个数。

猜你喜欢

转载自blog.csdn.net/qq_44864833/article/details/122463283