学习Web前端(表格)的第一天
作者:
acfxh | 来源:发表于
2019-02-27 20:34 被阅读0次
colspan 合并列单元格(从左到右合并) rowspan 合并行单元格(从上到下合并)
![](https://img.haomeiwen.com/i16532534/9b7a884da154b64a.png)
没有
colspan,
rowspan时的html
![](https://img.haomeiwen.com/i16532534/7caa274e7de0f339.png)
没有 colspan, rowspan时的显示
![](https://img.haomeiwen.com/i16532534/0e0a746854b13b79.png)
有 colspan的html
colspan="2",2是跨列合并单元格的数量
![](https://img.haomeiwen.com/i16532534/5024543f2bfe9454.png)
有 colspan的显示
可以看出预想的不一样,突出了一个单元格。是由于尽管合并了,但是td表示的单元格还有3格,因此要删掉一个td,删掉第三个td。
![](https://img.haomeiwen.com/i16532534/dd15bcbd2399ab1f.png)
有 colspan,删掉一个td的html
![](https://img.haomeiwen.com/i16532534/a1ff4b238eb4af9f.png)
正常显示
以上就是colspan跨列合并单元格的内容
rowspan:
![](https://img.haomeiwen.com/i16532534/c71e5addf2462d23.png)
有 rowspan的html
rowspan="2",2是跨行合并单元格的数量
![](https://img.haomeiwen.com/i16532534/e01c890b7f07306c.png)
有 colspa
rowspan是跨行合并单元格可以看出预想的不一样,突出了一个单元格。是由于行尽管合并了,但是第二行的td表示的单元格还有1格,因此要删掉一个td
![](https://img.haomeiwen.com/i16532534/28a98afb8a7b1a44.png)
有 rowspan,删掉一个td的html
![](https://img.haomeiwen.com/i16532534/015c53f9731977e9.png)
正常显示
本文标题:学习Web前端(表格)的第一天
本文链接:https://www.haomeiwen.com/subject/ducfuqtx.html
网友评论