【HTML】HTML 表格 ③ ( 合并单元格 | 跨行合并 | 跨列合并 | 单元格合并顺序 | 跨行设置 rowspan 属性 | 跨列设置 colspan 属性 )

一、合并单元格、1、合并单元格方式、2、合并单元格顺序、3、合并单元格流程、二、合并单元格示例、1、原始表格、2、跨行合并单元格、3、跨列合并单元格、

文章共3,416字 · 阅读需要大约12分钟

一键AI生成摘要，助你高效阅读

问答

韩曙亮

32689人浏览 · 2023-02-10 11:24:35

韩曙亮 · 2023-02-10 11:24:35 发布

文章目录

一、合并单元格
二、合并单元格示例

一、合并单元格

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>

显示效果 :
在这里插入图片描述

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/