天天看点

HTML 合并单元格合并单元格合并单元格方式

合并单元格

特殊情况下。可以将多个单元格合并成为一个单元格

HTML 合并单元格合并单元格合并单元格方式

合并单元格方式

跨行、跨列合并

HTML 合并单元格合并单元格合并单元格方式
HTML 合并单元格合并单元格合并单元格方式

行之间和列之间的合并

跨第二行,第三行合并叫做跨行合并

跨第二列,第三列合并叫做跨列合并

目标单元格

跨行:最上侧单元格为目标单元格,写合并代码

跨列:最左侧单元格为目标单元格,写合并代码

合并单元格步骤

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

合并单元格代码

<!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. 运行结果

HTML 合并单元格合并单元格合并单元格方式