合并行使用和合并列分别使用什么属性

在html页面中, table表格利用仍是比力频仍的, 可是, 现实的列表中, 行列凡是不会那么法则的展示, 凡是需要归并行或者归并列

需要这些哦
visual studio code
方式/
1【合并行使用和合并列分别使用什么属性】归并行利用rowspan, 归并列利用colspan来进行table行列归并

合并行使用和合并列分别使用什么属性

文章插图

2利用visual studio code编纂东西, 新建一个html页面, 添加html5的页面根基布局
4前端页面开辟东西 - VSCode的下载与安装

合并行使用和合并列分别使用什么属性

文章插图

3在body规模中添加一个table, 此处仅做演示, 直接在table中添加tr, 未添加thead、tbody 。 并为表格添加css边框样式

合并行使用和合并列分别使用什么属性

文章插图

4利用浏览器打开这个测试页面, 运行可以看到默认的table样子, 此时还没有归并行或者列

合并行使用和合并列分别使用什么属性

文章插图

5利用rowspan进行单位格的行归并, 此处将第一行第一列设置rowspan=2, 那么, 第一行第一列半斤八两于就占有第一、二行的第一列, 即占用了两个单位格位置, 所以, 下一行就需要注释失落一个单位格

合并行使用和合并列分别使用什么属性

文章插图

6在浏览器中打开这个测试页面, 就可以看到第一列进行了行归并

合并行使用和合并列分别使用什么属性

文章插图

7利用colspan进行单位格的列归并, 此处将第一行的第三、四列归并, 在第三列中利用colspan=2, 同时注释失落第四列即可

合并行使用和合并列分别使用什么属性

文章插图

8在浏览器中打开这个测试页面, 就可以看到第一行的第三四列归并了

合并行使用和合并列分别使用什么属性

文章插图


以上内容就是合并行使用和合并列分别使用什么属性的内容啦, 希望对你有所帮助哦!

    推荐阅读