`

table标签中thead、tbody、tfoot的作用{转}

    博客分类:
  • html
 
阅读更多
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成。下载一块显示一块,表格巨大时有比较好的效果。
    tbody、tfoot、thead一般来说用得不是很多,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。
thead 表格的头        用来放标题之类的东西
tbody 表格的身体    放数据本体
tfoot  表格的脚       放表格的脚注之类
我觉得最直接的用处是:  
  TBODY包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。
给出一个实例:
比如:
<TABLE>
 <THEAD>
  <TR>
   <TD>
   This text is in the THEAD.
   </TD>
  </TR>
 </THEAD>
 <TBODY>
  <TR>
   <TD>
   This text is in the TBODY.
   </TD>
  </TR>
 </TBODY>
 <TFOOT>
  <TR>
   <TD>
   This text is in the table footer.
   </TD>
  </TR>
 </TFOOT>
</TABLE>
分享到:
评论

相关推荐

    使用thead、tfoot、 tbody制作一个表格

    还有人很变态地用这三个标签做出标题能跟随表格,或者tbody固定...thead、tfoot 以及 tbody标签&lt;/title&gt; &lt;table border=”1″&gt; &lt;thead&gt; &lt;tr&gt; 科目&lt;/th&gt; 分数&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; 语文&lt;/td&gt; &lt;td&gt;9

    table CSS制作好看的网页表格

    2.thead, tbody, tfoot thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如,可以将所有列标题放在thead元素中,这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元

    HTML标签tbody的用法与说明

    tbody 元素应该与 thead 和 tfoot 元素结合起来使用。  表格的分组显示(Structured Table) (IExplore Only) 一、按行分组 &lt;thead&gt; … &lt;/thead&gt; – 表的题头(Header) &lt;tbody&gt; … &lt;/tbody&gt; – 表的正文(Body) ...

    表格标签(table)深入了解

    表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup,针对每个的介绍如下: &lt;table&gt;table标签可定义表格。在 &lt;table&gt; 标签内部,你可以放置表格的标题、表格行、表格列、表格...

    html tbody 用法

    (IExplore Only) 1)按行分组 &lt;thead&gt; … &lt;/thead&gt; – 表的题头(Header) &lt;tbody&gt; … &lt;/tbody&gt; – 表的正文(Body) &lt;tfoot&gt; … &lt;/tfoot&gt; – 表的脚注(Footer) 例: &lt;table&gt; &lt;thead&gt; &lt;tr&gt;&lt;th&gt;Food&lt;/th&gt;&lt;th&gt;Drink&lt;/th&gt;...

    CSS里元素初始化文件html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,

    对css里的元素如:html, body, div, ... strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td的初始化

    最大限度的分离table的样式与结构

    但CSS+XHTML的兴起,使很多人开始妖魔化table这一标签,甚至以页面中是否有table...比如,thead,tr,th,td,tbody,tfoot,colgroup,scope.而本文正是利用这些属性,把样式从table中分离出来.请看下图:这是一个有6种背景色的tab

    jQuery导出excel表格文件pdf文件CSV文件代码.zip

    &lt;table id="example" class="display" role="grid" aria-describedby="example_info"&gt; &lt;thead&gt; 事件ID 员工ID 标题 &lt;th&gt;URL 开始时间 &lt;/thead&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;tfoot&gt; 事件ID 员工ID 标题 ...

    Web前端高级作业一.txt

    例:p[attribute~=value],指的是attribute中包含value的值以及,并与其他内容通过空格隔开的p标签 2.3.4连字符标签 例:|=,属性为value或以value开头的 2.3.5前缀选择器 例:^=,属性以value开头的 2.3.6子串...

    HTML5和CSS3价格表翻转切换动画特效.zip

    table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, ...

    HTML_CSS学习笔记.docx

    5.5. &lt;thead&gt;、&lt;tbody&gt;、&lt;tfoot&gt;标签:定义表格的表头、表身、表尾 19 6. HTML5表单标签 20 6.1. 标签:创建表单,与用户交互 20 6.2. 输入框:文本输入框、密码输入框 22 6.3. &lt;input&gt;:placeholder属性:输入框占位...

    IE bug table元素的innerHTML

    首先时飘忽不定的collapse的border,ie6偏偏有一个地方与其他浏览器表现不同,一条丑陋的border不管怎么样都显示... 同样为只读的元素还有COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, T

    原生js实现表格翻页和跳转

    本文实例为大家分享了js实现表格翻页和跳转的...&lt;table xss=removed xss=removed xss=removed id=table&gt; &lt;thead&gt; &lt;td&gt;No &lt;td&gt;Name &lt;td&gt;Age &lt;/thead&gt; &lt;tbody&gt;&lt;/tbody&gt; &lt;tfoot&gt; &lt;input type=button n

    object_dom:HTML对象声明性Dom

    表,thead,tfoot,tbody,th,tr,td,col,colgroup,标题 html,头,正文,脚本,样式,链接,元,标题 可用班级 按钮,中断,自定义 跨度,段落 粗体,强壮,斜体,强调 标记,较小,已删除,已插入 下标,上标...

    css 清除浏览器默认样式

    a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,...

    详解HTML表格|l-639642.pdf

    作用:数据的展示,表格应用场景. &lt;table&gt;表格 行 单元格 格式: &lt;table&gt; ...划分三部分:表头(thead),主体(tbody),脚注(tfoot)这三个标签不能影响布局 &lt;table&gt;  &lt;caption&gt;...&lt;/caption&gt;

    分页 servlet

    实际应用中,文章总数这个值我们从数据库可以得到;每页显示的文章数即分页的页大小可以自己定义;页数我们可以通过下面的个表达式简单得出。 假设: int pageSize = 10; //分页大小 int totalPosts = ...

    浅谈Html网页表格结构化标记的应用

    在讲网页表格的结构化标记之前,还是先看几幅图片。 ...所谓的结构化,正如上述第一副图所示,就是把我们的表格划分为三种:表头、表体、表尾。从而当我们在修改表体部分的时候,... &lt;tfoot&gt;…&lt;/tfoot&gt;————表尾区 

    html入门到放弃笔记

    作用:保留源文档中的回车 和 空格 的作用 &lt;pre&gt;&lt;/pre&gt; 8、分区元素 1、块分区元素 语法:&lt;div&gt;&lt;/div&gt; 作用:布局 2、行内分区元素 语法:&lt;span&gt;&lt;/span&gt; 作用:设置同一行文字内的不同样式 9、行内元素 与...

Global site tag (gtag.js) - Google Analytics