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

韩曙亮

发布于 2023-03-30 11:04:38

10.7K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、合并单元格

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>