TABLE的几个属性:thead、tfoot、tbody

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:
程序代码

<style>

td[scope] { 
font-weight:bold; 
}
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值