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>

Yaqsist

发布了67 篇原创文章 · 获赞 54 · 访问量 6万+

私信关注

Html5-------合并单元格

猜你喜欢