您的当前位置：首页正文

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

2020-11-27 来源：意榕旅游网

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

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

说明表格的用途

例子：



访问 www.forest53.com 浏览器统计



浏览器 / 月 
2005 / 11 
2006 / 04 
2006 / 05 




总计
1,646 ( 98.45% )
6,978 ( 99.48% ) 
5,366 ( 99.56% ) 




Internet Explorer
1,535 (91.81%)
5,905 (86.41%)
4,550 (84.42%)


Firefox
98 (5.86%)
746 (10.92%)
640 (11.87%)


Opera
13 (0.78%)
147 (2.15%)
176 (3.27%)

浏览器 / 月	2005 / 11	2006 / 04	2006 / 05
总计	1,646 ( 98.45% )	6,978 ( 99.48% )	5,366 ( 99.56% )
Internet Explorer	1,535 (91.81%)	5,905 (86.41%)	4,550 (84.42%)
Firefox	98 (5.86%)	746 (10.92%)	640 (11.87%)
Opera	13 (0.78%)	147 (2.15%)	176 (3.27%)