700字范文 > HTML---表格table标签中thead tbody tfoot的作用

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

时间：2023-03-21 18:40:29

为了让大表格(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的作用

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。