重新认识表格和一个访问无障碍的数据表格例子

时间:2021-05-25

除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果。

表格一直是网页设计制作过程中一个重要的组成部分,在没学习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://</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>

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章