今天学习合并单元格的相关知识及用法

大家肯定在生活中经常见到这样的表格格式：

在Word中我们可以通过创建表格以后右键选择合并单元格，如图所示：

那么我们如何在HTML中去实现这种效果呢？
我们可以通过<table>标签中的这两个属性去实现单元格合并：

• rowspan_跨行合并
• colspan_跨列合并

使用方法

首先我们在HTML中新建一个表格：

我们想要实现这么一个效果，把有颜色的重复单元格合并到一起，该怎么办呢？

一：首先确定我们要进行的是跨行合并还是跨列合并

这里我们学习一个知识点，在合并单元格时，我们是
从上到下，从左到右的顺序进行合并
所以我们在跨行合并的时候代码添加在第一行，
跨列合并的时候代码添加到第一列

我们可以看到在上面创建的表格中，我们需要合并的照片表格，可以确定为是跨行合并，
因为是第一行的照片单元格和第二行的单元格进行合并，所以我们可以使用rowspan进行跨行合并；

这里需要注意，跨行合并单元格实质上是第一个单元格下方再创建了一个单元格进行合并
所以为了不多出来单元格，我们把下方被合并的
单元格代码删除掉！

代码使用

 <table border="1" cellspacing="0" width="400" height="50s" cellpadding="10">
        <tr>
            <td>姓名:张三</td>
            <td>年龄：18</td>
            <td>性别：男</td>
            <td rowspan="2" style="color:#3366ff;">照片</td>
        </tr>
        <tr>
            <td>身高：175</td>
            <td>民族：汉</td>
            <td>婚姻：未婚</td>
        </tr>
        <tr style="color:#3366ff">
            <td>个人爱好</td>
            <td>个人爱好</td>
            <td>个人爱好</td>
            <td>个人爱好</td>
        </tr>
        <tr style="color:#3366ff">
            <td>个人简介</td>
            <td>个人简介</td>
            <td>个人简介</td>
            <td>个人简介</td>
        </tr>
    </table>

实现的效果：

使用colspan进行跨列合并

代码使用

<table border="1" cellspacing="0" width="400" height="50s" cellpadding="10">
        <tr>
            <td>姓名:张三</td>
            <td>年龄：18</td>
            <td>性别：男</td>
            <td rowspan="2" style="color:#3366ff;">照片</td>
        </tr>
        <tr>
            <td>身高：175</td>
            <td>民族：汉</td>
            <td>婚姻：未婚</td>
        </tr>
        <tr style="color:#3366ff">
            <td>个人爱好</td>
            <td>个人爱好</td>
            <td>个人爱好</td>
            <td>个人爱好</td>
        </tr>
        <tr style="color:#3366ff">
            <td>个人简介</td>
            <td>个人简介</td>
            <td>个人简介</td>
            <td>个人简介</td>
        </tr>
    </table>
    <h4>使用colspan进行跨列合并</h4>
    <!-- 代码模块 -->
    <strong>实现的效果：</strong>
    <table border="1" cellspacing="0" width="400" height="50s" cellpadding="10">
        <tr>
            <td>姓名:张三</td>
            <td>年龄：18</td>
            <td>性别：男</td>
            <td rowspan="2" style="color:#3366ff;">照片</td>
        </tr>
        <tr>
            <td>身高：175</td>
            <td>民族：汉</td>
            <td>婚姻：未婚</td>
        </tr>
        <tr style="color:#3366ff;">
            <td colspan="4">个人爱好：打篮球,上网，学习前端</td>
        </tr>
        <tr style="color:#3366ff;">
            <td colspan="4">个人简介：母胎SOLO18年未输一场</td>
        </tr>
    </table>

实现的效果：

总结：

1. 合并顺序是从上到下，从左到右
2. 合并单元格实质上是创建新单元进行合并，所以要删除多余的单元格
3. rowspan是跨行合并
4. colspan是跨列合并

好了，这篇文章就学到这里啦！