admin 管理员组

文章数量: 887039

Html5

一：

1、语法

跨行合并 rowspan = "合并单元格的个数“

跨列合并 colspan= "合并单元格的个数“

2、合并顺序

：先上后下、先左后右

3、合并三部曲

（1）先确定跨行还是跨列

（2）根据先上后下，先左后右的顺序找到目标单元格，然后写上 合并方式 以及合并的单元格数量

<td colspan="2"> //跨行合并，合并数量为3

（3）删除多余的单元格

 

二、案例

1、将下表个人简历的表格进行合并

 

此表格的代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>合并单元格</title>
</head>
<body>
<table align="center" width="500" cellspacing="0" border="1"><caption><h3>个人简历</h3></caption><tr><td>姓名：张三</td><td>性别：男</td><td>年龄：27</td><td>照片</td></tr><tr><td>身高：180cm</td><td>民族：汉</td><td>婚姻：未婚</td><td>照片</td></tr><tr><td>个人简历</td><td>个人简历</td><td>个人简历</td><td>个人简历</td></tr><tr><td>个人作品</td><td>个人作品</td><td>个人作品</td><td>个人作品</td></tr>
</table>
</body>
</html>

2、合并后的表格

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>合并单元格</title>
</head>
<body>
<table align="center" width="500" cellspacing="0" border="1"><caption><h3>个人简历</h3></caption><tr><td>姓名：张三</td><td>性别：男</td><td>年龄：27</td><td rowspan="2" >照片</td></tr><tr><td>身高：180cm</td><td>民族：汉</td><td>婚姻：未婚</td>
<!--        <td>照片</td>    删除此表格--></tr><tr><td>个人简历</td><td colspan="3">个人简历</td><!--        <td>个人作品</td>--><!--        <td>个人作品</td>--></tr><tr><td>个人作品</td><td colspan="3">个人作品</td>
<!--        <td>个人作品</td>-->
<!--        <td>个人作品</td>--></tr>
</table>
</body>
</html>

 

 

本文标签： Html5

版权声明：本文标题：Html5 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1686578605h12702.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。