600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 0227:关于HTML中table标签中合并单元格时遇到的问题

0227:关于HTML中table标签中合并单元格时遇到的问题

时间:2021-11-10 08:27:17

相关推荐

0227:关于HTML中table标签中合并单元格时遇到的问题

今天在初次学习HTML的时候,便在table标签的使用上遇到了个问题,就是在合并单元格时发现单元格的合并显示之后并没有按自己所想的那样显示,具体问题也描述不出来,通过代码和实例来记录一下这个烦人的问题吧。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>个人简历</title></head><body><table border="1" cellspacing="0px" align="center" width="800px" height="1000px"><!-- <thead><th align="center" colspan="7" height="50px">.....</th></thead> --><tbody><tr align="center"><td>姓名</td><td>德莱厄斯</td><td>专业</td><td>嘉里敦屋里系</td><td colspan="2" rowspan="3"></td></tr><tr align="center"><td>性别</td><td>男</td><td>毕业学校</td><td>瓦罗兰大陆诺克萨斯战争学院</td></tr><tr align="center"><td>民族</td><td>平民</td><td>住址</td><td>诺克萨斯市政街西兰花公寓六栋六楼六号</td></tr><tr align="center"><td>学历</td><td>小学二年级</td><td>邮箱</td><td>dles@</td><td>联系方式</td><td>29392132904</td></tr><tr align="center"><td>出生日期</td><td>瓦罗兰历三五八年独立日</td><td>电话</td><td>4008823823</td><td>邮编</td><td>710121</td></tr><tr align="center"><td rowspan="2" colspan="2">实习经历</td><td rowspan="2" colspan="4"></td></tr><tr align="center"><td rowspan="2" colspan="2">实习经历</td><td rowspan="2" colspan="4"></td></tr></tbody></table></body></html>

注意:在最后两行时本人选择了连续进行合并单元格的操作,这就造成了如下问题

看一下,讲道理第二个实习经历应该是在下一行,不过tr的rowspan在合并行时是自动向下合并的,导致下一个实习经历被挤到了右边,同时colspan也是默认向右合并的,所以导致了这个问题,解决方法是在两个合并的tr之间加一个空的tr标签;

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>个人简历</title></head><body><table border="1" cellspacing="0px" align="center" width="800px" height="1000px"><thead><th align="center" colspan="7" height="50px">.....</th></thead><tbody><tr align="center"><td>姓名</td><td>德莱厄斯</td><td>专业</td><td>嘉里敦屋里系</td><td colspan="2" rowspan="3"></td></tr><tr align="center"><td>性别</td><td>男</td><td>毕业学校</td><td>瓦罗兰大陆诺克萨斯战争学院</td></tr><tr align="center"><td>民族</td><td>平民</td><td>住址</td><td>诺克萨斯市政街西兰花公寓六栋六楼六号</td></tr><tr align="center"><td>学历</td><td>小学二年级</td><td>邮箱</td><td>dles@</td><td>联系方式</td><td>29392132904</td></tr><tr align="center"><td>出生日期</td><td>瓦罗兰历三五八年独立日</td><td>电话</td><td>4008823823</td><td>邮编</td><td>710121</td></tr><tr align="center"><td rowspan="2" colspan="2">实习经历</td><td rowspan="2" colspan="4"></td></tr><tr></tr><tr align="center"><td rowspan="2" colspan="2">实习经历</td><td rowspan="2" colspan="4"></td></tr></tbody></table></body></html>

这样就可以实现了:

其实这样的错误发生的根本原因是我自己没有在布局table标签时没有提前想好表格的最大行和最大列,所以在布局table标签的tr和td标签时,写出最大行数个的tr标签,每个tr标签中有最大列的td标签,然后根据实际表格需要进行合并,在合并的同时删除td标签即可,tr标签得留着

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。