其他分享
首页 > 其他分享> > HTML 前端开发学习 —— 合并单元格

HTML 前端开发学习 —— 合并单元格

作者：互联网

合并单元格

介绍

合并单元格
	-- 跨行合并
		-- rowspan = “合并单元格个数”
	-- 跨列合并
		-- colspan = "合并单元格个数"

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

合并单元格三部曲
	-- 先确定是跨行还是跨列合并
	-- 找到目标单元格，写上 合并方式 = 合并单元格的数量
		-- 比如： <td colspan= "2"> </td>
	-- 删除多余单元格

代码演示

<!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 border="1" cellspacing="0px" cellpadding="20px" align="center">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <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>

运行结果

在这里插入图片描述

标签：--,单元格,合并,跨列,HTML,跨行,未知,前端开发
来源： https://blog.csdn.net/ShiJieDeYinYu/article/details/120357855