原生表格

一、合并单元格的方式

  • 跨行合并rowspan="合并单元格的个数"
  • 跨列合并colspan="合并单元格的个数"

带内容

20220805111123

<!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>
        <style>
            img {
                width: 168px;
                height: 260px;
            }
        </style>
    </head>
    <body>
        <table width="400" height="250" border="1" cellspacing="0">
            <tr>
                <td rowspan="4">
                    <img
                        src="http://alita.ashun01.eu.org/picgo/2022/ashun-10.png"
                        alt=""
                    />
                </td>
                <td colspan="2">Land pledge</td>
            </tr>
            <tr>
                <td>Daily interest:</td>
                <td>1.8%</td>
            </tr>
            <tr>
                <td>Term:</td>
                <td>3 month</td>
            </tr>
            <tr>
                <td>End time:</td>
                <td>2022-8-5</td>
            </tr>
        </table>
    </body>
</html>

没内容

20220805111325

<!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>
        <style></style>
    </head>
    <body>
        <table width="400" height="250" border="1" cellspacing="0">
            <tr>
                <td rowspan="4"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

总结

简单地说，合并单元格分为三步：

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

  2. 找到目标单元格，并在目标单元格中添加合并代码

  3. 删除多余单元格

posted @ 2022-08-09 22:06  天使阿丽塔  阅读(51)  评论(0)  编辑  收藏  举报