» 您尚未 登录   注册 | 社区服务 | 帮助 | 社区 | 无图版


常州五颜六色网络技术有限公司 -> 网站建设 -> 表格,让Web看起来更美(2):表格说明什么
 XML   RSS 2.0   WAP 

--> 本页主题: 表格,让Web看起来更美(2):表格说明什么 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子

表格,让Web看起来更美(2):表格说明什么

表格说明什么 F2dHH^  
o]` *M|  
表格的标题和摘要 *:YiimOY"  
EXwo,?I  
在前面的例子里,表格前的段落给出了对表格内容的描述。这个描述并没有在语义上同表格连接起来,这种处理是不好的,因为我们在一开始就强调HTML描述的主要是文档的语义。 D},>mfzF  
放置这一信息的最佳位置是文档的标题,它通常很有用。HTML通过适当地命名TABLE元素中的CAPTION元素来实现表格标题的定义。以下是我们的例子,做了一个小小的改进: ?(y*nD[a  
<TABLE> }~j lj  
<CAPTION>每 1000 行代码中的错误和产品销售情况</CAPTION> z8~NZ;A  
<TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR> .hP D$o  
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR> 2d(e:r h]  
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR> eV"h0_ox  
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR> /W30~y  
<TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR> Ic:(Gi- %  
</TABLE> }DE g-j,F  
每 1000 行代码中的错误和产品销售情况 Gg3,:A_ w  
gX}8#O.K$  
yZ(zdM\/sL  
每 1000 行代码中的错误和产品销售情况 Year Bugs Sales [0[i5'K:  
1995 2.3 500,000 kr5">"7  
1996 3.2 1,700,000 He/8=$c%  
1997 5.6 8,200,000 7qLpZ/  
1999 12.3 33,000,000 %2/EaaR  
6V:U (g  
2K6qY)/_  
<X^@*79m  
q&- `,8#  
如果用Navigator浏览这个页面,就会注意到一个严重的错误:以上示例的边界一直延伸到了页面的底部。我没有修正这个问题 (如果你想知道,我告诉你这是因为这个示例是一个DIV。Navigator忽略了结束标记,所以它认为DIV一直延伸到页面的底部。解决办法是:添加多余的第二个DIV结束标记,但这也许会改变当前的语法解释...)。这是处理表格时,完全合法的HTML和CSS导致Navigator产生混乱的一个例子。 omu|yCK  
=/+-<px  
现在回到标题:刚才看到的例子里,表格的标题显示在它上方。可以使用CSS的caption-side属性,像以下所示来控制: 属性: caption-side gHEu/8E  
sPQQ"|wU  
可使用的值: top, bottom, left, right xJvmhN/c  
|A9F\A->4  
初始值: top y`5 9A  
D~iz+{Q4  
应用于: table captions $q{!5-e  
x7w4[QYw  
继承: 是 Jbg/0|1  
(k)v!O-  
z`}qkbvi  
如果caption-side使用它的初始值top,标题就会放置在表格的上方。如果它是bottom,就放置在表格的下方。如果它是 left或right,标题就放在表格的左侧或右侧。 S-b/S5  
^4hO  
"5!oi]@>(  
理论上虽然是如此的,实际上Explorer和Navigator忽略了这些属性。然而,HTML4.0定义了遭到反对的属性ALIGN (就是说,除非迫不得已,否则不要使用,它很糟糕,如果我们能阻止的话它不会出现在将来的HTML版本里)。这个属性接受和caption-side同样的值,并且在理论上(就是说,按照HTML4.0规范),相应的取值应该有相同的作用。实践中,Navigator完全忽略left和right值,而Explorer将它们视为与 text-align: left; 和 text-align: right; 等同。它们分别表示标题中的文字应该是左对齐还是右对齐,而不是标题应该放在表格的左侧还是右侧。 mzKiO_g}  
9(7-{,c  
aEWWP]  
既然这是我们介绍的第一个遭到反对的属性,我想说几句题外话。理论上,这个属性和CSS中的caption-side属性效果相同。然而实际上,也许你还没有习惯于使用CSS,并因而受到相应的限制。记住,在文档里必须对每一个CAPTION元素显式地 设置这个属性,不能像下面那样完成这一设定: 6=/F$|  
|4z IfAO  
su( 1<S}  
CAPTION { q5+4S5R*^  
EU;9 *W<  
caption-side: bottom; 1{. |+S Z!  
u@M,qo`  
} )[IC?U:5I  
] vsz, 0  
也不能像下面那样对特定类别的表格指定不同的标题位置: (OL4Ex']  
$6 9&O  
XFpjYwn  
CAPTION { c_pr  
zxl@(h d  
caption-side: bottom; ,PW'#U:  
P>D)7 V9Hh  
} Sy_G,+$\  
o[w:1q7  
TABLE.special CAPTION { CwzZ8.o$i  
ie95rZp  
caption-side: top; P|E| $)m  
FVbb2Y?R  
} tSUEZ62EY  
G~[x 3L'  
必须要到每个元素那里添加这个属性。并且,如果以后改变了主意,想修改表格标题的位置,就不得不到每个元素那里对它们进行修改。很可能漏掉几个的,因为我们是人而不是机器。如果支持CSS属性,那就仅仅需要对想改变的声明或选择器作修改。这是CSS比像ALIGN属性这样的HTML格式控制机制更有效的主要原因之一。更不用说的是:大量使用HTML格式属性的大多数HTML文档一般难以阅读(源代码)和编辑,同时“严格”的HTML通常格式规范而易于维护。 MKk\ u9  
xm~`7~nFR  
\?-<4Bc@  
如果没有其它方法可以获得期望的效果,我们就会被迫使用这些属性。但重要的是应该知道可以有更好的选择。这是因为,见多识广并且要求苛刻的Web作者们可能就是改变这一恶劣状况的最有力的支持者。 yx[/|nZDC4  
Mb}QD~=M  
好了,我们的政治宣传到此结束 ;-) 现在回到表格。 8/#A!Ww]  
I$G['` XX/  
提供表格信息的另一种方式是使用TABLE的SUMMARY属性。SUMMARY的值是对表格的描述,并且是被单纯地作为meta信息对待。当表格的信息没有通过它的内容清晰的表述出来时、需要支持搜索引擎时、在非可视化浏览器或其它类型的客户端上使用时,SUMMARY属性非常有用。像所有meta信息一样,忽略这个属性不好,因为这样就降低了文档信息的价值.但做得过分也不好,因为花费了应该用来提供实质内容的时间来指定meta信息,而它们并没有为其他人提供更多帮助。以下是一个带有 SUMMARY属性的表格,它的标题使用了ALIGN属性: ^uc=f2=>,  
`/+>a8  
<TABLE SUMMARY=" Ic<2QknmP  
此表显示了从 1995 年起的每一年中,M.O.R.O.N.S. 代码中每 1000 行中的 ebhXak[w  
平均错误数目和产品销售情况的对比。数据表明它们大致成比例,暗示二者 Hvi49c]]  
之间可能存在联系。"> CK@@HSm}l  
<TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR> ;igIZ$&  
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR> ^{`exCwM x  
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR> 'H>^2C iM  
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR> $a]`nLUa  
<TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR> ADzhNf S  
<CAPTION ALIGN="bottom">每 1000 行代码中的错误和产品销售情况</CAPTION> ]%H`_8<gc  
</TABLE>

[楼 主] | Posted: 2006-04-04 09:50 顶端
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子

表格,让Web看起来更美(3):拆分表格

拆分表格 $!t4r  
Dlvz )  
zO6oT1I  
-iZ`Y?  
cvL;3jRo  
表格列 WpvhTX  
S f# R0SA  
"w<#^d_6  
像前面看到的那样,表格是以行来指定的。HTML4.0介绍了一种方法,也可以以列来对表格分组。这是通过使用COL和 COLGROUP元素实现的。使用这些元素有一些欺骗性。虽然这些元素指明了列,列当然包含单元格,可它们并不是单元格元素的上级元素。再详细解释一下:一个COL元素指定了表格中的一列,但它们并不把列中的单元格视为它们的下级元素,单元格是指明它所在行的TR元素的下一级。COL和COLGROUP元素用来指定列的有关信息,而客户端软件负责确定哪一个单元格属于哪一列。以下通过例子演示: ef4 i:.  
1 'Dai`  
<H4>Acme 程序员消费的软饮料</H4> OjA,]Gv6  
`R^gU]Z,  
<TABLE> VIf.q)_k  
<COLGROUP> }Q+|W=2t  
<COL span=3 ID="date"> WcGS9`m/  
</COLGROUP> GM<9p_ B  
<COLGROUP span=5> Y'X%Aw;`  
</COLGROUP> )4;`^]F  
<COLGROUP> ,V}WM%Km  
<COL ID="total"> "m>81-0  
<COL ID="change"> BZ^}J!Q'*  
</COLGROUP> )+Pus~w  
<TR> \~wMfP8  
<TD>Day</TD><TD>Month</TD><TD>Year</TD> 9lE_nc  
<TD>Arnold</TD><TD>Bob</TD><TD>Carla</TD><TD>Daphne</TD><TD>Eric</TD> Y_P!B^z3  
<TD>Total</TD><TD>Change</TD> ,/unhfs1q  
</TR> ],].zlN  
<TR> -UT}/:a  
<TD>16</TD><TD>January</TD><TD>1999</TD> ;dhQN }7  
<TD>34</TD><TD>56</TD><TD>12</TD><TD>144</TD><TD>5</TD> , R|BG  
<TD>251</TD><TD>+27</TD> ,2ar7 5Va  
</TR> C7AUsYM  
<TR> e96k{C`j0  
<TD>17</TD><TD>January</TD><TD>1999</TD> akQ7K  
<TD>26</TD><TD>48</TD><TD>8</TD><TD>98</TD><TD>2</TD> BDVtSs<7  
<TD>182</TD><TD>-69</TD> v &+R^iLE  
</TR> Y<8 vw d  
</TABLE> vvOV2n .WD  
这次我不再想试图演示页面中的例子了,因为虽然是完全合法的HTML,它也会使Navigator 4.0的几个小版本产生没有警告的并且是不可恢复的崩溃。我想无需再指出Navigator不支持表格列了。 zx7{U8*`<  
cM7[_*Ot<m  
同样,这样的错误几乎通常是同时使用复杂表格和CSS引起的。 [0 e_*  
Af{"pzY  
Explorer能很好的处理表格列。设置列元素的最初目的是要能对列中的所有单元格施加CSS声明,这是使用普通CSS选择器所做不到的 — 它只能通过给每一列的所有单元格指定相同的CLASS属性来做到这一点。 vr ^qWn  
Du){rVY^d  
即使没有显式地指定一个元素,每个表格也隐式地带有一个包含它的全部列的列组。可以用以下语法有选择地指定几个列组,每个列组包含一定数量的列: `P ,d$H "  
WuW^GC{7  
<COLGROUP span=3 ID="cols1-3"> B7vpsSL  
</COLGROUP> #3d(M  
<COLGROUP span=2> " 2Dngw  
</COLGROUP> POR\e|hRT]  
<COLGROUP span=5> !{41!O,K#  
</COLGROUP> }o{(S%%  
以上指定了三个列组,第一个包含三列,第二个包含两列,而第三个包含五列。如果希望单独指定第二组中的两列,可以去掉span属性而在COLGROUP中插入COL元素。注意COL元素是空元素,并且不需要结束标记: %u5]>]M+  
dC4'{ n|7  
<COLGROUP span=3 ID="cols1-3"> >yh2Lri  
</COLGROUP> \D&KC,i5f  
<COLGROUP> 7v_8_K  
<COL ID="col4"> G vlS%  
<COL ID="col5"> 76` .Y  
</COLGROUP> ei5~&  
<COLGROUP span=5> ^/=KK:n~  
</COLGROUP> aFIw=c(nP  
span属性也可以用在COL元素中,这样就可以在一个元素中指定好几个列,像以下例子: &]-DqK7  
s(roJbJ_;  
<COLGROUP span=3 ID="cols1-3"> 9Lfv^V0  
</COLGROUP> '$QB$2~V  
<COLGROUP> @AuO`I@p=  
<COL ID="col4"> <_KIK  
<COL ID="col5"> VOh4#%Vj  
</COLGROUP> f'3$9x  
<COLGROUP> gbagi+8s`%  
<COL span=4 ID="cols6-9"> jm r"D>  
<COL ID="col10"> m9}P9 ?  
</COLGROUP> *G 9V'9  
这里的语法的确比较复杂,可能令人迷惑,所以详细解释一下:第一个COLGROUP元素覆盖前三列;第二个COLGROUP元素包含两个COL元素,覆盖第四和第五列;每个列元素自身指定一列;第三个COLGROUP元素包含一个span为4的COL元素和一个没有span属性的列元素(和span=1相同);第一个COL元素指定了四个列,但此元素是表示这些列的每一个而不是它们全体。我们的例子很好地演示了这一点。下面考虑在以上示例上施加下列样式表: $]2vvr  
R_S.tT!  
COLGROUP#cols1-3 { lCHO;7YHX  
width: 30%; -+-_I*(  
} '(jG[ry&T  
COL#cols6-9 { QnX(V[  
width: 5%; ',5 ky{  
} ]L}dzA?:  
第一个声明表示:包含1、2、3列的列组宽度是它上一级元素的30%,如果把1、2、3列的宽度加起来,它是上级元素宽度的 30%。同时,每个列本身的宽度可以是任何值。第二个声明表明6、7、8、9列中的每一个都是上级元素的5%宽度。如果把它们的宽度相加,就是上级元素宽度的20%。

[1 楼] | Posted: 2006-04-04 09:51 顶端

常州五颜六色网络技术有限公司 -> 网站建设



Copyright © 2005-2009 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Total 0.012551(s) query 5, Gzip enabled
会员言论不代表本站立场 本站法律顾问:北京汇泽律师事务所 韩律师
QQ:点击这里给我发消息 /点击这里给我发消息 /点击这里给我发消息
51La