网页设计:标准化你表格44963

网页设计:标准化你表格44963

ID:20146022

大小:41.00 KB

页数:15页

时间:2018-10-09

网页设计:标准化你表格44963_第1页
网页设计:标准化你表格44963_第2页
网页设计:标准化你表格44963_第3页
网页设计:标准化你表格44963_第4页
网页设计:标准化你表格44963_第5页
资源描述:

《网页设计:标准化你表格44963》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、网页设计:标准化你的表格44963网页设计:标准化你的表格对于那些刚接触CSS布局的人来说,常对如何使用表格(table)感到迷惑。我在很多地方看到人们把“避免用表格来布局”理解成“完全不使用table标签”。值得注意的是,表格是可以用的而且非常好用——只要用的正确。是的,你得尽量的去避免用表格来布局。但是对于表格型数据,你就应该使用table。我想谈谈如何使用表格来组织表现表格型数据。在HTML和XHTML里,表格不仅仅是行(row)和单元格(cell),还有很多其他元素,特别是如果你想让数据更加容易理解。首先来点背景知识,“避免用表格来布局”这句话可以在HTML

2、4.01规范的表格介绍部分里面找到:表格不应该纯粹的被用来布局文档内容,这样可能在处理渲染非可视媒体的时候产生问题。另外,当和图片一起使用的时候,这些表格可能在某个系统上显示过大而强迫用户拖动水平滚动条,为了减少这些问题,设计者应该使用样式表来控制布局而不是表格。这样已经很明白了,尽管文档中说“应该”而不是“必须”,所以这个规范还是有弹性的。但是本文并不是讨论是否使用表格布局,而是使用表格来组织表现表格型数据——这是表格诞生的本意。当表格用来组织实际的数据时,不仅仅是一个编排布局的格子而已。一般人可以从表格的编排和表现上看出标题和数据单元格之间的关系。盲人或者有视觉

3、障碍的人则不能做到这一点。如果一个表格要让那些使用屏幕阅读器或用其他非可视用户代理(UA)的人们能够理解,它则需要告诉用户代理它包含的信息之间是如何联系起来的。幸运的是,HTML在这方面提供了很多元素和属性。然而,使用这些可以增强易用性和语义化的功能比较难而且本身不容易理解。在本文中,我尝试着解释如何使用他们。表头,让我们从一个非常简单的表格开始——只包含一行表头和两行三列的数据。如果用以前流行的做法,只用表格的行和单元格,写出来就如下:

公司雇员成立于
ACM

4、EInc

10001947
XYZCorp20001973
没有边框和修饰,那么上面的代码在你现在的浏览器里看起来就如下:公司雇员成立于ACMEInc10001947XYZCorp20001973用CSS稍微修饰一下表格,你可以使表头在图形化浏览器里面更加明显:公司雇员成立于ACMEInc10001947XYZCorp20001973一个视力正常的人,很容易并且很快就可以明白表头和数据单元格之间的关系。从另一方面讲,那些使用屏幕阅

5、读器的人可以听到如下顺序的词:公司,雇员,成立于,ACMEInc,1000,1947,XYZCorp,2000,1973。不是十分容易明白其中的关系。第一步——最简单的——通过适当的标出表头来使得表格更加有意义。很简单:只要使用标签取代表头的标签即可。

6、

公司雇员成立于
ACMEInc10001947
XYZCorp20001973
公司雇员成立于ACMEInc10001947XYZCorp20001973这个例子虽然简单,但是已经包含了足够的信息使得屏幕阅读器能够让使用者明白表头和数据单元格之间的关系。一个屏幕阅读器一般会这么读:公司:ACMEInc.,雇员:1000,成立于:1947.,以此类推。比之前好多了。表格标题,标签可以为表格提供一个简短的说明,和图像的说明比较类似。默认情况下,大部分可视化浏览器显示表格标题在表格的上方中央。CSS里的caption-side属性用来控制表格标题显示的地方。大部分浏览器只能把表格标题显示在表格的上方

7、或者下方,只有一些浏览器支持左边或者右边。这个就留给大家去试试了。使用的时候,标签一定要紧接着开始的

标签写,如下:
当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
Table1:Companydata
CompanyEmployeesFounded
ACMEInc10001947
XYZCorp20001973