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来样式化表头是个不错的办法。
分享到:
相关推荐
为了使表格更具可读性和功能性的增强,HTML提供了三个特殊的标签:`<thead>`、`<tfoot>`和`<tbody>`,它们分别用于定义表格的头部、尾部和主体部分。在本篇文章中,我们将深入探讨这些标签的作用和用法,并通过一个...
一个基本的Bootstrap表格由`<table>`标签开启,包含`<thead>`、`<tbody>`和`<tfoot>`等部分。`<thead>`用于定义表格的表头,`<tbody>`则包含表格的主要内容,`<tfoot>`则常用来显示总计或统计信息。 要实现表头固定...
2.thead, tbody, tfoot thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如,可以将所有列标题放在thead元素中,这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元
* sectionRowIndex:获取tBody,tHead或tFoot中,表格行对象在行集合中的位置 * tabIndex:设置或获取表格行的Tab顺序索引 * vAlign:设置或获取表格行中文字的垂直对齐方向 * width:设置或获取表格行的宽度 Table...
一个完整的table表格一般包含<thead>、<tbody>和<tfoot>元素结合,用来规定表格的各个部分(表头、主体、页脚)。 ### 2.3 form表单标签 form标签是HTML语言中最基本的表单标签,它可以用来创建一个表单。form标签...
table 元素是 HTML5 中用于创建表格的基本元素,它由表头(thead)、表体(tbody)和表脚(tfoot)三部分组成。其中,表头用于显示表格的标题,表体用于显示表格的内容,表脚用于显示表格的总结信息。 在创建个人...
一个HTML表格由`<table>`元素开始,内部包含`<thead>`(表头)、`<tbody>`(主体内容)和`<tfoot>`(表尾)等部分。表头通常包含列标题,用于描述表格数据的类别。例如: ```html <table> <thead> 列1 列2 列...
- `<tbody>`标签:定义表格主体。 - `<tfoot>`标签:定义表格底部。 - `colspan`和`rowspan`属性:分别用于合并列和行。 #### 九、框架标签 - `<frameset>`标签:用于定义一个包含多个框架的窗口。 - `rows`和...
- **创建div容器**:用div替换table,thead,tbody和tfoot标签,为每一行和每一列创建对应的div。 - **应用CSS样式**:使用CSS定义div的布局和样式,例如使用display:flex或display:grid来模拟表格行为。 - **...
一个HTML表格由`<table>`元素开启,包含`<tr>`(行)元素,`<td>`(单元格)或`<th>`(表头单元格)元素,以及可能的`<thead>`、`<tbody>`和`<tfoot>`部分。当表格嵌套时,一个`<td>`或`<th>`元素内部可以包含另一个...
同时,HTML5引入了新的表格相关标签,如 `<thead>`、`<tbody>`、`<tfoot>`、`<th>` 和 `<td>`,它们提供了更语义化的表格结构,有助于提高页面的可读性和可访问性。在实际开发中,结合这些新标签使用 `<table>` 的...
通过本文的学习,你应该能够熟练掌握`table`标签的基本用法以及如何使用`colspan`和`rowspan`属性来合并单元格,同时也了解了如何使用`<thead>`、`<tbody>`和`<tfoot>`标签来增强表格的语义性和可访问性。...
`<table>`标签允许我们构建复杂的表格结构,包括行(`<tr>`)、列(`<th>`或`<td>`)以及表头(`<thead>`)、表体(`<tbody>`)和表脚(`<tfoot>`)。在本教程中,我们将深入探讨如何使用CSS来美化和增强HTML表格的...
1. **基础结构**:一个基本的Bootstrap表格由`<table>`标签开始,然后是`<thead>`(表头)、`<tbody>`(主体)和可选的`<tfoot>`(页脚)部分。每一行数据用`<tr>`标签表示,列数据则由`<th>`(表头单元格)或`<td>`...
- `multiple`属性:允许选择多个选项。 - `size`属性:定义可见选项的数量。 - **`<option>`**:定义下拉列表中的选项。 - `selected`属性:预选某个选项。 - **`<optgroup>`**:定义下拉列表中的选项组。 以上...
表格由`<table>`元素开始,包含`<thead>`(表头)、`<tbody>`(主体)和`<tfoot>`(表脚)部分。在`<thead>`中,我们用`<tr>`(行)和`<th>`(表头单元格)定义表头;在`<tbody>`中,用`<tr>`和`<td>`(数据单元格)...
表格由`<table>`元素定义,包含表头`<thead>`,表体`<tbody>`,以及表脚`<tfoot>`(如果有的话)。固定表头通常需要将`<thead>`独立出来,以便在滚动时保持可见。表头中的行`<tr>`包含列标题`<th>`,而表体中的行`...
它由多个子元素组成,包括`<thead>`(表头)、`<tbody>`(表体)和`<tfoot>`(表脚)。在处理表头固定的问题时,`<thead>`尤为重要,因为它包含表格的列名或标题。 为了实现表头固定,我们首先需要将`<thead>`和`...
* tbody:定义表格的 tbody 部分 * td:定义表格单元格 * th:定义表格标题单元格 * thead:定义表格的 thead 部分 * tfoot:定义表格的 tfoot 部分 * tr:定义表格行 * ul:定义无序列表 * var:定义变量 HTML5 ...
- `thead`、`tbody`、`tfoot`:分别表示表头、表身和表脚。 - `rowspan`:合并行。 - `colspan`:合并列。 5. **表单**: - `form`标签:创建表单。 - `name`:表单的名称。 - `method`:提交数据的方式,...