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

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

登录 -> 注册 -> 回复主题 -> 发表主题

阿七

2006-04-04 09:50

表格说明什么 :jGgX>GG
c)zwyBz
表格的标题和摘要 y-o54e$4Cq
FyA0"
在前面的例子里，表格前的段落给出了对表格内容的描述。这个描述并没有在语义上同表格连接起来，这种处理是不好的，因为我们在一开始就强调HTML描述的主要是文档的语义。 G/&Wc2k
放置这一信息的最佳位置是文档的标题，它通常很有用。HTML通过适当地命名TABLE元素中的CAPTION元素来实现表格标题的定义。以下是我们的例子，做了一个小小的改进： {r1} ACw{
<TABLE> Ia-nA|LBxI
<CAPTION>每 1000 行代码中的错误和产品销售情况</CAPTION> >{k0N@_
<TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR> \(ju0qFqH
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR> qfyuq]
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR> `D0Hu!;
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR> [u7i)fn5?
<TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR> "sUmke-#
</TABLE> Og(|bs!6
每 1000 行代码中的错误和产品销售情况 jU=n\o=?
$Zf]1?|xa
f9La79v
每 1000 行代码中的错误和产品销售情况 Year Bugs Sales h3P^W(=&
1995 2.3 500,000 8o!LgT5
1996 3.2 1,700,000 FuFA/R=x/
1997 5.6 8,200,000 01vKx)f
1999 12.3 33,000,000 6_O3/
F'^?s= QX
wU/BRz8I
M]A!jWtE
}Z8DVTpX}
如果用Navigator浏览这个页面，就会注意到一个严重的错误：以上示例的边界一直延伸到了页面的底部。我没有修正这个问题 (如果你想知道，我告诉你这是因为这个示例是一个DIV。Navigator忽略了结束标记，所以它认为DIV一直延伸到页面的底部。解决办法是：添加多余的第二个DIV结束标记，但这也许会改变当前的语法解释...)。这是处理表格时，完全合法的HTML和CSS导致Navigator产生混乱的一个例子。 ZUaqv
0 LIRi%N5*
现在回到标题：刚才看到的例子里，表格的标题显示在它上方。可以使用CSS的caption-side属性，像以下所示来控制：属性： caption-side zAO|{m<A2
zfm#yDf
可使用的值： top, bottom, left, right T#-U\C~o
&HJ'//bv
初始值： top ,")/R/d
(GbZt{.
应用于： table captions vs(x; zpJ
cUc:^wvLS
继承：是 .?*TU~S
ZMmf!cKY:'
&T\,kq>)
如果caption-side使用它的初始值top，标题就会放置在表格的上方。如果它是bottom，就放置在表格的下方。如果它是 left或right，标题就放在表格的左侧或右侧。 !r`/vQ#
X"O^4MnvI
{V5eHn9/Q'
理论上虽然是如此的，实际上Explorer和Navigator忽略了这些属性。然而，HTML4.0定义了遭到反对的属性ALIGN (就是说，除非迫不得已，否则不要使用，它很糟糕，如果我们能阻止的话它不会出现在将来的HTML版本里)。这个属性接受和caption-side同样的值，并且在理论上(就是说，按照HTML4.0规范)，相应的取值应该有相同的作用。实践中，Navigator完全忽略left和right值，而Explorer将它们视为与 text-align: left; 和 text-align: right; 等同。它们分别表示标题中的文字应该是左对齐还是右对齐，而不是标题应该放在表格的左侧还是右侧。 AMc`qh
C^nTLw;K
s.XLC43Rs
既然这是我们介绍的第一个遭到反对的属性，我想说几句题外话。理论上，这个属性和CSS中的caption-side属性效果相同。然而实际上，也许你还没有习惯于使用CSS，并因而受到相应的限制。记住，在文档里必须对每一个CAPTION元素显式地设置这个属性，不能像下面那样完成这一设定： 9O\N K:2
9\KMU@Ne
\#q|.d$u
CAPTION { j2Uu8.8d
sL\W6ej
caption-side: bottom; dIOiP\^
Kzrt%DA
} Rg~F[j$N
A7=k9|
也不能像下面那样对特定类别的表格指定不同的标题位置： ##|]el%Y
o6A1;e
a474[?
CAPTION { )jHH-=JM
&AhkP=Yw
caption-side: bottom; E% d3}@
L1YiXJ,T,
} g<PglRr"
s|d"2w6t
TABLE.special CAPTION { g0>Q* x
;cp,d~mrf
caption-side: top; =9L1Z \f
u @ #fOu
} O7lFg;9c`
K| '`w.
必须要到每个元素那里添加这个属性。并且，如果以后改变了主意，想修改表格标题的位置，就不得不到每个元素那里对它们进行修改。很可能漏掉几个的，因为我们是人而不是机器。如果支持CSS属性，那就仅仅需要对想改变的声明或选择器作修改。这是CSS比像ALIGN属性这样的HTML格式控制机制更有效的主要原因之一。更不用说的是：大量使用HTML格式属性的大多数HTML文档一般难以阅读(源代码)和编辑，同时“严格”的HTML通常格式规范而易于维护。 yNOoAnGT W
95l)w
$ uqB.f$
如果没有其它方法可以获得期望的效果，我们就会被迫使用这些属性。但重要的是应该知道可以有更好的选择。这是因为，见多识广并且要求苛刻的Web作者们可能就是改变这一恶劣状况的最有力的支持者。 67T=ku
qUKS o9
好了，我们的政治宣传到此结束 ;-) 现在回到表格。 -)Of\4k x
/nB|Fo_&Q
提供表格信息的另一种方式是使用TABLE的SUMMARY属性。SUMMARY的值是对表格的描述，并且是被单纯地作为meta信息对待。当表格的信息没有通过它的内容清晰的表述出来时、需要支持搜索引擎时、在非可视化浏览器或其它类型的客户端上使用时，SUMMARY属性非常有用。像所有meta信息一样，忽略这个属性不好，因为这样就降低了文档信息的价值.但做得过分也不好，因为花费了应该用来提供实质内容的时间来指定meta信息，而它们并没有为其他人提供更多帮助。以下是一个带有 SUMMARY属性的表格，它的标题使用了ALIGN属性： *:V+whBY
|VQmB/a
<TABLE SUMMARY=" hD9b2KZv
此表显示了从 1995 年起的每一年中，M.O.R.O.N.S. 代码中每 1000 行中的 J/B`c(
平均错误数目和产品销售情况的对比。数据表明它们大致成比例，暗示二者 Aqo90(jffx
之间可能存在联系。"> njckPpyb@
<TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR> aDda&RM
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR> _(F8}s
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR> ]8CgHT[^7
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR> 20cEE>
<TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR> 2B"&WKk
<CAPTION ALIGN="bottom">每 1000 行代码中的错误和产品销售情况</CAPTION> RAj>{/E#W
</TABLE>

阿七

2006-04-04 09:51

拆分表格 BhhFij4
:l&Yq!5
J";4+wA7
/xj`'8
["[v
表格列 Whe-()pG{
.y<u+)
p<3<Zk 7~0
像前面看到的那样，表格是以行来指定的。HTML4.0介绍了一种方法，也可以以列来对表格分组。这是通过使用COL和 COLGROUP元素实现的。使用这些元素有一些欺骗性。虽然这些元素指明了列，列当然包含单元格，可它们并不是单元格元素的上级元素。再详细解释一下：一个COL元素指定了表格中的一列，但它们并不把列中的单元格视为它们的下级元素，单元格是指明它所在行的TR元素的下一级。COL和COLGROUP元素用来指定列的有关信息，而客户端软件负责确定哪一个单元格属于哪一列。以下通过例子演示： )D ~ 5
aYn5AP'PH
<H4>Acme 程序员消费的软饮料</H4> Zz"8
-iKoQkHt
<TABLE> SP/'4m
<COLGROUP> <cU%yA710
<COL span=3 ID="date"> B<i(Y1n[
</COLGROUP> qw1W}+~g
<COLGROUP span=5> \&b 9
</COLGROUP> RLZfXXMn
<COLGROUP> [>t;P,
<COL ID="total"> ea]qX6)UZ
<COL ID="change"> ka6E s~
</COLGROUP> `mA;1S
<TR> p]uj ip
<TD>Day</TD><TD>Month</TD><TD>Year</TD> K Ip^| k7>
<TD>Arnold</TD><TD>Bob</TD><TD>Carla</TD><TD>Daphne</TD><TD>Eric</TD> ,J,Rup">h
<TD>Total</TD><TD>Change</TD> =fJU+N+<
</TR> C+g}+
<TR> *V7mM?
<TD>16</TD><TD>January</TD><TD>1999</TD> T*%rhnTv0
<TD>34</TD><TD>56</TD><TD>12</TD><TD>144</TD><TD>5</TD> un4fnoc
<TD>251</TD><TD>+27</TD> $v #
</TR> j1A%LS;c_
<TR> 6<T:B[a-
<TD>17</TD><TD>January</TD><TD>1999</TD> J]#rh5um
<TD>26</TD><TD>48</TD><TD>8</TD><TD>98</TD><TD>2</TD> FzcXSKHV%
<TD>182</TD><TD>-69</TD> ]A5Y/dd
</TR> L9N}lH
</TABLE> 2Z%n "z68
这次我不再想试图演示页面中的例子了，因为虽然是完全合法的HTML，它也会使Navigator 4.0的几个小版本产生没有警告的并且是不可恢复的崩溃。我想无需再指出Navigator不支持表格列了。 DxwR&S{
V?1[R
同样，这样的错误几乎通常是同时使用复杂表格和CSS引起的。 #:+F
yQMwt|C4
Explorer能很好的处理表格列。设置列元素的最初目的是要能对列中的所有单元格施加CSS声明，这是使用普通CSS选择器所做不到的 — 它只能通过给每一列的所有单元格指定相同的CLASS属性来做到这一点。 'tY (&&
Z|Oq7wzEH
即使没有显式地指定一个元素，每个表格也隐式地带有一个包含它的全部列的列组。可以用以下语法有选择地指定几个列组，每个列组包含一定数量的列： rhcax%Cd
<g%A2lI
<COLGROUP span=3 ID="cols1-3"> .|^Gde
</COLGROUP> z=) m6\
<COLGROUP span=2> C\;l)h_{
</COLGROUP> rR :ZTfJs"
<COLGROUP span=5> %4),P(4 N
</COLGROUP> NXFi*
以上指定了三个列组，第一个包含三列，第二个包含两列，而第三个包含五列。如果希望单独指定第二组中的两列，可以去掉span属性而在COLGROUP中插入COL元素。注意COL元素是空元素，并且不需要结束标记： '/NpmNY:L
z?.9)T9_
<COLGROUP span=3 ID="cols1-3"> Vy I\Jmr
</COLGROUP> ((+XzV>
<COLGROUP> &>C+5`bg
<COL ID="col4"> mjWU0.
<COL ID="col5"> P*BRebL:
</COLGROUP> 7)V"E-6h
<COLGROUP span=5> o+&Om~W
</COLGROUP> j :B/ FL
span属性也可以用在COL元素中，这样就可以在一个元素中指定好几个列，像以下例子： On}1&!{1]
D$K'Qk
<COLGROUP span=3 ID="cols1-3"> '"E!av>
</COLGROUP> CTW\Dt5
<COLGROUP> tRJ5IX##L
<COL ID="col4"> eZAMV/]jH
<COL ID="col5"> pQBn8H| Y
</COLGROUP> KCyV |,+n
<COLGROUP> i,r:R g~
<COL span=4 ID="cols6-9"> uAeo&|&
<COL ID="col10"> F-wAQ:
</COLGROUP> V^n6~O
这里的语法的确比较复杂，可能令人迷惑，所以详细解释一下：第一个COLGROUP元素覆盖前三列；第二个COLGROUP元素包含两个COL元素，覆盖第四和第五列；每个列元素自身指定一列；第三个COLGROUP元素包含一个span为4的COL元素和一个没有span属性的列元素(和span=1相同)；第一个COL元素指定了四个列，但此元素是表示这些列的每一个而不是它们全体。我们的例子很好地演示了这一点。下面考虑在以上示例上施加下列样式表： a%B&F|u
@6yc^DAA
COLGROUP#cols1-3 { hg" i;I
width: 30%; XLt/$Caf
} 63Zu5b"O/
COL#cols6-9 { GNMOHqg4
width: 5%; |-}.Y(y
} H%@f ^
第一个声明表示：包含1、2、3列的列组宽度是它上一级元素的30%，如果把1、2、3列的宽度加起来，它是上级元素宽度的 30%。同时，每个列本身的宽度可以是任何值。第二个声明表明6、7、8、9列中的每一个都是上级元素的5%宽度。如果把它们的宽度相加，就是上级元素宽度的20%。