HTML 合并单元格

最新推荐文章于 2024-05-16 12:43:50 发布

CodeDoraemon

最新推荐文章于 2024-05-16 12:43:50 发布

阅读量2.3k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_40417070/article/details/113079064

版权

HTML 单元格合并 rowspan colspan 表格布局

关键词由CSDN通过智能技术生成

HTML 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

合并单元格

特殊情况下。可以将多个单元格合并成为一个单元格
在这里插入图片描述

合并单元格方式

跨行、跨列合并

在这里插入图片描述

行之间和列之间的合并
跨第二行，第三行合并叫做跨行合并
跨第二列，第三列合并叫做跨列合并

目标单元格

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

合并单元格步骤

确定行、列合并
找到目标单元格
删除多余的单元格

合并单元格代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table  border = "1" cellspacing = "0" width = "330" height = "330">
        <tr> 
            <td rowspan="2"></td>
             <td colspan="2"></td> 
        </tr>

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

        <tr> <td></td>
             <td></td>  
        </tr>
    </table>
    <!-- 1. 选择是行合并 还是列合并 -->
    <!-- 2. 行: rowspan = "2"(合并单元格的数量是 2 ) -->
    <!--    列: clospan = "2"(合并列单元格的数量是 2) -->
    <!-- 选择目标单元格,写合并代码,删除剩下的 -->
</body>
</html>

4. 运行结果

在这里插入图片描述

CodeDoraemon

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML 合并单元格

合并单元格特殊情况下。可以将多个单元格合并成为一个单元格合并单元格方式跨行、跨列合并行之间和列之间的合并跨第二行，第三行合并叫做跨行合并跨第二列，第三列合并叫做跨列合并目标单元格跨行：最上侧单元格为目标单元格，写合并代码跨列：最左侧单元格为目标单元格，写合并代码合并单元格步骤确定行、列合并找到目标单元格删除多余的单元格合并单元格代码<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫

专栏目录