HTML---表格table标签中theadtbodytfoot的作用
Posted 你在开玩笑吧
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML---表格table标签中theadtbodytfoot的作用相关的知识，希望对你有一定的参考价值。
为了让大表格(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的作用
以上是关于HTML---表格table标签中theadtbodytfoot的作用的主要内容，如果未能解决你的问题，请参考以下文章
HTML---表格table标签中theadtbodytfoot的作用