HTML5相关知识学习（第六篇）

最新推荐文章于 2024-08-15 10:47:57 发布

努力学习11

最新推荐文章于 2024-08-15 10:47:57 发布

阅读量116

点赞数

分类专栏： HTML学习文章标签： html5 其他经验分享

本文链接：https://blog.csdn.net/weixin_45691018/article/details/119106882

版权

HTML学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

合并单元格

在网页表格设计中，时常需要用到单元格合并的情况。最简单的单元格合并可以分为跨行合并和跨列合并两种。

一.跨列合并

在跨列合并中，左边的单元格为目标单元格。

<td colspan = '2' > </td> 其中2为合并单元格数量

如图.

、

代码：



<!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 border="1" cellpadding = "10" cellspacing = "0" align="center">
       <thead>
        <tr><th>姓名</th>  <th>性别</th> <th>年龄</th></tr>
    </thead>
    <tbody>
        <tr><td>雷神</td>  <td>男</td> <td>111</td></tr>
        <tr><td>宙斯</td>  <td colspan="2"></td> </tr>
    </tbody>
    </table>
</body>
</html>

[点击并拖拽以移动]

结果：

二.跨行合并

在跨行合并中，上边的单元格为目标单元格。

<td rowspan = '2' > </td> 其中2为合并单元格数量

如图.

代码:

<!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 border="1" cellpadding = "10" cellspacing = "0" align="center">
       <thead>
        <tr><th>姓名</th>  <th>性别</th> <th>年龄</th></tr>
    </thead>
    <tbody>
        <tr><td>雷神</td>  <td>男</td> <td rowspan="2">111</td></tr>
        <tr><td>宙斯</td>  <td>男</td> </tr>
    </tbody>
    </table>
</body>
</html>

结果：

合并单元格大致可分为三部：

1.确定目标单元格

2.合并单元格例. <td rowspan = '2' > </td>

3.删除被合并的单元格

表的结构设计

表格设计过程中，一个结构化的表格有助于我们编写代码。

表可以分为表头和表的内容两部分。

表头：<thead></thead>

   <thead>
        <tr><th>姓名</th>  <th>性别</th> <th>年龄</th></tr>
    </thead>

表内容：<tbody></tbody>

 <tbody>
        <tr><td>雷神</td>  <td>男</td> <td rowspan="2">111</td></tr>
        <tr><td>宙斯</td>  <td>男</td> </tr>
    </tbody>

努力学习11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5相关知识学习（第六篇）

合并单元格在网页表格设计中，时常需要用到单元格合并的情况。最简单的单元格合并可以分为跨行合并和跨列合并两种。一.跨列合并在跨列合并中，左边的单元格为目标单元格。<td colspan = '2' > </td> 其中2为合并单元格数量如图.、代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
复制链接

扫一扫