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

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

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

阿七

2006-04-04 09:50

表格说明什么 u1K\@jlw
z2/!m[U
表格的标题和摘要 cjULX+h
!PUp>(
在前面的例子里，表格前的段落给出了对表格内容的描述。这个描述并没有在语义上同表格连接起来，这种处理是不好的，因为我们在一开始就强调HTML描述的主要是文档的语义。 f"&Xr!b.h
放置这一信息的最佳位置是文档的标题，它通常很有用。HTML通过适当地命名TABLE元素中的CAPTION元素来实现表格标题的定义。以下是我们的例子，做了一个小小的改进： P"7ow-
<TABLE> ?TEK=mD#u
<CAPTION>每 1000 行代码中的错误和产品销售情况</CAPTION> ZI ?W5ISdg
<TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR> 2H?d+6Pt3
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR> TA}UY7v
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR> R_Dc)
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR> L&Qi@D0P
<TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR> nq`q[KV:
</TABLE> iRmQ5ezk
每 1000 行代码中的错误和产品销售情况 3/M.0}e
%6 =\5>
qJ[@:&:
每 1000 行代码中的错误和产品销售情况 Year Bugs Sales evl-V>
1995 2.3 500,000 't>r sp+#
1996 3.2 1,700,000 nJ3vi}`
1997 5.6 8,200,000 0|)19LR
1999 12.3 33,000,000 T<jfAE
DOL%'k?B
r2 5Z`X Z
xDrV5bg
`n-vjjG%#
如果用Navigator浏览这个页面，就会注意到一个严重的错误：以上示例的边界一直延伸到了页面的底部。我没有修正这个问题 (如果你想知道，我告诉你这是因为这个示例是一个DIV。Navigator忽略了结束标记，所以它认为DIV一直延伸到页面的底部。解决办法是：添加多余的第二个DIV结束标记，但这也许会改变当前的语法解释...)。这是处理表格时，完全合法的HTML和CSS导致Navigator产生混乱的一个例子。 F>Y9o-o2
oP$kRfXS!<
现在回到标题：刚才看到的例子里，表格的标题显示在它上方。可以使用CSS的caption-side属性，像以下所示来控制：属性： caption-side QdDtvJLf
+*EKR
可使用的值： top, bottom, left, right T+TF-] J
- 0~IY
初始值： top WL~`u
P79R~m`
应用于： table captions <lld*IH
<NQyP{p
继承：是 aV|k}H{wt
{^&k!H2
r>3^kL5UI
如果caption-side使用它的初始值top，标题就会放置在表格的上方。如果它是bottom，就放置在表格的下方。如果它是 left或right，标题就放在表格的左侧或右侧。 p5SX1PPQ
#Go(tS~o
<3#<I)#
理论上虽然是如此的，实际上Explorer和Navigator忽略了这些属性。然而，HTML4.0定义了遭到反对的属性ALIGN (就是说，除非迫不得已，否则不要使用，它很糟糕，如果我们能阻止的话它不会出现在将来的HTML版本里)。这个属性接受和caption-side同样的值，并且在理论上(就是说，按照HTML4.0规范)，相应的取值应该有相同的作用。实践中，Navigator完全忽略left和right值，而Explorer将它们视为与 text-align: left; 和 text-align: right; 等同。它们分别表示标题中的文字应该是左对齐还是右对齐，而不是标题应该放在表格的左侧还是右侧。 Iu6W=A
HU[oR4E
5^|"_Q#:
既然这是我们介绍的第一个遭到反对的属性，我想说几句题外话。理论上，这个属性和CSS中的caption-side属性效果相同。然而实际上，也许你还没有习惯于使用CSS，并因而受到相应的限制。记住，在文档里必须对每一个CAPTION元素显式地设置这个属性，不能像下面那样完成这一设定： <P pYl
V [4n'LcE
IgA.%}II}
CAPTION { )H+h;U
RO(iHR3cA
caption-side: bottom; z_)`g`($
BQU/QoDY
} ,Qo}J@e (
z.59]\;U>
也不能像下面那样对特定类别的表格指定不同的标题位置： AgI>
p)z-W(
n'3u]~7^
CAPTION { O" QHb|j
*zSxG[s
caption-side: bottom; \CtQ*[FmN
/b+;: z
} e7's)C>/'
|=,83,a
TABLE.special CAPTION { 4[(?L{
9C?cm:
caption-side: top; DOT=U _
,$PFI(Whk
} -+ko}He
;fkSrdj
必须要到每个元素那里添加这个属性。并且，如果以后改变了主意，想修改表格标题的位置，就不得不到每个元素那里对它们进行修改。很可能漏掉几个的，因为我们是人而不是机器。如果支持CSS属性，那就仅仅需要对想改变的声明或选择器作修改。这是CSS比像ALIGN属性这样的HTML格式控制机制更有效的主要原因之一。更不用说的是：大量使用HTML格式属性的大多数HTML文档一般难以阅读(源代码)和编辑，同时“严格”的HTML通常格式规范而易于维护。 F1\`l{B,\
BP:(IP!&
dWjx"7^
如果没有其它方法可以获得期望的效果，我们就会被迫使用这些属性。但重要的是应该知道可以有更好的选择。这是因为，见多识广并且要求苛刻的Web作者们可能就是改变这一恶劣状况的最有力的支持者。 >.n;mk
+>u>`|
好了，我们的政治宣传到此结束 ;-) 现在回到表格。 pIvfmIm
8T<@ @6`T
提供表格信息的另一种方式是使用TABLE的SUMMARY属性。SUMMARY的值是对表格的描述，并且是被单纯地作为meta信息对待。当表格的信息没有通过它的内容清晰的表述出来时、需要支持搜索引擎时、在非可视化浏览器或其它类型的客户端上使用时，SUMMARY属性非常有用。像所有meta信息一样，忽略这个属性不好，因为这样就降低了文档信息的价值.但做得过分也不好，因为花费了应该用来提供实质内容的时间来指定meta信息，而它们并没有为其他人提供更多帮助。以下是一个带有 SUMMARY属性的表格，它的标题使用了ALIGN属性： [Ek42%
;raz6DRO
<TABLE SUMMARY=" 7|K3WuLL
此表显示了从 1995 年起的每一年中，M.O.R.O.N.S. 代码中每 1000 行中的 zw ,-.fmM#
平均错误数目和产品销售情况的对比。数据表明它们大致成比例，暗示二者 [u7 vY@
之间可能存在联系。"> h)^dB,~
<TR><TD>Year</TD><TD>Bugs</TD><TD>Sales</TD></TR> RrKfTiK H
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR> k06xz#pL
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR> _/ct=
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR> \WiqN*ZF
<TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR> i,([YsRuou
<CAPTION ALIGN="bottom">每 1000 行代码中的错误和产品销售情况</CAPTION> 3;y_qwA
</TABLE>

阿七

2006-04-04 09:51

拆分表格 P)Z/JHB
iP2U]d~M
B"7$!Co
)\um"l*\c
iPA@<D%
表格列 F<h&3
]&&I|K_
2ZU@>W
像前面看到的那样，表格是以行来指定的。HTML4.0介绍了一种方法，也可以以列来对表格分组。这是通过使用COL和 COLGROUP元素实现的。使用这些元素有一些欺骗性。虽然这些元素指明了列，列当然包含单元格，可它们并不是单元格元素的上级元素。再详细解释一下：一个COL元素指定了表格中的一列，但它们并不把列中的单元格视为它们的下级元素，单元格是指明它所在行的TR元素的下一级。COL和COLGROUP元素用来指定列的有关信息，而客户端软件负责确定哪一个单元格属于哪一列。以下通过例子演示： NdM}xh
WA<H
<H4>Acme 程序员消费的软饮料</H4> aw%>YrJ
;X+G6F'
<TABLE> h{Oz*Bq
<COLGROUP> U,oD44
<COL span=3 ID="date"> F;cI0kP=>
</COLGROUP> 29R_n)ne
<COLGROUP span=5> ;6DR.2}?>
</COLGROUP> $ 1akI
<COLGROUP> RH<@c^ S
<COL ID="total"> Ytl:YzXCi
<COL ID="change"> F@>w&A~K
</COLGROUP> h-z%C6
<TR> E`oSi ez)
<TD>Day</TD><TD>Month</TD><TD>Year</TD> ~J8cS
<TD>Arnold</TD><TD>Bob</TD><TD>Carla</TD><TD>Daphne</TD><TD>Eric</TD> 5"76R Gw=
<TD>Total</TD><TD>Change</TD> vG'vgUo
</TR> )OARO
<TR> h1Ke$# $6
<TD>16</TD><TD>January</TD><TD>1999</TD> H @3$1h&YS
<TD>34</TD><TD>56</TD><TD>12</TD><TD>144</TD><TD>5</TD> d+gk q\
<TD>251</TD><TD>+27</TD> ,U|u-.~ZU
</TR> Pur"9jHa4
<TR> -L^0-g
<TD>17</TD><TD>January</TD><TD>1999</TD> X}65\6
<TD>26</TD><TD>48</TD><TD>8</TD><TD>98</TD><TD>2</TD> DI$mD{
<TD>182</TD><TD>-69</TD> Q1N,^ 71
</TR> ? RrC~7~
</TABLE> :Olj
这次我不再想试图演示页面中的例子了，因为虽然是完全合法的HTML，它也会使Navigator 4.0的几个小版本产生没有警告的并且是不可恢复的崩溃。我想无需再指出Navigator不支持表格列了。 1A,4Aw<
Y\\3g_YBF
同样，这样的错误几乎通常是同时使用复杂表格和CSS引起的。 dK=D=5r,
6Dr$*9
Explorer能很好的处理表格列。设置列元素的最初目的是要能对列中的所有单元格施加CSS声明，这是使用普通CSS选择器所做不到的 — 它只能通过给每一列的所有单元格指定相同的CLASS属性来做到这一点。 EkfGw/WDw
Ep v3/`I
即使没有显式地指定一个元素，每个表格也隐式地带有一个包含它的全部列的列组。可以用以下语法有选择地指定几个列组，每个列组包含一定数量的列： D_,_.C~O
x~3>1Wr#M
<COLGROUP span=3 ID="cols1-3"> "6[Ax{cM
</COLGROUP> skmDsZzw
<COLGROUP span=2> zm_hLk
</COLGROUP> gZ79u
<COLGROUP span=5> *y[~kWI
</COLGROUP> egIS rmL+X
以上指定了三个列组，第一个包含三列，第二个包含两列，而第三个包含五列。如果希望单独指定第二组中的两列，可以去掉span属性而在COLGROUP中插入COL元素。注意COL元素是空元素，并且不需要结束标记： FZ}C;yUPD
ZT3jxwe
<COLGROUP span=3 ID="cols1-3"> A )s"h=R
</COLGROUP> R &-W_v+
<COLGROUP> <R]Wy}2-
<COL ID="col4"> Y GcY2p<
<COL ID="col5"> JzS^9)&
</COLGROUP> ggYIq*4
<COLGROUP span=5> < 8W:ij.`
</COLGROUP> U:5*i
span属性也可以用在COL元素中，这样就可以在一个元素中指定好几个列，像以下例子： H 29 _ /
0,i+
<COLGROUP span=3 ID="cols1-3"> A`r$fCt1Vi
</COLGROUP> 9M-]~.O
<COLGROUP> wxr}*Z:ZMa
<COL ID="col4"> 5xn0U5U
<COL ID="col5"> 1>O0Iu
</COLGROUP> CBgFB-!qpe
<COLGROUP> "N[gMp6U
<COL span=4 ID="cols6-9"> B'#gs'fl
<COL ID="col10"> U:\ oGa84A
</COLGROUP> e715)_HD
这里的语法的确比较复杂，可能令人迷惑，所以详细解释一下：第一个COLGROUP元素覆盖前三列；第二个COLGROUP元素包含两个COL元素，覆盖第四和第五列；每个列元素自身指定一列；第三个COLGROUP元素包含一个span为4的COL元素和一个没有span属性的列元素(和span=1相同)；第一个COL元素指定了四个列，但此元素是表示这些列的每一个而不是它们全体。我们的例子很好地演示了这一点。下面考虑在以上示例上施加下列样式表： f~(^|~ZT
TY{?4
COLGROUP#cols1-3 { 5;KT -(q~
width: 30%; I{P$B-
} $AJy^`E^
COL#cols6-9 { looPO:bo^
width: 5%; 98%a)s)(a
} '&L
第一个声明表示：包含1、2、3列的列组宽度是它上一级元素的30%，如果把1、2、3列的宽度加起来，它是上级元素宽度的 30%。同时，每个列本身的宽度可以是任何值。第二个声明表明6、7、8、9列中的每一个都是上级元素的5%宽度。如果把它们的宽度相加，就是上级元素宽度的20%。