1.合并单元格
现实生活中,我们经常看到表格跨行合并 / 跨列合并。如下图所示
由上图,引出了合并单元格的两种方式:
1.跨行合并:rowspan=“合并单元的个数”
2.跨列合并:colspan=“合并单元格的个数”
2.合并单元格的顺序
先上 后下 先左 后右的顺序
3.合并单元格的三部曲
1.先确定使跨行 / 跨列合并。
2.根据 先上 后下 先左 后右的原则找到目标单元格,然后写上合并方式还有合并的单元格数量。例如<td colspan="3"> </td>
3.删除多余的单元格。
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合并单元格的三部曲</title>
</head>
<body>
<table border="1" width="500" height="240" align="center" cellspacing="0">
<caption> 个人简历 </caption>
<tr>
<td>刘德华</td>
<td>男</td>
<td>18</td>
<!-- 目标单元格 先上后下 -->
<td rowspan="2">照片</td>
</tr>
<tr>
<td>身高 180</td>
<td>汉族</td>
<td>已婚</td>
<!-- <td>照片</td> 这个单元格是多余的 -->
</tr>
<tr>
<td>个人作品</td>
<!-- 第二个单元格是目标单元格 -->
<td colspan="3">个人作品</td>
</tr>
<tr>
<td>个人简历</td>
<td colspan="3">个人简历</td>
</tr>
</table>
</body>
</html>