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

互联网 2021/9/17 23:10:08

合并单元格 介绍代码演示运行结果介绍 合并单元格-- 跨行合并-- rowspan = “合并单元格个数”-- 跨列合并-- colspan = "合并单元格个数"目标单元格-- 跨行:最上侧单元格为目标单元格,写合并代码-- 跨列:最左侧单元格为目标单元格,写合并代码合并单元格三部…

合并单元格

    • 介绍
    • 代码演示
    • 运行结果

介绍

合并单元格
	-- 跨行合并
		-- 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>

运行结果

在这里插入图片描述

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[HTML 前端开发学习 —— 合并单元格]http://www.zyiz.net/tech/detail-229582.html

上一篇:前端学习(1)

下一篇:前端简答算法题汇总

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程