`
maomaozgc
  • 浏览: 333884 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML <thead> <tbody> <tfoot>标签

阅读更多
定义和用法
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。但也可以单独使用。

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

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

请注意,在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。
实例
带有 thead、tbody 以及 tfoot 元素的 HTML 表格:

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

浏览器支持
<thead> 标签仅得到所有主流浏览器的部分支持。
HTML 与 XHTML 之间的差异
NONE
提示和注释:
注释:<thead> 内部必须拥有 <tr> 标签!

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

注释:<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。假如您使用 Internet Explorer 5.0 或更新的浏览器.
可选的属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性 值 描述 DTD
align right
left
center
justify
char
定义 thead 元素中内容的对齐方式。 STF
char character 规定根据哪个字符来进行文本对齐。 STF
charoff number 规定第一个对齐字符的偏移量。 STF
valign top
middle
bottom
baseline
规定 thead 元素中内容的垂直对齐方式。 STF
标准属性
id, class, title, style, dir, lang, xml:lang如需完整的描述,请访问标准属性。
事件属性
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup


表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头.

浏览器显示表格时,通常是完全下载表格后,再全部显示,所以当表格很长时,可以使用tbody分段显示.

表格的表脚tfoot,可以使用单独的样式定义表脚,并且在打印时可以在分页的下部打印表脚.

它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。必须在 table 元素内部使用这些标签。
建议采用div+css替代来支持所有浏览器
分享到:
评论

相关推荐

    table标签使用方法

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

    HTML5制作表格样式

    `&lt;table&gt;`元素是表格的容器,`&lt;thead&gt;`表示表头,`&lt;tbody&gt;`表示表格主体,`&lt;tfoot&gt;`表示表尾。例如: ```html &lt;table id="table1"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;列1&lt;/th&gt; &lt;th&gt;列2&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; ...

    漂亮的网页 模版 完全利用完成的

    5. `&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`:分别用于定义表格的表头、主体和页脚,有助于结构化内容。 6. 属性使用:`border`、`cellpadding`、`cellspacing`等属性可以控制表格的边框、单元格内部的间距等。 随着Web...

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

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

    实验2列表、表格与多媒体标签(学生端资料).zip

    表格可以有多行多列,并通过`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`标签来区分表头、主体和页脚。例如: ```html &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;姓名&lt;/th&gt; &lt;th&gt;年龄&lt;/th&gt; &lt;th&gt;城市&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; ...

    HTML标签(下)(表格+列表+表单)

    表格的基本结构包括&lt;thead&gt;、&lt;tbody&gt;和&lt;tfoot&gt;三个部分,分别表示表头、表体和表脚。 &lt;th&gt;和&lt;td&gt;标签 &lt;th&gt;和&lt;td&gt;标签是表格中的两个基本单元格标签。&lt;th&gt;标签用于定义表头单元格,其内容将被加粗居中,而&lt;td&gt;标签...

    HTML table的使用

    同时,`&lt;tbody&gt;`和`&lt;tfoot&gt;`可以分别用于包裹主体数据和页脚数据。例如: ```html &lt;table&gt; &lt;caption&gt;员工信息表&lt;/caption&gt; &lt;colgroup&gt; &lt;col style="width: 200px;"&gt; &lt;col style="width: 100px;"&gt; &lt;col&gt; &lt;/...

    HTML.rar_表格网页

    同时,可以使用`&lt;caption&gt;`标签添加表格标题,`&lt;colgroup&gt;`和`&lt;col&gt;`定义列的样式,`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`分别用于定义表头、主体和页脚部分。 此外,HTML5引入了新的表格属性,如`scope`用于定义`&lt;th&gt;`...

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

    &lt;thead&gt; &lt;tr&gt; &lt;th&gt;事件ID&lt;/th&gt; &lt;th&gt;员工ID&lt;/th&gt; &lt;th&gt;标题&lt;/th&gt; &lt;th&gt;URL&lt;/th&gt; &lt;th&gt;开始时间&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;th&gt;事件ID&lt;/th&gt; &lt;th&gt;员工ID&lt;/th&gt; &lt;th&gt;标题&lt;/th&gt; ...

    2022年HTML相关知识点表格标签(1).pptx

    可以使用 `&lt;thead&gt;`、`&lt;tbody&gt;`、`&lt;tfoot&gt;` 标签来分组表格,例如: `&lt;table&gt; &lt;thead&gt; &lt;tr&gt;&lt;th&gt;姓名&lt;/th&gt;&lt;th&gt;性别&lt;/th&gt;&lt;th&gt;年龄&lt;/th&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;td&gt;男&lt;/td&gt;&lt;td&gt;...

    Web程序开发:第6章 表格.pptx

    - `&lt;tfoot&gt;`:定义表格的页脚,通常用于总结或注解。 ```html &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Month&lt;/th&gt; &lt;th&gt;Savings&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;td&gt;Sum&lt;/td&gt;&lt;td&gt;$180&lt;/td&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;tbody&gt;...

    WEB前端技术-表格元素练习

    在`&lt;table&gt;`标签内部,可以包含`&lt;thead&gt;`, `&lt;tbody&gt;`, `&lt;tfoot&gt;`, `&lt;tr&gt;`, `&lt;th&gt;`, `&lt;td&gt;`等多种子元素。`&lt;table&gt;`具有多个属性,如`border`(边框宽度)、`cellpadding`(单元格内边距)、`cellspacing`(单元格间...

    html中table的表格样式

    表格还可以通过`&lt;colgroup&gt;`和`&lt;col&gt;`标签对列进行样式控制,或者通过`&lt;tbody&gt;`、`&lt;tfoot&gt;`和`&lt;thead&gt;`分别定义表格主体、页脚和头部。 对于复杂的表格布局,可以使用`&lt;tr&gt;`、`&lt;td&gt;`的`colspan`和`rowspan`属性来...

    HTML语义化.doc

    - 表格结构应完整,包括`&lt;caption&gt;`、`&lt;thead&gt;`、`&lt;tbody&gt;`、`&lt;tfoot&gt;`,并正确使用`&lt;th&gt;`和`&lt;td&gt;`区分表头和单元格。 - 使用`&lt;fieldset&gt;`和`&lt;legend&gt;`来组织表单,并用`&lt;label&gt;`关联`&lt;input&gt;`,以提供清晰的输入...

    table控件以及用法

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

    2022年HTML相关知识点表格标签.pptx

    定义表格的行分组可以使用&lt;thead&gt;、&lt;tbody&gt;和&lt;tfoot&gt;标签,例如:&lt;table&gt;&lt;thead&gt;...&lt;/thead&gt;&lt;tbody&gt;...&lt;/tbody&gt;&lt;tfoot&gt;...&lt;/tfoot&gt;&lt;/table&gt;。 定义表格的列分组 定义表格的列分组可以使用&lt;colgroup&gt;标签,例如:...

    Html表格及分页收集.pdf

    在HTML5中,表格功能得到了进一步扩展,如`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`的语义化更明确,`&lt;th&gt;`增加了`scope`属性以指定其对齐的行或列,`&lt;td&gt;`和`&lt;th&gt;`支持`headers`属性来关联表头。此外,`&lt;tfoot&gt;`可以在长...

    网页设计HTML表格基础与布局优秀PPT.ppt

    HTML表格可以通过&lt;thead&gt;、&lt;tbody&gt;和&lt;tfoot&gt;三个标签来划分表格的结构。其中,&lt;thead&gt;标签定义了表格的头部,&lt;tbody&gt;标签定义了表格的主体,&lt;tfoot&gt;标签定义了表格的尾部。 七、表格布局原则 HTML表格布局的原则是...

    第八次 网页制作表格应用

    此外,表格还支持标题行`&lt;thead&gt;`、数据行`&lt;tbody&gt;`和页脚`&lt;tfoot&gt;`,它们可以帮助组织和区分表格内容: ```html &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;标题1&lt;/th&gt; &lt;th&gt;标题2&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;...

Global site tag (gtag.js) - Google Analytics