欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
一、合并单元格的方式
 
跨行合并rowspan="合并单元格的个数"
 
跨列合并colspan="合并单元格的个数"
 
二、目标单元格
 
我们只需将代码写入目标单元格即可实现合并单元格的操作
 
跨行:最上侧单元格为目标单元格
 
跨列:最左侧单元格为目标单元格
 
三、删除单元格
 
在合并单元格时,我们需要删除多余的单元格,仅保留目标单元格即可,具体操作见下面的代码实现——
 
四 、代码实现
 
<!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 width="400" height="250" border="1" cellspacing="0">
 
        <tr>
 
            <td></td>
 
            <td colspan="2"></td>
 
        </tr>
 
        <tr>
 
            <td rowspan="2"></td>
 
            <td></td>
 
            <td></td>
 
        </tr>
 
        <tr>
 
            <td></td>
 
            <td></td>
 
        </tr>
 
    </table>
 
</body>
 
</html>
 
总结
 
简单地说,合并单元格分为三步:
 
确定跨列合并还是跨行合并
 
找到目标单元格,并在目标单元格中添加合并代码

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64851.shtml