重新认识表格和一个访问无障碍的数据表格例子
2018-10-12 14:13
330 查看
除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果。
表格一直是网页设计制作过程中一个重要的组成部分,在没学习CSS布局前,大多是用来布局的,但到目前位置发现居然还没真正地了解和完全掌握表格,不得不需要重新认识表格......
在现代网页设计制作中,表格主要的用途应该是用来存放多元二维数据。和表格相关的标签有 table、tr、td、th、tbody、thead、tfoot、col、colgroup、caption,如何合理地应用这些标签呢?先从名词解释开始。
名词解释
table
显示二维数据
tr
表格中的一行
td
数据单元格
th
表头单元格,定义一行或者一列的表头信息,不能使用在布局表格里。
tbody
表格中的某一行或者多行编成组,要结合thead、tfoot一起使用
thead
将表格中的某一行或者多行编成组,要结合tbody、tfoot一起使用
tfoot
将表格中的某一行或者多行编成组,要结合tbody、thead一起使用
col
列,给某一列或者几列应用特定的属性,结合colgroup一起使用
colgroup
列的组合,结合col一起使用
caption
定义表格的标题,在表格开始的地方使用,仅一次
summary
说明表格的用途
例子:
<table summary="这是一个具有亲和力的表格的演示" id="demotab"> <caption> 访问 <a href="http://www.forest53.com">www.forest53.com</a> 浏览器统计 </caption> <thead> <tr> <th>浏览器 / 月 </th> <th>2005 / 11 </th> <th>2006 / 04 </th> <th>2006 / 05 </th> </tr> </thead> <tfoot> <tr> <th>总计</th> <td>1,646 ( 98.45% )</td> <td>6,978 ( 99.48% ) </td> <td>5,366 ( 99.56% ) </td> </tr> </tfoot> <tbody> <tr> <th>Internet Explorer</th> <td>1,535 (91.81%)</td> <td>5,905 (86.41%)</td> <td>4,550 (84.42%)</td> </tr> <tr> <th>Firefox</th> <td>98 (5.86%)</td> <td>746 (10.92%)</td> <td>640 (11.87%)</td> </tr> <tr> <th>Opera</th> <td>13 (0.78%)</td> <td>147 (2.15%)</td> <td>176 (3.27%)</td> </tr> </tbody> </table>
相关文章推荐
- 重新认识表格和一个访问无障碍的数据表格例子
- 通过iec61850协议访问设备数据的一个例子
- 用程序把word模板中的一个表格复制为多个表格然后填充数据(工资单的例子)
- Easyui - 一个比较复杂的ComboGrid(数据表格下拉框)单选的例子
- Easyui - 一个比较复杂的ComboGrid(数据表格下拉框)多选的例子
- 一个管理员登录的数据访问类(新手作品)
- 一个使用Flex和BlazeDS实现协作式数据输入的例子
- 一个 C++ 中动态的插入、删除数据的例子.
- 使用jQuery动态创建一个表格,根据用户数输入的内容添加一行数据
- 一个正在项目中使用的DataInterface数据访问接口
- 一个简单的点击后显示与隐藏表格的例子
- Oracle进行模拟测试数据的一个例子
- jdbc事务回滚 批量操作数据 一个例子
- 【图文教程】五分钟内搞一个双十一数据大屏_实时看到自己的业务访问情况
- 一个可以生成复杂结构的json数据的简单例子
- 一个抓取智联招聘数据并存入表格的python爬虫
- 写一个通用数据访问组件
- 一个 100 万数据( MYSQL )的网站,目前访问速度慢,如果让你优化,你会从哪些方 面进行考虑,谈谈你的思路
- hibernate级联操 同时向2张表插入数据(一对多的关联,一个简单的例子说明)
- 一个表格例子