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

2021/9/17 23:10:08

编程Tag： 合并 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 前端开发学习 —— 合并单元格的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

合并单元格

介绍

代码演示

运行结果

相关编程文章