当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 重新认识表格和一个访问无障碍的数据表格例子

CSS样式表
未知长宽元素在已知300px*300px的容器中垂直居中(IE6/7/8/FF)
CSS dashed和dotted的区别
css 超过宽度的文字显示点点
不同浏览器对CSS3和HTML5的支持状况
使用DIV+CSS布局网站的优点和缺陷分析
CSS样式表中的position属性详细说明
css 圆角边框
CSS 网页布局问题 li上多出的margin问题
为什么有些css样式不起作用
tab选项卡布局之利用a的一个选项形式
UL、LI 无序列表实现纯CSS网站导航菜单
在IE下,当margin:0 auto;无法使得块级元素水平居中时
IE bug input 外层浮动的边距问题
重置浏览器默认样式
两种跨浏览器的自适应高的css代码
纯CSS无hacks的跨游览器自适应高度多列布局 推荐
IE中伪类hover的使用及BUG
img与容器下边界的空隙(缝隙) 的解决方法
CSS入门篇之传智播客学习
CSS3 倾斜的网页图片库实例教程

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 91 ::
收藏到网摘: n/a

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

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