阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
表格,让Web看起来更美(2):表格说明什么
表格说明什么 Sin)]zG~0 T+~&jC:{ 表格的标题和摘要 U';)]vB$ yK"\~t[@X: 在前面的例子里,表格前的段落给出了对表格内容的描述。这个描述并没有在语义上同表格连接起来,这种处理是不好的,因为我们在一开始就强调HTML描述的主要是文档的语义。 EXjR&"R 放置这一信息的最佳位置是文档的标题,它通常很有用。HTML通过适当地命名TABLE元素中的CAPTION元素来实现表格标题的定义。以下是我们的例子,做了一个小小的改进: lu
l <TABLE> 4clCZ@\K^ <CAPTION>每 1000 行代码中的错误和产品销售情况</CAPTION> PWvTC`? <TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR> ]j,o!|rx7 <TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR> (zy|>u <TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR> ]e5aHpgR= <TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR> #Pz'-lo <TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR> n} !')r </TABLE> dc~vQDNw[X 每 1000 行代码中的错误和产品销售情况 Lw^%<.DM+t WuF\{bUh
kO^ 每 1000 行代码中的错误和产品销售情况 Year Bugs Sales \8a014 1995 2.3 500,000 ?wmu0rR 1996 3.2 1,700,000 :4X,5X7tW= 1997 5.6 8,200,000 +kxk z"fP 1999 12.3 33,000,000 K)`R?CZ:s 0e]J2> >dF #1 <b\.d^=B Yu&\a?]\2 如果用Navigator浏览这个页面,就会注意到一个严重的错误:以上示例的边界一直延伸到了页面的底部。我没有修正这个问题 (如果你想知道,我告诉你这是因为这个示例是一个DIV。Navigator忽略了结束标记,所以它认为DIV一直延伸到页面的底部。解决办法是:添加多余的第二个DIV结束标记,但这也许会改变当前的语法解释...)。这是处理表格时,完全合法的HTML和CSS导致Navigator产生混乱的一个例子。 QJkiu8r 3)&rj 7 现在回到标题:刚才看到的例子里,表格的标题显示在它上方。可以使用CSS的caption-side属性,像以下所示来控制: 属性: caption-side Cx(HsJ!, n
Zx^ej\ 可使用的值: top, bottom, left, right /Z#AHfKF e*Nm[*@UW 初始值: top l{ fL~O sZqi)lo-s 应用于: table captions YWi Y[ ahM?;p 继承: 是 pAN$
c" /
dX,]OFm .fhfO @ 如果caption-side使用它的初始值top,标题就会放置在表格的上方。如果它是bottom,就放置在表格的下方。如果它是 left或right,标题就放在表格的左侧或右侧。 u |$GOSD \4*i;a.kU )In;nc 理论上虽然是如此的,实际上Explorer和Navigator忽略了这些属性。然而,HTML4.0定义了遭到反对的属性ALIGN (就是说,除非迫不得已,否则不要使用,它很糟糕,如果我们能阻止的话它不会出现在将来的HTML版本里)。这个属性接受和caption-side同样的值,并且在理论上(就是说,按照HTML4.0规范),相应的取值应该有相同的作用。实践中,Navigator完全忽略left和right值,而Explorer将它们视为与 text-align: left; 和 text-align: right; 等同。它们分别表示标题中的文字应该是左对齐还是右对齐,而不是标题应该放在表格的左侧还是右侧。 NH1|_2 KHaYb5(a[ 2@ZuH^qhk 既然这是我们介绍的第一个遭到反对的属性,我想说几句题外话。理论上,这个属性和CSS中的caption-side属性效果相同。然而实际上,也许你还没有习惯于使用CSS,并因而受到相应的限制。记住,在文档里必须对每一个CAPTION元素显式地 设置这个属性,不能像下面那样完成这一设定: /h&>tYVio ,Qe`(vU*s 63i&e/pv CAPTION { .N#grk)C ooYs0/,{ caption-side: bottom; gp{P _ hJJo+NNN } VD=F{|^ h&{>4{ 也不能像下面那样对特定类别的表格指定不同的标题位置: 4Gy3s|{ ue}lAW{q 9>5]y}.{ CAPTION { 'BEM:1) T=cb:PD{% caption-side: bottom; sE(mK<{pk YH!` uU(Lh } ~x+24/qT Zxv{qbF TABLE.special CAPTION { h"Q&E'0d SRk-3: caption-side: top; g\,HiKBXd Hn(L0#Oqy } Yr+ghl/ V 9DmQ 必须要到每个元素那里添加这个属性。并且,如果以后改变了主意,想修改表格标题的位置,就不得不到每个元素那里对它们进行修改。很可能漏掉几个的,因为我们是人而不是机器。如果支持CSS属性,那就仅仅需要对想改变的声明或选择器作修改。这是CSS比像ALIGN属性这样的HTML格式控制机制更有效的主要原因之一。更不用说的是:大量使用HTML格式属性的大多数HTML文档一般难以阅读(源代码)和编辑,同时“严格”的HTML通常格式规范而易于维护。 V6
,59 ?Wp{tB9N0 ~7=w,+ 如果没有其它方法可以获得期望的效果,我们就会被迫使用这些属性。但重要的是应该知道可以有更好的选择。这是因为,见多识广并且要求苛刻的Web作者们可能就是改变这一恶劣状况的最有力的支持者。 Ucok&)7- UbV} ! 好了,我们的政治宣传到此结束 ;-) 现在回到表格。 t)~v5vr 30/
( 提供表格信息的另一种方式是使用TABLE的SUMMARY属性。SUMMARY的值是对表格的描述,并且是被单纯地作为meta信息对待。当表格的信息没有通过它的内容清晰的表述出来时、需要支持搜索引擎时、在非可视化浏览器或其它类型的客户端上使用时,SUMMARY属性非常有用。像所有meta信息一样,忽略这个属性不好,因为这样就降低了文档信息的价值.但做得过分也不好,因为花费了应该用来提供实质内容的时间来指定meta信息,而它们并没有为其他人提供更多帮助。以下是一个带有 SUMMARY属性的表格,它的标题使用了ALIGN属性: ma26|N5 -n$fh::^ <TABLE SUMMARY=" xo_Es? 此表显示了从 1995 年起的每一年中,M.O.R.O.N.S. 代码中每 1000 行中的 %S4pkFR 平均错误数目和产品销售情况的对比。数据表明它们大致成比例,暗示二者 CpICb9w 之间可能存在联系。"> Ow]c,F}^ <TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR> E>?T<!r~j <TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR> )zVD!eG_9 <TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR> 8>K2[cPD <TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR> l*yJU3PW <TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR> r0\cgCn <CAPTION ALIGN="bottom">每 1000 行代码中的错误和产品销售情况</CAPTION> v
~%6!Tr </TABLE>
|
|
[楼 主]
|
Posted: 2006-04-04 09:50 |
| |