7、HTML语言剖析之表格标记
. j0 T }( _# b# L& H
( h$ w/ V( ~/ a5 I6 U+ O3 w- [* e9 C5 `: A2 N* v
表格标记
. A o) k7 r$ T1 b b; ]; U<TABLE> <TR> <TD>
: o t2 e; G5 {* D$ W$ E% w
<TH>
9 M4 P5 S4 J6 f
<CAPTION>
1 ~! b ?. N: O) V
■ <TABLE> <TR> <TD> ： ▲Top
2 G; }% b3 l, A- L! X
: k w3 P: D. F. ~0 k这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。
& l' l. u8 E3 O& X/ u* K7 J! [% I# s
<TABLE>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用，属容器标记的还有其他。
; z3 W. r& X5 e' d4 S1 n4 x0 M4 [
<TR>用以标示表格列（row）
$ |( y6 V" v+ \- z8 V$ y3 A2 {8 P<TD>用以标示储存格（cell）
8 C- z ]5 x2 H% r. G- r$ C8 ^9 L
<TABLE> 的参数设定（常用）：
2 B% q$ ^$ C0 b3 y m
例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">
4 m% `% z( @" e( _
' Q* J, F5 B S6 X; |
q# a: X! q+ f. D! x
width="400"
1 t6 j/ L( P6 G0 C% q6 F& {表格宽度，接受绝对值（如 80）及相对值（如 80%）。
; T M$ ~. g4 W$ t* K0 l
& @3 Y' H6 _+ p
border="1"
' e" \/ V' i9 N% r! N5 ~3 b6 z' J) p表格边框厚度，不同浏览器有不同的内定值，故请指明。
8 t4 Q& O/ q% }8 B3 y9 N" e8 D% K9 {/ M4 Q3 G
cellspacing="2"
0 B# i# ]7 `! a8 K' u1 @! R1 e
表格格线厚度，请看例子三，那是加厚到 5 的格线。
& q W$ q; O1 x$ F* _" c
4 `4 ^, S# ~, p9 ^' f
cellpadding="2"
# R/ n# V9 P3 U% V文字与格线的距离，请看例子四，那是加至 10 的 padding。
+ }5 |8 U6 j( I3 H& L) i& J+ S* l ~7 ^
align="CENTER"
4 V# l' b7 ]0 l2 {1 s: E) n
表格的摆放位置（水平），可选值为： left, right, center，请看例子五或六，那表格 是放于中间的，为怕一些浏览器不支援，故特加上居中标记<CENTER>，只是多 层保证而己，当然只用<CENTER>亦可。
/ g5 ~) J" ], D# _
5 ], C S3 K9 L3 {+ Q
valign="TOP".
, }1 p5 b9 D T( M( ~) M$ a表格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
: c$ W4 d) }# g+ s" u, N3 X5 f4 d ?% a7 `2 w& h, w
background="myweb.gif"
! \: Y, J4 A& l0 G: n表格 纸，与 bgcolor 不要同用。
: ~6 ]; T# b; r6 R& @
! `$ M+ O# B1 l5 ^' ^! q" Hbgcolor="#0000FF"
) ?* d& i1 X- k" A# o* h4 D! q表格底色，与 background 不要同用，请看例子六。
" U0 o! M/ ^- @
/ D0 \# X9 J+ U5 lbordercolor="#FF00FF"
8 Y9 z' S/ |) l( G" L( P* ~
表格边框颜色，NC 与 IE 有不同的效果，请看例子六。
; j6 W5 {' r( p: P, J: ]/ X/ R6 S* s9 g+ {9 O4 g3 t
bordercolorlight="#00FF00"
3 m; O$ C5 c* l) d F1 P
表格边框向光部分的颜色，请看例子二。『只适用于 IE』
, U9 O7 F3 K h, D$ Z2 C' e
9 f, n0 y6 R& T1 `/ ?& hbordercolordark="#00FFFF"
% W5 I5 w O* T. E表格边框背光部分的颜色，请看例子二，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』
1 E; q# p$ V% ~6 r( k7 v% |" s) S6 Y$ ~4 j4 p, ~7 e0 a
cols="2"
; y4 W" u& O* t: I, {
表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。
6 d" _8 i5 H' X) V1 y7 s
<TR> 的参数设定（常用）：
4 ?# O; y/ H' w4 k8 U2 F例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">
% h; g) m( ~* r4 v- g Q/ y, j+ ^; Z2 U) o3 r) A/ d% F7 e
align="RIGHT"
( ~1 a8 I* |9 p
该一列内字画等的摆放贴 位置（水平），可选值为： left, center, right。
2 l5 M( }8 s7 H" A
2 r4 M: d' f% O7 qvalign="MIDDLE"
/ |$ l: {) u/ L; h
该一列内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
/ ]* F6 Z @6 {% h! h6 z
1 o4 V, T) K) pbgcolor="#0000FF"
B: U# S, n! m5 y2 m
该一列底色，请看例子五。
9 @8 W8 f! j# w1 g5 o$ G
) \' c* J) e$ e, K6 Mbordercolor="#FF00FF"
- F- h; H0 h+ u8 g
该一列边框颜色，请看例子三。『只适用于 IE』
' }9 f3 \$ H* \, \1 L* Z: B! S7 Q, ~, g7 w: z M
bordercolorlight="#808080"
* n3 s8 ~4 ^& {$ v该一列边框向光部分的颜色，请看例子三。『只适用于 IE』
6 @5 q( d0 U9 k/ n; i; n( \) R4 F; a: Q0 ?: L7 M
bordercolordark="#FF0000"
6 I% I, m+ z+ V# a3 E( X0 b
该一列边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』
( N1 q% O1 m- ^5 T/ z3 @<TD> 的参数设定（常用）：
# M& w4 Y1 ^7 g/ B3 n例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">
& `% `, X; ^% p& f+ e
; \9 y3 j N# F7 [
width="48%"
1 U7 q# @; d9 F3 |% S1 K该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。
3 w0 ?/ C6 T& X& c* i& C# m: _- d% R& S+ z/ P! U U
height="400"
3 ] T6 m& C0 h# T
该一储存格高度。
2 ^1 p7 t6 L1 W6 t
# I- r& u' J- m! c9 t& L
colspan="5"
- l2 N# k# G9 a: J" \. B; e该一储存格向右打通的栏数。请看例子六
9 w" w7 r6 c6 T L) Q
}; e1 H! M' {5 ^! Frowspan="4"
+ ~$ A& q) G) q( @; I6 K) X该一储存格向下打通的列数。请看例子六
/ u/ B+ x [" m/ x+ ?& E/ b1 t% p4 {4 s3 o/ D
align="RIGHT"
6 Y. L- l( s( M
该一储存格内字画等的摆放贴 位置（水平），可选值为： left, center, right。
, T! }2 X) L4 @) m5 W' f
! g( e' `/ P5 Qvalign="BOTTOM"
5 C% _( r3 l/ P! V6 O该一储存格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
S9 `* e* n- f9 ?; l4 O4 v' w) P- {9 J; l: v8 [: i
bgcolor="#FF00FF"
% C# T. j* i9 G* s% S
该一储存格底色，请看例子四。
# N7 o& `. ]; ^
8 D( @/ X( U' z
bordercolor="#808080"
& |( \% e2 M w6 c该一储存格边框颜色，请看例子三。『只适用于 IE』
0 o3 _# z3 o( e) d6 w
0 N2 H- K7 {, K2 Dbordercolorlight="#FF0000"
- H/ T( ^) h0 q8 W- B3 X; \, }
该一储存格边框向光部分的颜色，请看例子三。『只适用于 IE』
8 d7 q3 T& B/ V' u7 B# U7 K' v
; @( ?/ z. m. `2 B$ w8 I
bordercolordark="#00FF00"
0 h6 e0 p6 V8 t2 @' O该一储存格边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』
) }7 P o6 ^8 Z% R* Z- [( o8 f$ H( u
background="myweb.gif"
/ u1 n- K6 Y4 p" o1 k" ~1 s
该一储存格 纸，与 bgcolor 任用其一。
1 c4 H2 u5 i. {" O1 }. |例子一： 原始码 <table width="60%" border="1">
' }7 A- j: @5 { z& L
<tr><td>只有一个储存格（cell）的表格</td></tr>
2 |' `4 [! N' X: |$ I</table>
2 _1 Y/ n# F5 ?9 Z0 L, r! J显示结果 只有一个储存格（cell）的表格
% O3 o) Z2 H& f
7 T7 b4 R! u7 }3 L) O0 x2 q% p' s0 v8 ]/ b7 [- N9 E
8 x7 t/ n9 X7 K7 H8 x
, Y! J9 D' M! h5 b6 w8 k% }例子二： 原始码 <table width="60%" border="0" bordercolorlight="#FF00FF" bordercolordark="#FF0000">
9 Q' @7 N$ [( G+ [; a {, {4 E
<tr><td>第一列第一栏</td><td>第一列第二栏</td></tr>
, \. w+ D# B3 }8 }</table>
( F" P' [8 n- u, L" V. \: n显示结果 第一列第一栏 第一列第二栏
8 ]. `, m2 [- |( _, ?7 B
# b$ A- M/ {1 ^2 N0 U3 u% a3 S
T2 r' L! y3 N* b" E6 {: p+ E3 b
) H9 O' W, Y, V ^8 l4 y: {
4 b) a4 A) {+ F# H. b6 p例子三： 原始码 <table width="60%" border="0" cellspacing="5">
3 J* }1 R' l/ R: L2 M( n <tr bordercolor="#0000FF">
& T" w2 g4 @+ D
<td>第一列第一栏</td>
& T3 t0 ^8 f' l% L( y1 Y$ w
<td>第一列第二栏</td>
$ [- E$ Z" ?; ~ </tr>
, r9 G E: f+ O3 K- S) K% H <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00">
! i& i# G0 f& C1 W1 B. Z7 q
<td>第二列第一栏</td>
0 @" f0 `7 r# Y/ L7 J+ M" {. n<td>第二列第二栏</td>
; d* T" S2 |8 ^ K/ L7 ^+ v) M: O3 e/ u: a </tr>
3 v8 m0 V- n) e" H
</table>
0 y2 F W' b/ S: ~显示结果 第一列第一栏 第一列第二栏
& t; Y# b: y' n7 b: q第二列第一栏 第二列第二栏
2 `4 l8 M$ O$ F' H- v
% [8 [5 {+ b) @
8 D+ i% g+ p% i8 |. j5 q, T" G+ @" f) e0 R$ S4 B
- _( e0 O, d( |例子四： 原始码 <table width="60%" border="0" cellpadding="10">
9 ~3 [: b% L( o9 Z" n9 o; Y2 d( s
<tr>
( T) N' B4 ~1 U7 `7 M; l
<td bgcolor="#FFCCE6">第一列第一栏</td>
* B% n4 ]; |% r( Y<td bgcolor="#FFFFC6">第一列第二栏</td>
( n6 M! P: p! m% y' |* H* j- c </tr>
/ t- x2 E" m; t0 B& U7 |
<tr>
& A7 Y7 R, o5 ]8 h# a
<td bgcolor="#FFD9FF">第二列第一栏</td>
+ B3 i7 _ H8 Y' T8 G( r1 q
<td bgcolor="#DAB4B4">第二列第二栏</td>
4 L( g) d1 z: c m9 o: z </tr>
- m+ s& O4 n) |5 [' }</table>
- n# X+ e' `. g& G( c显示结果 第一列第一栏 第一列第二栏
2 O, K2 i: b9 T/ u2 o$ d) a
第二列第一栏 第二列第二栏
- ^- e, S# C; E, J0 M6 s: b( f2 @0 t: x& c6 @( `7 y$ [
% Z6 \ i1 U, _7 R0 x4 d3 ]3 G2 p6 d# h2 ^. V' o" `# u
: I! z+ o0 R1 `& N$ {例子五： 原始码 <center>
: d1 B0 t5 ] x/ ^% u" l- |! M% z4 E
<table width="60%" cellspacing="0" cellpadding="2" align="CENTER">
6 m6 M% B7 J" V <tr>
( S' ?% `7 a d<td bgcolor="#FFD2E9">第一列第一栏</td>
& ~$ ^! r9 @9 I1 t! Y% i7 W<td bgcolor="#FFDAB5">第一列第二栏</td>
+ F( h! n8 M! J<td bgcolor="#FFFFB5">第一列第三栏</td>
, }: b0 K, P& d* |" \! h/ P# o </tr>
7 o/ ~$ ], ~% _ <tr bgcolor="#C0C0C0">
' t }+ _: O5 L; D7 }. [5 R<td>第二列第一栏</td>
+ b& u6 [9 k% p% @
<td>第二列第二栏</td>
* U' B; a( s( Q& x+ i% e% c<td>第二列第三栏</td>
% l' ^% P9 B, j% Q! i c </tr>
7 D0 I( @" ?) ]. K7 I/ ]
</table>
8 L/ j, k) }) g3 Y5 g5 a</center>
' ?9 c$ g$ b+ l+ c- T8 Z9 j显示结果
9 T2 {1 X0 N4 i' v
第一列第一栏 第一列第二栏 第一列第三栏
( h! W9 ~- X9 Q' g' p& J8 N6 `$ _第二列第一栏 第二列第二栏 第二列第三栏
( I" ~6 z3 ^. @( ]( M4 s& O
% j: J6 V: i5 _
# A9 `$ K% z# R: {& M ^% E6 ?4 k, R& E( Z- {
例子六 原始码 <center>
! b$ r6 J2 w R9 x1 a+ `4 P2 h<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
3 o7 k: S/ o1 w, q3 {
<tr>
4 m4 }6 h! Z" p4 w, ~<td>第一列第一栏</td>
9 b+ I p2 E2 o/ Z& N! Y
<td colspan="2">第一列 之 第二栏及第三栏</td>
( ^- r2 h/ r. c7 u& B0 h, H& ~
</tr>
" ^1 c) Z% e. u/ D* o <tr>
8 m! i, r! C6 f1 a# _/ [' M<td rowspan="2">第二列及第三列 之 第一栏</td>
- Z- @# C2 J, q9 a3 x! T
<td>第二列第二栏</td>
2 I) ^$ a7 d9 v5 A( U9 X4 {; J; X
<td>第二列第三栏</td>
5 x6 s% C( Q/ | </tr>
+ x' f8 `6 B: T3 R" l: l4 j <tr>
6 e; i' j* y+ @% }6 `- G<td>第三列第二栏</td>
0 O6 ^; Q2 J* O5 {$ l1 r7 n3 A
<td>第三列第三栏</td>
" J+ e) s# }$ L
</tr>
0 j& w7 s' W) V3 F/ r</table>
1 r4 ^- o, C. m1 ?* U
</center>
4 m, L4 }7 w' V7 Q @, f* y
显示结果
% R6 _4 x' o, j: N. M+ F c: Z
第一列第一栏 第一列 之 第二栏及第三栏
' p3 ]. v5 F5 R5 s" V
第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏
: O* {% ]2 B' [ u第三列第二栏 第三列第三栏
. \. p, k6 E. [, g9 K) ^
8 x. w7 x Y% q6 I+ w( D; g/ U
/ H+ Y- l, u$ f
/ _. [! X! g7 [/ q! W% j4 ]
■ <TH> ： ▲Top
' s0 d5 p7 @' t* U6 T
2 T) K0 R1 e0 e* e& ~: v$ o# k
<TH>与<TD>同样是标示一个储存格，唯一不同的是<TH>所标示的储存格中的文字是以粗 体出现，通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以，其参数 设定请参考<TD>。
8 R# F6 j7 M; _# H6 F& X- q
当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。
3 S6 W6 j3 {4 A0 e
例子： 原始码 <center>
; F8 I6 a" l. X: u: ~2 U<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
( Z! [6 V2 J& a% K# X <tr align="CENTER">
; n5 T. I1 [3 U9 F7 _; ?<th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th>
# g* o+ R; `: c </tr>
6 e/ a) M- P' ~ f2 j; h, X, Y9 p
<tr align="CENTER">
_8 L2 a6 K" l% I" K- l) I/ X<td>August</td><td>61%</td><td>39%</td>
+ ^0 O7 z0 R( H; C! x
</tr>
5 f6 C9 a6 \$ @' z
<tr align="CENTER">
1 p- |8 `2 f( `2 K' A<td>July</td><td>54%</td><td>46%</td>
; P7 {6 o( i, ^8 Y, B% K </tr>
& N: x, V& b4 W/ G2 ] <tr align="CENTER">
' _* |0 @7 T4 c) |5 z7 g7 Z
<td>June</td><td>52%</td><td>48%</td>
& i/ A6 Q( `" i7 N( }& e </tr>
- x: x" k( D& F0 h( E& W
</table>
4 ^ k. P" s6 z/ b% q2 X( }( P5 _$ M</center>
* ?- L, Q0 A0 _0 m* t
显示结果
r, w$ ~3 F- ]- Q( O) X, CMonth % of IE visitor % of NC visitor
! q5 T0 @. z8 J5 U* M, BAugust 61% 39%
* N% x) b# }) P! Q" L
July 54% 46%
* X6 A: E( m+ R* R* E
June 52% 48%
# A" ^# @5 O* y" b: x9 D; Z
$ j2 ]- t) @4 f" O- p4 T: N- Q
* a8 S& r/ C, l: B
. N7 Q, `2 a5 z S( h2 X$ d■ <CAPTION> ： ▲Top
- X1 _* L6 E* `3 V
8 M$ T2 X& ?# D3 f<CAPTION> 的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。 当然亦可置于下方，通常用以存放该表格的标题。
0 C. }9 ~- X4 f8 v5 Y0 C1 d* F
<CAPTION> 的参数设定（常用）：
3 S; F M) E( l$ J
例如：<caption align="TOP" valign="TOP"></caption>
+ W. U+ S9 T0 ]
! K+ w8 I( \/ ?. L, ealign="TOP"
8 Y, @' L# d. ~" E该表格标题列相对于表格的摆放贴 位置（水平），可选值为： left, center, right, top, middle, bottom，若 align="bottom" 的话标题列便会出现对表格的下方，不管你 的原始码中把 <caption> 放在 <table> 中的头部或尾部。
, v) i! m* a! a! {7 v1 [8 r' M3 S$ s6 d- E) @5 b6 \0 V
valign="TOP"
/ B- M+ L7 n# ]7 k' s0 ~
该表格标题列相对于表格的摆放位置（上下），可选值为： top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的，虽然功能重复了，但如果你要标题列 置于下方及向右或向左贴 ，那末两个参数便可一 用了。当只 一个参数时， 请首选 align，因为 valign 是由 HTML 3.0 才开始的参数。
8 w* J$ Z2 o) k例子： 原始码 <center>
2 U" F; o3 H: E# {, h4 F: ~4 k* ~) u<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
- K* J7 X z# W' ?. ]4 x<caption>网页速成 八月份访客浏览器使用分析</caption>
9 d4 x1 O+ v/ a7 U
<tr align="CENTER">
0 q% z0 U; ~+ |+ Y<th>Month</th>
4 Q# r- H7 Y) K
<th>% of IE visitor</th>
; Q7 x `; O, t
<th>% of NC visitor</th>
5 s: q' [& O/ h! L' l/ ^0 o
</tr>
& n( V# `- B" Z) x9 q) P- f! {
<tr align="CENTER">
% p7 f, L# f1 C% A
<td>August</td>
, A" l0 C# e' K
<td>61%</td>
, e; o" [% D& y0 ?<td>39%</td>
$ X" n3 _# ]6 ? </tr>
# b8 J! Y# }6 {- e C1 j( C</table>
& o1 a* C' C* s/ B! t</center>
; L# M( k0 }: `0 k显示结果
9 q) ]% E7 r5 f; [' P+ l; a
网页速成 八月份访客浏览器使用分析 Month % of IE visitor % of NC visitor
, s4 k3 F1 ]1 C/ JAugust 61% 39%
