`

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制作一个表格

    使用`&lt;thead&gt;`、`&lt;tfoot&gt;`和`&lt;tbody&gt;`标签的好处在于,它们提供了语义化的结构,有助于屏幕阅读器和搜索引擎理解表格的内容。此外,这些标签还允许开发者对表格的特定部分进行样式控制,比如固定表头或实现滚动效果...

    table CSS制作好看的网页表格

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

    bootstrap表格固定表头并且tbody部分添加滚动条

    一个基本的Bootstrap表格由`&lt;table&gt;`标签开启,包含`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`等部分。`&lt;thead&gt;`用于定义表格的表头,`&lt;tbody&gt;`则包含表格的主要内容,`&lt;tfoot&gt;`则常用来显示总计或统计信息。 要实现表头固定...

    table标签使用方法

    通过本文的学习,你应该能够熟练掌握`table`标签的基本用法以及如何使用`colspan`和`rowspan`属性来合并单元格,同时也了解了如何使用`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`标签来增强表格的语义性和可访问性。...

    HTML标签tbody的用法与说明

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

    css table 表格标签

    `&lt;table&gt;`标签允许我们构建复杂的表格结构,包括行(`&lt;tr&gt;`)、列(`&lt;th&gt;`或`&lt;td&gt;`)以及表头(`&lt;thead&gt;`)、表体(`&lt;tbody&gt;`)和表脚(`&lt;tfoot&gt;`)。在本教程中,我们将深入探讨如何使用CSS来美化和增强HTML表格的...

    tbody标签的妙用 加速表格内容显示

    ### tbody标签的作用和妙用 在HTML表格的标签中,tbody标签用于包含表格的主体部分的内容。通过使用tbody,可以将表格划分成多个部分,这样每个部分可以单独下载。这种特性尤其在表格内容较多的时候非常有用,因为...

    将table转换成div+css

    - **创建div容器**:用div替换table,thead,tbody和tfoot标签,为每一行和每一列创建对应的div。 - **应用CSS样式**:使用CSS定义div的布局和样式,例如使用display:flex或display:grid来模拟表格行为。 - **...

    table标签做的静态网页

    在这个"table标签做的静态网页"案例中,我们主要探讨如何利用`&lt;table&gt;` 标签进行网页布局,以及如何结合其他技术如CSS(层叠样式表)来实现红色导航和图片滚动效果。 1. **HTML `&lt;table&gt;` 标签的使用**: - `...

    表格标签(table)深入了解

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

    table内容出现滚动条和表头对齐问题

    一个HTML表格由`&lt;table&gt;`元素开始,内部包含`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(主体内容)和`&lt;tfoot&gt;`(表尾)等部分。表头通常包含列标题,用于描述表格数据的类别。例如: ```html &lt;table&gt; &lt;thead&gt; 列1 列2 列...

    HTML1.02 HTML标签属性

    table标签可以分为三部分:&lt;thead&gt;、&lt;tbody&gt;和&lt;tfoot&gt;,分别用于规定表格的表头、主体和页脚。 ### 2.2.1 table表格 table标签可以用来创建一个表格,每个表格均有若干行(由标签定义),每行被分割为若干单元格...

    使用HTML开发商业网站-table标签属性课件.pptx

    同时,HTML5引入了新的表格相关标签,如 `&lt;thead&gt;`、`&lt;tbody&gt;`、`&lt;tfoot&gt;`、`&lt;th&gt;` 和 `&lt;td&gt;`,它们提供了更语义化的表格结构,有助于提高页面的可读性和可访问性。在实际开发中,结合这些新标签使用 `&lt;table&gt;` 的...

    纯table导出excel文档

    表格是网页中用于展示结构化数据的重要元素,由thead(表头)、tbody(主体内容)和tfoot(表脚)等部分组成。每个表格行使用标签,每行中的单元格使用或(表头单元格)标签。通过CSS可以对表格进行样式设计,使其...

    table 的用法 网页设计 中html 语言中table用法

    此外,`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`标签用于区分表格的头部、主体和尾部,`&lt;caption&gt;`标签用于添加表格标题,`&lt;colgroup&gt;`和`&lt;col&gt;`用于定义列的样式。 表格的样式也可以通过CSS来进一步定制,例如改变边框样式...

    HTML thead 标签定义和用法详细介绍

    在HTML表格结构中,`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`是三个重要的元素,它们分别代表表格的头部、主体和页脚。 `&lt;thead&gt;`标签通常包含一个或多个`&lt;tr&gt;`(行)标签,这些行用来定义表头单元格`&lt;th&gt;`(Table Header)...

    js动态生成table

    一个基本的表格由`&lt;table&gt;`标签开始,内部包含`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(主体内容)和`&lt;tfoot&gt;`(页脚)等部分。表格的行用`&lt;tr&gt;`表示,单元格用`&lt;td&gt;`或`&lt;th&gt;`(表头单元格)表示。例如: ```html &lt;table&gt; ...

    table控件以及用法

    HTML的`&lt;table&gt;`标签支持`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(主体)、`&lt;tfoot&gt;`(页脚)、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头单元格)和`&lt;td&gt;`(数据单元格)等子元素。通过这些元素,我们可以构建出基本的表格结构。例如: ``...

    Table Table Table

    此外,还可以使用`&lt;caption&gt;`添加表格标题,`&lt;colgroup&gt;`定义列的样式,以及`&lt;tfoot&gt;`、`&lt;thead&gt;`和`&lt;tbody&gt;`来组织表格的头部、尾部和主体部分。 2. **CSS样式**: CSS(Cascading Style Sheets)允许我们对HTML...

Global site tag (gtag.js) - Google Analytics