表格-合并单元格

最新推荐文章于 2023-12-20 00:25:43 发布

Blue_lan18

最新推荐文章于 2023-12-20 00:25:43 发布

阅读量704

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/Blue_lan18/article/details/122551138

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

可以把多个单元格合并为一个单元格。

1.合并单元格的方式：

跨行合并：rowspan。

跨列合并：colspan。

2.目标单元格：跨行合并时最上侧单元格为目标单元格，写合并代码。跨列合并时最左侧单元格为目标单元格，写合并代码。

3.合并单元格的步骤：

先确定是跨行合并还是跨列合并。

找到目标单元格，写合并代码，如rowspan="2"。

删除多余的单元格。

例：

<!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>合并单元格</title>
</head>

<body>
    <table align="center" border="1" width="300" height="300" cellspacing="0">
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td rowspan="3"></td>
            <td colspan="3"></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>

浏览器效果如图：