Web基础(从零开始)——HTML表格标签（合并单元格）

最新推荐文章于 2024-05-24 17:50:52 发布

小白花lll

最新推荐文章于 2024-05-24 17:50:52 发布

阅读量3.2k

点赞数 4

分类专栏：零基础学Web 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_57633498/article/details/121175218

版权

零基础学Web 专栏收录该内容

33 篇文章 6 订阅

订阅专栏

合并单元格方式：

1.跨行合并：rowspan="合并单元格的个数"

2.跨列合并：colspan="合并单元格的个数"

在目标单元格中写合并代码：

跨行合并：在最上侧单元格写合并代码

跨列合并：在最左侧单元格写合并代码

合并单元格三部曲：

1.确定是跨行合并还是跨列合并；

2.找到目标单元格，写上合并方式=合并单元格数量，例：<td rowspan="2"></td>；

3.删除多余的单元格。

举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" height="200">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

先建立一个3*3的单元格

（1）想要合并如图所示单元格

1.确定是跨列合并；

2.找到目标单元格为最左侧单元格，在最左侧单元格上写上合并代码

对应代码中为第一个单元格，在该标签中添加合并代码

<td colspan="2"></td>

3.删除多余单元格

该单元格为多余的，删除

效果：

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" height="200">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

（2）想要合并如图所示单元格

1.确定为跨列合并

2.找到目标单元格为最上侧单元格，在最上侧单元格上写上合并代码

对应代码中：

在该行代码中添加合并代码：

<td rowspan="2"></td>

3.删除多余单元格

实现效果：

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" height="200">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

小白花lll

关注

4
点赞
踩
26

收藏

觉得还不错? 一键收藏
1
评论
Web基础(从零开始)——HTML表格标签（合并单元格）

合并单元格方式：1.跨行合并：rowspan="合并单元格的个数"2.跨列合并：colspan="合并单元格的个数"在目标单元格中写合并代码：跨行合并：在最上侧单元格写合并代码跨列合并：在最左侧单元格写合并代码合并单元格三部曲：1.确定是跨行合并还是跨列合并；2.找到目标单元格，写上合并方式=合并单元格数量，例：<td rowspan="2"></td>；3.删除多余的单元格。举例：<!DOCTYPE ht...
复制链接

扫一扫