HTML---表格table标签中thead、tbody、tfoot的作用

为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成。下载一块显示一块,表格巨大时有比较好的效果。

tbody、tfoot、thead一般来说用得不是很多,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。

而这三部分分别用: thead, tbody, tfoot来标注。

thead 表格的头 用来放标题之类的东西
tbody 表格的身体 放数据本体
tfoot  表格的脚 放表格的脚注之类

我觉得最直接的用处是:
TBODY包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。

实践出真知:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>表格制作</title>
</head>
<body>
	<table border="1">
		<tr>
			<td>王明阳</td>
			<td>明朝末期</td>
			<td>领导了一场革命</td>
		</tr>
		<tr>
			<th>人物</th>
			<th>背景</th>
			<th>成就</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>清末</td>
			<td>当了走狗</td>
		</tr>
	</table>
	<br><br><br><br>
	<table border="1">
		<tbody>
			<tr>
				<td>王明阳</td>
				<td>明朝末期</td>
				<td>领导了一场革命</td>
			</tr>
		</tbody>
		<thead>
			<tr>
				<th>人物</th>
				<th>背景</th>
				<th>成就</th>
		</tr>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>清末</td>
				<td>当了走狗</td>
			</tr>
		</tbody>
	</table>


</html>

运行结果:

运行结果

关于**“表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。”**这句话的进一步解释:
即本来表格行的显示是按照代码所写的顺序从上到下来显示的,但应用了thead/tbody/tfoot以后就变成了“从头(thead)到脚(tfoot)"显示,也就是说不管<thead></thead>所包含的代码、<tbody></tbody>所包含的代码、<tfoot></tfoot>所包含的代码、三者的相对位置关系如何,html显示时总是以先thead后tbody然后tfoot的顺序显示
**另注:**在一个table中,tbody可以出现多次,但thead与tfoot只能出现一次

改编于:table标签中thead、tbody、tfoot的作用

  • 24
    点赞
  • 58
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值