您的位置：首页 > Web前端 > HTML

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

2018-02-27 22:06 609 查看
今天在初次学习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@163.com</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@163.com</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标签得留着
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航