`
sony-soft
  • 浏览: 1007956 次
文章分类
社区版块
存档分类
最新评论

HTML table 中的thead、tbody 、TFOOT

 
阅读更多

url:http://www.w3cschool.cn/tag_tbody.asp.htm

<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。

tbody 元素应该与 theadtfoot 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

请注意,在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。

浏览器支持

<tbody> 标签仅得到所有主流浏览器的部分支持。

HTML 与 XHTML 之间的差异

NONE

提示和注释:

注释:<thead> 内部必须拥有 <tr> 标签!

注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

注释:<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。假如您使用 Internet Explorer 5.0 或更新的浏览器,可以在我们的 XML 教程中查看一个例子

执行结果:

http://www.w3cschool.cn/t.asp-f=html_tbody.htm

TBody 的解释及用法

url:http://chengyu2099.javaeye.com/blog/580904

TBody是在table中使用的,用来指明由它包括的各表格行做为表格的主体部分。

TBody与THead和TFoot在表格中形成三个“块”,

THead指明表格的Head部分,

TFoot指明表格的脚注部分。

而TBody则指明表格的主体部分。

  1. 表格的dom结构象这样的:
  2. <table>
  3. <thead>
  4. <tr>
  5. <td>表头</td>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td>表体</td>
  11. </tr>
  12. </tbody>
  13. <tfoot>
  14. <tr>
  15. <td>表脚</td>
  16. </tr>
  17. </tfoot>
  18. </table>
  19. 如果只有一个tbody的时候经常不写tbody,但是其实这个对象还是存在的,alert一下table的innerHTML就可以看见了。

分享到:
评论

相关推荐

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

    还有人很变态地用这三个标签做出标题能跟随表格,或者tbody固定高度,走出自动出现滚动条的功能。... &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) ...

    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)深入了解

    表格标签主要包含的标签有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;...

    IE bug table元素的innerHTML

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

    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 标题 ...

    Html5中文手册(程序员必备手册)

    84、&lt;tfoot&gt; 定义表格的脚注。 85、&lt;th&gt; 定义表头。 86、&lt;thead&gt; 定义表头。 87、&lt;time&gt; 定义日期/时间。 88、&lt;title&gt; 定义文档的标题。 89、&lt;tr&gt; 定义表格行。 90、&lt;ul&gt; 定义无序列表。 91、&lt;video&gt; 定义视频。

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

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

    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属性:输入框占位...

    css 清除浏览器默认样式

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,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,...

    object_dom:HTML对象声明性Dom

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

    原生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

    Web前端高级作业一.txt

    表格头:&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;&lt;/tr&gt;&lt;/tbody&gt; 表格尾:&lt;tfoot&gt;&lt;tfoot&gt; table标签里还可以设置很多属性 2.1.2表单标签,常常用于提交数据 当input的type为submit...

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

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

    从入门到精通HTML5——PDF——网盘链接

     7.1.1 表格的基本构成——table、tr、td 119  7.1.2 表格的标题——caption 120  7.1.3 表格的表头——th 121  7.2 设置表格基本属性 123  7.2.1 表格的宽度——width 123  7.2.2 表格的高度——height...

Global site tag (gtag.js) - Google Analytics