IT俱乐部 HTML HTML表格合并的具体实现方式

HTML表格合并的具体实现方式

当我们在做出一份HTML表格的时候

可以看到这样是非常不河狸的。这就需要合并单元格了

主要步骤:

一、先确认是要向右合并(列合并),还是向下合并(行合并)。

二、找出需要合并的单元格。

三、如果被合并的单元格有内容或者占用了位置,则可以将被合并的单元格在源代码中删掉。

特别注意

我们在合并单元格的时候,如果被合并的单元格有内容,虽然不会影响到合并,但因为被合并的单元格内容没做任何处理,所以单元格会自动后移。

解决方案:直接删除多余的单元格即可。

主要代码:

跨行合并:rowspan=”合并单元格的个数”

跨列合并:colspan=”合并单元格的个数”

详解:

目标单元格:

1:跨行:最上侧单元格为目标单元格,写合并代码。

2:跨列:最左侧单元格为目标单元格,写合并代码。

然后我们跟着主要步骤来一遍:

初始表格

  
全明星信息收集
姓名 性别 年龄 爱好
哥哥 24 唱跳rap打篮球
理塘 20 测码 抽锐刻五
梦泪 27 出名刀 偷塔 变终极猎手

这显示出来就是上面的图片样子

跨行合并(rowspan):如果我们想要下面的效果就需要使用到rowspan属性


  
全明星信息收集
姓名 性别 年龄 爱好
哥哥 24 唱跳rap打篮球
理塘 20 测码 抽锐刻五
梦泪 27 出名刀 偷塔 变终极猎手

跨列合并(colspan):如果我们想要下面的效果就需要使用到colspan属性


  
全明星信息收集
姓名 性别 年龄 爱好
哥哥 24 唱跳rap打篮球
理塘 20 测码 抽锐刻五
梦泪 27 出名刀 偷塔 变终极猎手

到此这篇关于HTML表格合并的具体实现方式的文章就介绍到这了,更多相关HTML表格合并内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/html/5412.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部