HTML之表格(3)

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>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值