【HTML】HTML 表格 ③ ( 合并单元格 | 跨行合并 | 跨列合并 | 单元格合并顺序 | 跨行设置 rowspan 属性 | 跨列设置 colspan 属性 )
2023-06-13 09:18:07 时间
文章目录
一、合并单元格
1、合并单元格方式
单元格合并方式 :
- 跨行合并 : 垂直方向上的 上下 单元格合并 是 跨行合并 , 在 <td> 单元格标签 中 使用 rowspan 属性 , 设置跨行合并单元格数 ;
- 跨列合并 : 水平方向上的 左右 单元格合并 是 跨列合并 , 在 <td> 单元格标签中 使用 colspan 属性 , 设置跨列合并单元格数 ;
2、合并单元格顺序
单元格 合并 是按照 从上到下 , 从左到右 的顺序进行合并 ;
3、合并单元格流程
合并单元格流程 :
- 首先 , 确定 合并单元格 类型 , 是 跨行合并 还是 跨列合并 ;
- 然后 , 根据 从上到下 , 从左到右 的顺序 , 找到要 设置 rowspan 或 colspan 属性 的 目标单元格 ;
- 跨行合并 : 按照 从上到下 的顺序 进行合并 , 最上方的单元格 是 目标单元格 ;
- 跨列合并 : 按照 从左到右 的顺序 进行合并 , 最左侧的单元格 是 目标单元格 ;
- 最后 , 删除 合并后 多余的单元格 ;
二、合并单元格示例
1、原始表格
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<!-- 表格标签 -->
<table border="1" width="500" height="200"
align="left" cellpadding="10" cellspacing="0">
<!-- 表格标题标签 -->
<caption>表格标题</caption>
<!-- 表格行标签 -->
<tr>
<!-- 表格表头单元格标签 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<!-- 表格普通单元格标签 -->
<td>Tom</td>
<td>18</td>
</tr>
<tr>
<!-- 表格普通单元格标签 -->
<td>Jerry</td>
<td>16</td>
</tr>
</table>
</body>
</html>
显示效果 :
2、跨行合并单元格
按照下图的样式 , 合并红色矩形框中的单元格 ;
合并步骤 :
- 首先 , 该合并是 跨行合并 , 要在 <td> 标签中 使用 rowspan 属性 ;
- 然后 , 找到 目标单元格 , 是要合并单元格的最上方的单元格 , 显示 18 文本的单元格 是目标单元格 ;
- 最后 , 删除多余的单元格 , 第三排 显示 16 文本的单元格要删除 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<!-- 表格标签 -->
<table border="1" width="500" height="200"
align="left" cellpadding="10" cellspacing="0">
<!-- 表格标题标签 -->
<caption>表格标题</caption>
<!-- 表格行标签 -->
<tr>
<!-- 表格表头单元格标签 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<!-- 表格普通单元格标签 -->
<td>Tom</td>
<td rowspan="2">18</td>
</tr>
<tr>
<!-- 表格普通单元格标签 -->
<td>Jerry</td>
</tr>
</table>
</body>
</html>
显示效果 :
3、跨列合并单元格
按照下图的样式 , 合并红色矩形框中的单元格 ;
合并步骤 :
- 首先 , 该合并是 跨列合并 , 要在 <td> 标签中 使用 colspan 属性 ;
- 然后 , 找到 目标单元格 , 是要合并单元格的最 左测的单元格 , 显示 Jerry 文本的单元格 是目标单元格 ;
- 最后 , 删除多余的单元格 , 第三排 显示 16 文本的单元格要删除 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<!-- 表格标签 -->
<table border="1" width="500" height="200"
align="left" cellpadding="10" cellspacing="0">
<!-- 表格标题标签 -->
<caption>表格标题</caption>
<!-- 表格行标签 -->
<tr>
<!-- 表格表头单元格标签 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<!-- 表格普通单元格标签 -->
<td>Tom</td>
<td>18</td>
</tr>
<tr>
<!-- 表格普通单元格标签 -->
<td colspan="2">Jerry</td>
</tr>
</table>
</body>
</html>
显示效果 :
相关文章
- 滚动效果——marquee的html样式和CSS属性
- 怎么html文字下划线,HTML怎么设置下划线?html文字加下划线方法
- html 的scor属性,scrollheight属性「建议收藏」
- 图片中加入超链接html代码,html网页超链接代码 怎样用HTML代码在图片插入超链接…
- html视频标签属性_html音频标签
- idea打包jar没有主清单属性_maven库中有jar包,但是引入不到
- 【每周CV论文推荐】StyleGAN人脸属性编辑有哪些经典论文需要阅读
- 开心档之Vue3 计算属性
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- 开心档之HTML 属性
- 【Android Gradle 插件】ProductFlavor 配置 ( AppExtension#variantFilter 过滤变体属性 )
- 【HTML】HTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )
- Python __dict__属性:查看对象内部所有属性名和属性值组成的字典
- 会话cookie中缺少HttpOnly属性详解编程语言
- 什么是文件,文件(属性、操作、类型及结构)详解
- 如何修改MySQL中的字段属性(mysql修改数据库字段)
- Linux 开发HTML的简单技巧(linux开发html)
- 让Linux灵活运行HTML:简单有效的方法(linux运行html)
- 文件MySQL数据库存储HTML文件.(mysql存html)
- 从 HTML 页面访问 MySQL 数据库.(html访问mysql)
- HTML 属性
- HTML 全局属性
- 文件MySQL 使用之禅 利用HTML文件实现完美保存(mysql保存html)
- 使用HTML实现MySQL资料读取(html读取mysql)
- HTML 操作 Oracle 数据库的实现(html调用oracle)
- Oracle中生成主键属性的方法及应用(oracle主键属性)
- 深入理解Redis连接属性(redis连接属性怎么看)
- HTML中的图象标签属性
- ExtJS下grid的一些属性说明
- IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
- 用jquery模仿的a的title属性(兼容ie6/7)
- javascript检测对象中是否存在某个属性判断方法小结
- JS批量操作CSS属性详细解析
- jquery中event对象属性与方法小结
- php过滤HTML标签、属性等正则表达式汇总