一、合并单元格

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>