`

TABLE的几个属性:thead、tfoot、tbody{转}

    博客分类:
  • html
阅读更多

TABLE的几个属性:thead、tfoot、tbody
thead表格的头
tbody表格的身体
tfoot表格的脚
以前还真没接触过!
先看一个简单的例子……

HTML代码
<table summary="a test table"> <thead> <tr> <th scope="col">序号</th> <th scope="col">姓名</th> </tr> </thead> <tfoot> <tr> <td colspan="2">共3条</td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>张三</td> </tr> <tr> <td>2</td> <td>李四</td> </tr> <tr> <td>3</td> <td>王五</td> </tr> </tbody> </table>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]



把表头和数据联系起来:scope,id,headers属性
很多表格要比上面提供的例子复杂的多。让例子复杂一点,移去“Company”表头,并且把第一列的数据移到表头单元格里:

HTML代码
<table summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <td></td> <th>Employees</th> <th>Founded</th> </tr> <tr> <th>ACME Inc</th> <td>1000</td> <td>1947</td> </tr> <tr> <th>XYZ Corp</th> <td>2000</td> <td>1973</td> </tr> </table>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]



在这个表格里,每一个数据单元格都有两个表头。最简单的方法让那些非可视的浏览器理解这个表格,就是为每个表头添加一个scope属性。

HTML代码
<table summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <td></td> <th scope="col">Employees</th> <th scope="col">Founded</th> </tr> <tr> <th scope="row">ACME Inc</th> <td>1000</td> <td>1947</td> </tr> <tr> <th scope="row">XYZ Corp</th> <td>2000</td> <td>1973</td> </tr> </table>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]



Scope属性同时定义了行的表头和列的表头:
col: 列表头 
row: 行表头
在第一行的<th>加上值为col的scope属性,声明他们是下面数据单元格的表头。同样的,给每行的开头<th>加上值为row的scope属性声明他们是右边数据单元格的表头。

Scope属性还有两个值:
colgroup: 定义列组(column group)的表头信息 
rowgroup: 定义行组(row group)的表头信息
一个列组是由<colgroup>标签定义的。行组则是由<thead>、<tfoot>和<tbody>定义的。稍后我将会详细介绍它们。

如果你既想要保留“Company”表头,而又想让公司名字作为行表头(row headers)显示,你会怎么做?那样的话,应该使得包含公司名字的单元格同时提供表头和数据信息。也就是说,<td>标签也应该加上scope属性:

HTML代码
<table summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <th scope="col">Company</th> <th scope="col">Employees</th> <th scope="col">Founded</th> </tr> <tr> <td scope="row">ACME Inc</td> <td>1000</td> <td>1947</td> </tr> <tr> <td scope="row">XYZ Corp</td> <td>2000</td> <td>1973</td> </tr> </table>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]



这样的话可视化浏览器不会默认的把company name显示为表头。所以需要用CSS来修正一下,就刚才那个例子,我使用了下面的CSS:

程序代码
td[scope] { 
font-weight:bold; 
}
要注意上面的规则使用了属性选择符,IE是不支持的。而通过添加一个class来样式化表头是个不错的办法。
分享到:
评论

相关推荐

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

    为了使表格更具可读性和功能性的增强,HTML提供了三个特殊的标签:`&lt;thead&gt;`、`&lt;tfoot&gt;`和`&lt;tbody&gt;`,它们分别用于定义表格的头部、尾部和主体部分。在本篇文章中,我们将深入探讨这些标签的作用和用法,并通过一个...

    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 CSS制作好看的网页表格

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

    jqGrid表格属性大全

    * sectionRowIndex:获取tBody,tHead或tFoot中,表格行对象在行集合中的位置 * tabIndex:设置或获取表格行的Tab顺序索引 * vAlign:设置或获取表格行中文字的垂直对齐方向 * width:设置或获取表格行的宽度 Table...

    HTML1.02 HTML标签属性

    一个完整的table表格一般包含&lt;thead&gt;、&lt;tbody&gt;和&lt;tfoot&gt;元素结合,用来规定表格的各个部分(表头、主体、页脚)。 ### 2.3 form表单标签 form标签是HTML语言中最基本的表单标签,它可以用来创建一个表单。form标签...

    html5怎么制作个人简历表格?.docx

    table 元素是 HTML5 中用于创建表格的基本元素,它由表头(thead)、表体(tbody)和表脚(tfoot)三部分组成。其中,表头用于显示表格的标题,表体用于显示表格的内容,表脚用于显示表格的总结信息。 在创建个人...

    HTML学习帮助文档

    - `&lt;tbody&gt;`标签:定义表格主体。 - `&lt;tfoot&gt;`标签:定义表格底部。 - `colspan`和`rowspan`属性:分别用于合并列和行。 #### 九、框架标签 - `&lt;frameset&gt;`标签:用于定义一个包含多个框架的窗口。 - `rows`和...

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

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

    将table转换成div+css

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

    table嵌套table边框样式

    一个HTML表格由`&lt;table&gt;`元素开启,包含`&lt;tr&gt;`(行)元素,`&lt;td&gt;`(单元格)或`&lt;th&gt;`(表头单元格)元素,以及可能的`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`部分。当表格嵌套时,一个`&lt;td&gt;`或`&lt;th&gt;`元素内部可以包含另一个...

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

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

    table标签使用方法

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

    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表格的...

    Bootrap table表格示例

    1. **基础结构**:一个基本的Bootstrap表格由`&lt;table&gt;`标签开始,然后是`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(主体)和可选的`&lt;tfoot&gt;`(页脚)部分。每一行数据用`&lt;tr&gt;`标签表示,列数据则由`&lt;th&gt;`(表头单元格)或`&lt;td&gt;`...

    HTML 常用标签大全 适合初学者查阅

    - `multiple`属性:允许选择多个选项。 - `size`属性:定义可见选项的数量。 - **`&lt;option&gt;`**:定义下拉列表中的选项。 - `selected`属性:预选某个选项。 - **`&lt;optgroup&gt;`**:定义下拉列表中的选项组。 以上...

    纯css table 样式布局制作人口统计table表格样式代码

    表格由`&lt;table&gt;`元素开始,包含`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(主体)和`&lt;tfoot&gt;`(表脚)部分。在`&lt;thead&gt;`中,我们用`&lt;tr&gt;`(行)和`&lt;th&gt;`(表头单元格)定义表头;在`&lt;tbody&gt;`中,用`&lt;tr&gt;`和`&lt;td&gt;`(数据单元格)...

    移动web table固定表头第一列.rar

    表格由`&lt;table&gt;`元素定义,包含表头`&lt;thead&gt;`,表体`&lt;tbody&gt;`,以及表脚`&lt;tfoot&gt;`(如果有的话)。固定表头通常需要将`&lt;thead&gt;`独立出来,以便在滚动时保持可见。表头中的行`&lt;tr&gt;`包含列标题`&lt;th&gt;`,而表体中的行`...

    table的表头固定

    它由多个子元素组成,包括`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(表体)和`&lt;tfoot&gt;`(表脚)。在处理表头固定的问题时,`&lt;thead&gt;`尤为重要,因为它包含表格的列名或标题。 为了实现表头固定,我们首先需要将`&lt;thead&gt;`和`...

    HTML5标签和属性列表.pdf

    * tbody:定义表格的 tbody 部分 * td:定义表格单元格 * th:定义表格标题单元格 * thead:定义表格的 thead 部分 * tfoot:定义表格的 tfoot 部分 * tr:定义表格行 * ul:定义无序列表 * var:定义变量 HTML5 ...

    HTML属性.docx

    - `thead`、`tbody`、`tfoot`:分别表示表头、表身和表脚。 - `rowspan`:合并行。 - `colspan`:合并列。 5. **表单**: - `form`标签:创建表单。 - `name`:表单的名称。 - `method`:提交数据的方式,...

Global site tag (gtag.js) - Google Analytics