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


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

--> 本页主题: 表格,让Web看起来更美(3):拆分表格 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题
阿七




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

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

拆分表格 v w 6$v  
"cyRzQ6EH  
_dELVs7OL  
AR!v%Z49i  
 v%$l(  
表格列 A!,c@Kv 3  
N5{v;~Cm}V  
X-tw)  
像前面看到的那样,表格是以行来指定的。HTML4.0介绍了一种方法,也可以以列来对表格分组。这是通过使用COL和 COLGROUP元素实现的。使用这些元素有一些欺骗性。虽然这些元素指明了列,列当然包含单元格,可它们并不是单元格元素的上级元素。再详细解释一下:一个COL元素指定了表格中的一列,但它们并不把列中的单元格视为它们的下级元素,单元格是指明它所在行的TR元素的下一级。COL和COLGROUP元素用来指定列的有关信息,而客户端软件负责确定哪一个单元格属于哪一列。以下通过例子演示: Fv7]1EO.  
Qo :vAv  
<H4>Acme 程序员消费的软饮料</H4> ;vneeW4|  
ber&!9  
<TABLE> tA^+RO4  
<COLGROUP> o{>4PZ}=g  
<COL span=3 ID="date"> 5kGQf  
</COLGROUP> 8nn g^  
<COLGROUP span=5> !ui t  
</COLGROUP> tmOy"mq67  
<COLGROUP> GMg! 2CIU  
<COL ID="total"> ~r?tFE* +  
<COL ID="change"> !zt>& t  
</COLGROUP>  Cu5_OJ  
<TR> A1F$//a  
<TD>Day</TD><TD>Month</TD><TD>Year</TD> $ K+| bb  
<TD>Arnold</TD><TD>Bob</TD><TD>Carla</TD><TD>Daphne</TD><TD>Eric</TD> +_ /ys!  
<TD>Total</TD><TD>Change</TD> xe^M2$clb\  
</TR> g 0" xG}d  
<TR> qtdkK LT  
<TD>16</TD><TD>January</TD><TD>1999</TD> f,i2U|1pbj  
<TD>34</TD><TD>56</TD><TD>12</TD><TD>144</TD><TD>5</TD> y{&%]Fq <5  
<TD>251</TD><TD>+27</TD> A9N8Hav  
</TR> YhNrg?nS  
<TR> )5n0P Zi  
<TD>17</TD><TD>January</TD><TD>1999</TD> $W=)-X\>  
<TD>26</TD><TD>48</TD><TD>8</TD><TD>98</TD><TD>2</TD> %E/#h8oN{  
<TD>182</TD><TD>-69</TD> xOPQ~J|z  
</TR> y\j[\UZKO  
</TABLE> 50dN~(;p  
这次我不再想试图演示页面中的例子了,因为虽然是完全合法的HTML,它也会使Navigator 4.0的几个小版本产生没有警告的并且是不可恢复的崩溃。我想无需再指出Navigator不支持表格列了。 5L<A7^j  
s-5 #P,Lw  
同样,这样的错误几乎通常是同时使用复杂表格和CSS引起的。 iDX<`)  
ViyG%Sm  
Explorer能很好的处理表格列。设置列元素的最初目的是要能对列中的所有单元格施加CSS声明,这是使用普通CSS选择器所做不到的 — 它只能通过给每一列的所有单元格指定相同的CLASS属性来做到这一点。 %]Nm'"Y`U  
jbq x7x  
即使没有显式地指定一个元素,每个表格也隐式地带有一个包含它的全部列的列组。可以用以下语法有选择地指定几个列组,每个列组包含一定数量的列: :R=7dH~ r  
K|\0jd)N  
<COLGROUP span=3 ID="cols1-3"> -(e=S^36  
</COLGROUP> J zFR9DEt  
<COLGROUP span=2> o/ 51 RH  
</COLGROUP> \1&4wzT  
<COLGROUP span=5> @aN~97 H\  
</COLGROUP> N t]nwae>A  
以上指定了三个列组,第一个包含三列,第二个包含两列,而第三个包含五列。如果希望单独指定第二组中的两列,可以去掉span属性而在COLGROUP中插入COL元素。注意COL元素是空元素,并且不需要结束标记: J @~g>   
6iXV  
<COLGROUP span=3 ID="cols1-3"> Z ztp %2c  
</COLGROUP> -hfkF+=U'  
<COLGROUP> \2[tM/ +Bs  
<COL ID="col4"> ^i8biOSZu  
<COL ID="col5"> -K$ugDi  
</COLGROUP> g18zo~LZ  
<COLGROUP span=5> g~,iW oY  
</COLGROUP> pYm#iz  
span属性也可以用在COL元素中,这样就可以在一个元素中指定好几个列,像以下例子: ^K::g)  
^8bc<c:P  
<COLGROUP span=3 ID="cols1-3"> Vv5T(~   
</COLGROUP> \p}GW  
<COLGROUP> 6Y6t.j0vN.  
<COL ID="col4"> RTbV!I  
<COL ID="col5"> AqQ5L>:Gq  
</COLGROUP> \(=xc2  
<COLGROUP> of7p~{3H  
<COL span=4 ID="cols6-9"> {|OXiRm'  
<COL ID="col10"> )mI>2<Z!  
</COLGROUP> % jf|efxo  
这里的语法的确比较复杂,可能令人迷惑,所以详细解释一下:第一个COLGROUP元素覆盖前三列;第二个COLGROUP元素包含两个COL元素,覆盖第四和第五列;每个列元素自身指定一列;第三个COLGROUP元素包含一个span为4的COL元素和一个没有span属性的列元素(和span=1相同);第一个COL元素指定了四个列,但此元素是表示这些列的每一个而不是它们全体。我们的例子很好地演示了这一点。下面考虑在以上示例上施加下列样式表: 'byTM?Sp{  
D+ .vg?8  
COLGROUP#cols1-3 { 3LJ\y  
width: 30%; @c"s6h&  
} lb*;Z7fx<'  
COL#cols6-9 { `-cw[@uD  
width: 5%; 3}3b@:<  
} |9.J?YP8 (  
第一个声明表示:包含1、2、3列的列组宽度是它上一级元素的30%,如果把1、2、3列的宽度加起来,它是上级元素宽度的 30%。同时,每个列本身的宽度可以是任何值。第二个声明表明6、7、8、9列中的每一个都是上级元素的5%宽度。如果把它们的宽度相加,就是上级元素宽度的20%。

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

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



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