我爱电脑技术论坛 » 网站建设 » 从HTML语言到网上家园 第五章

麦迪 发表于 2008-1-26 00:58

从HTML语言到网上家园 第五章

[align=center]从HTML语言到网上家园 第五章 网页中的表格[/align][b]　　5.1表格的基本形式[/b]
Hi n4d9?E?z2S 　　表格基本形式：]rK@x
　　〈table〉
B,A:`&x_U 　　 〈tr〉
L3afv$jA%U2Tf g 　　　〈th〉……〈/th〉
5O#['QfDK%q} 　　 〈/tr〉 X:b1Tex/f
　　 〈tr〉w/W#Y8^jk(K
　　　〈td〉……〈/td〉
xr?mJEP 　　 〈/tr〉
e4r4QF:F-E? 　　〈/table〉
0ub4D
p:nX-Q}/m7R 　　〈table〉……〈/table〉用于定义表格。〈tr〉定义表中的行，一个表中有多少行，就有多少个〈tr〉。〈th〉用于定义表头，〈td〉定义表元，表元中包含了表格的具体数据。U6{OmtH,l
[b]　　5.2表格属性[/b]U-uE9mWb$lt3m
[b]　　5.2.1表格边框设置[/b],srZ(p
DBj
　　和表格边框设置有关的〈table〉元素属性有：
5u}l,gZ)ALe 　　BORDER=n 定义表格边框宽度。BORDER＝0 为无边框表格。8e+k;` P @
　　BORDERCOLOR=color 设置表格边框颜色，当BORDER＝0时此值无效。
8`'R!X|$@:w 　　BORDERCOLORDARK=color 设置表格亮边框的颜色。EljRj*n;u d){
　　BORDERCOLORLTGHT=color 设置表格暗边框的颜色。 m0gnm'M:]x,d:g
　　BORDERCOLORDARK 和BORDERCOLORLTGHT一起用来绘制三维边框，两者是相对立的，当BORDER＝0时此两者无效。
o`Re#b0rl+C [table=450,#999999][tr][td]例： Ut)\s[ l
（1）无边框表格html代码：
3Y{*|{tq 〈table border="0" cellpadding="2" width=200〉BQ)t;B(e@&I)HPZ
〈tr〉
'R#[6{S EN 〈th width="33%"〉姓名〈/th〉
7Nt(xg:y0z"XHXv 〈th width="33%"〉性别〈/th〉vo U6J;APD"v
〈th width="34%"〉年龄〈/th〉
Hk!}nC)C}-| 〈/tr〉
"Z'R4C']? 〈tr〉|j
GdL
〈td width="33%" align="center"〉李旦〈/td〉l|_o!M9v
〈td width="33%" align="center"〉男〈/td〉
OX$aK(d~7X 〈td width="34%" align="center"〉14〈/td〉Lx1p"Uc _\
〈/tr〉
-dl ep!T:V 〈/table〉-_
n G,t;_ K;h5o+pg
显示效果： [table=200][tr][td=1,1,33%]姓名[/td][td=1,1,33%]性别[/td][td=1,1,34%]年龄[/td][/tr][tr][td=1,1,33%]李旦[/td][td=1,1,33%]男[/td][td=1,1,34%]14[/td][/tr][/table]%?~
G}v$JLH

-x;A
~}2k
GS'^&daD （2）有边框表格html代码：
cy'[%c A%T 〈table align=center border="5" cellpadding="3" width=40% bordercolordark="#88DD88" bordercolorlight="#008000" bordercolor="#000080" cellspacing="3"〉
)Y9@ jvj 〈tr〉
}5^T#D8R$I 〈th width="33%"〉〈font color="#000000"〉姓名〈/font〉〈/th〉
w&K:T0w8w.a#yI/s$U 〈th width="33%"〉〈font color="#000000"〉性别〈/font〉〈/th〉L%BR\c
C*^
〈th width="34%"〉〈font color="#000000"〉年龄〈/font〉〈/th〉8@QB)w2PK,E
〈/tr〉
0Q0^T(s:q 〈tr〉
}"cx/GC\JDC({;n 〈td width="33%" align="center"〉〈font color="#000000"〉李旦〈/font〉〈/td〉S-f%Co8b
〈td width="33%" align="center"〉〈font color="#000000"〉男〈/font〉〈/td〉
c+et9J#R6QO9pk 〈td width="34%" align="center"〉〈font color="#000000"〉14〈/font〉〈/td〉'p@ y0| w"GBE@~5z
〈/tr〉
.VV2s)h]0Md 〈/table〉
P&Z"Ug|t 显示效果： [table=40%][tr][td=1,1,33%][color=#000000]姓名[/color][/td][td=1,1,33%][color=#000000]性别[/color][/td][td=1,1,34%][color=#000000]年龄[/color][/td][/tr][tr][td=1,1,33%][color=#000000]李旦[/color][/td][td=1,1,33%][color=#000000]男[/color][/td][td=1,1,34%][color=#000000]14[/color][/td][/tr][/table]+s
k%s(F-p4V

f\7q%["EN/F 在该表格中，外围宽边部分是表格边框，深绿色部分是亮边框，浅绿色部分是暗边框。[/td][/tr][/table]
7xz~'}:~ 　　 以上是设置整个表格的边框和颜色，还可以为每个单元格设置独立的边框颜色。BORDERCOLOR，BORDERCOLORDARK和BORDERCOLORLTGHT属性对〈tr〉，〈td〉和〈th〉同样可用，用法与在〈table〉中相同。$R{Y%T{5p+i1L:X
[table=450,#999999][tr][td]例1：设置表中行元素〈tr〉的边框。
U"q,`4@3GD4n7Q&@(~ 〈tr bordercolorlight="#008000" bordercolordark="#88DD88"〉
.u Lh*v8x|/n8[ 显示效果： [table=200][tr][td] [/td][td] [/td][/tr][tr][td] [/td][td] [/td][/tr][/table][/td][/tr][/table],S.m'`'pf
[table=450,#999999][tr][td]例2：设置表头元素〈th〉的边框。ZcK;BoLQPeZ
〈th width="50%" bordercolor="#008000" bordercolorlight="#008000" bordercolordark="#88DD88" border=3〉　〈/th〉5lo Q+a/Xs.iL)h7n
〈th width="50%" bordercolor="#008000" border=3〉　〈/th〉
G*ZKqa'?v 显示效果： [table=200][tr][td=1,1,50%]　[/td][td=1,1,50%]　[/td][/tr][tr][td] [/td][td] [/td][/tr][/table][/td][/tr][/table]
\x$HfIv [table=450,#999999][tr][td]例3：设置表中单元格〈td〉的边框。
*LY.w*z{ 〈td width="50%" bordercolor="#008000" border=3〉　〈/td〉,\M%g4oKR4EjF
〈td width="50%" bordercolorlight="#008000" bordercolordark="#88DD88" border=3〉　〈/td〉-C,o6i4^&C
显示效果： [@6nP}"G
[table=200][tr][td] [/td][td] [/td][/tr][tr][td=1,1,50%]　[/td][td=1,1,50%]　[/td][/tr][/table][/td][/tr][/table]
x.WT0v\7@$jk [b]5.2.2表格背景颜色和背景图片[/b]　　在HTML中，可用于设置背景对象背景颜色和背景图片的属性分别是BGCOLOR和BACKGROUND，可以为整个表格设置背景，也设置单元格的背景。Y VS$x3x/o
[table=450,#999999][tr][td]*oNbYr rn `7d
例1：有背景图片的表格
:\!O0ry8P o J-d 〈table border="3" cellpadding="2" width="200" height="50" background="../images/bg.jpg" bgcolor="#88DD88"〉
B
B$V&EM 显示效果：
+Kkk,p5{9AU [table=200,#88dd88][tr][td] [/td][td] [/td][/tr][tr][td] [/td][td] [/td][/tr][/table][/td][/tr][/table]5\sw{-x$t"tKovS
[table=450,#999999][tr][td]例2：单元格的背景设置
/ut'iU2|w,Iwz,F 〈table border="3" cellpadding="2" width="30%" height="50"〉Ac2u}ed:a
〈tr bordercolorlight="#008000" bordercolordark="#88DD88"〉D
yyW6w&C-Z6r
〈th width="100%" background="../images/bg.jpg"〉　〈/th〉
V(jie W;cxW/ex-G t 〈/tr〉
rk(N#f\d1l\ 〈tr〉B5@LcPk0i1jp%}.T
〈td width="100%" bgcolor="#88DD88"〉　〈/td〉
8o&~ | mm#Os 〈/tr〉
_k gR$i;f!w.uc 〈/table〉O/m9Z*`%K(?c4_
显示效果： [table=200][tr][td]　[/td][/tr][tr][td]　[/td][/tr][/table]
!PF W!YBa-d$Z;b-Y [/td][/tr][/table][b]5.2.3表格布局[/b]　　 表格在网页中的布局通过ALIGN属性来定义：ALIGN=LEFT | CENTER | RIGHT。ALIGN属性仅定义表格水平对齐方式。
3Yrl*_%E$W%~Fm [table=450,#999999][tr][td]例：居中对齐的表格
zHb}-M| O 〈table align=center border="1" width="50%" bordercolor="#008000"〉)v5?+X"cWzY-?
[table=50%][tr][td] [/td][td] [/td][/tr][tr][td] [/td][td] [/td][/tr][/table][/td][/tr][/table]　　 此外，我们还可以指定表格及单元格的高度和宽度，格式如下：
Qz"P
mt2O 　　 〈table width=n height=n〉 指定表格的宽度和高度，n可以是整数或百分数。当n取整数值时，定义了表格的绝对尺寸，单位是像素；n取百分数，表示表格尺寸与当前页面尺寸的比例。m9EQ8{s4s
　　 〈tr width=n height=n〉 定义表格中行的尺寸，n的取值方式与〈table〉中相同。n取百分数是相对于表格的尺寸而言的。!v8ww3C$o+h
　　 〈td width=n height=n〉 规定单元格尺寸，n的取值方式与〈tr〉同。
5Iur,TQAp'C 　　 〈table cellspacing= n〉 定义单元格之间的间距。/jD+w,\S
　　 接下来让我们看一个表格布局的实例。0S*w!y D[q&j~"B
[table=450,#999999][tr][td]例：一个居右显示、定义了尺寸的表格的html代码："}0t[ NK O\
〈table align=right border="1" width="40%" bordercolor="#008000" height="30"〉
ssI0E` M7N 〈tr height="15"〉S0axK0i
〈td width="25%"〉　〈/td〉.X CVx'm
〈td〉　〈/td〉+e,C5W"m,f.~5|8g0J
〈/tr〉^.F6HL{._3F
〈tr〉{1r&@}W7\Dd
〈td width="25%"〉　〈/td〉Z:?5M,G*L[ G2k
〈td〉 〈/td〉
8B{ c"F J1b#Yh @a 〈/tr〉
y?&Rj"}9R!p 〈/table〉
0^"s4a W9F 显示效果：
OAw
Jj!Mw [table=40%][tr][td=1,1,25%] [/td][td] [/td][/tr][tr][td=1,1,25%] [/td][td] [/td][/tr][/table][/td][/tr][/table]　[b]5.3特殊形式的表格6zDY Duw

/JTnl.WB];X [/b]　　 通常我们看到的表格形式多种多样的，有的行跨越多列，有的列跨越多个行，还有的表中有表，这一节中我们就看看这些特殊形式的表格是怎么实现的。
KK0` cxT3I)d:K*w %q/x,m6|F+? |
[b]　　5.3.1有通栏的表格8E f{a%U
[/b]
PRw4Z&eHIEU 在〈td〉标记中，colspan属性规定当前表元要跨越table中多少列，rowspan属性用于定义当前表元要跨越table中多少行，利用这两个属性就可以制作出有通栏的表格。 ^/TT'b mm
[table=450,#999999][tr][td]例1：有横向通栏的表格。[ rq0Kv;]
〈table align=center border="1" width="40%" bordercolor="#008000"〉 　 　 　
9K K4t#w1a 〈tr〉D1B/k+z0rr
〈td width="100%" colspan="3"〉　〈/td〉&[Z Bs]8\E*|
〈/tr〉
y5Y!UdGD|` 〈tr〉
4Ok|!OD%tU0Z` 〈td width="34%"〉　〈/td〉
7f1q@2v1}l
Mj/N&o.iV 〈td width="33%"〉　〈/td〉`\+Z;i q,XkV
〈td width="33%"〉　〈/td〉5ty(G X~w ~5k
〈/tr〉8Y/m)} Rt |9J~
〈/table〉 [table=40%]　 [tr][td=3,1]　[/td][/tr][tr][td=1,1,34%]　[/td][td=1,1,33%]　[/td][td=1,1,33%]　[/td][/tr][/table]
[{mRBm:o+H$J}4T [/td][/tr][/table]
q'[8g(Hml [table=450,#999999][tr][td]例2：有纵向通栏的表格。
{ P(Sy!awA;z 〈table align=center border="1" width="30%" bordercolor="#008000"〉
#j|3J*N@,`d!M`uv 〈tr〉〈td width="20%" rowspan="3"〉〈/td〉$xa ^G iwN
〈td〉〈/td〉
"^fJ FN7M@%? Z 〈/tr〉[3TY!`Z h
|&Fw8N
〈tr〉
}['hnqP 〈td〉〈/td〉 [W @qT
〈/tr〉
r$K(Y)\$hX0{z&[,@ 〈tr〉
&Sm0evwB7\ 〈td〉〈/td〉e~D7E7@
Zp;rq
〈/tr〉
Q*O+B&z8Ms7@ 〈/table〉 [table=30%][tr][td=1,3,20%]　[/td][td]　[/td][/tr][tr][td]　[/td][/tr][tr][td]　[/td][/tr][/table]
5t0LFZ.|ai7__ [/td][/tr][/table][b]5.3.2表格嵌套[/b]　　 表格嵌套就是把一个表格作为另外一个表格某格单元格的内容，也就是在表格中建立表格。M+h8`J MD2RFL0u0r-_
[table=450,#999999][tr][td]例3：表格嵌套。!lf_4oM/E"a
〈table border="1" width="200" bordercolor="#000000" cellspacing="0" cellpadding="2"〉
3p&_s}*vz(sV 〈tr〉
Dw?~%U#L 〈td width="20%" rowspan="2"〉　〈/td〉
%`VnvgmC 〈td〉　〈/td〉
5YhY;aE%tf&Z 〈/tr〉RN%R#Cqw`4A^
〈tr〉5uP&UedJ_r7i
〈td〉
8k3pv)A.UB3Sz 〈table border="1" width="100%" bordercolor="#000099" cellspacing="0"〉S4IZO a*Y|@(Lnz
〈tr〉
!wv0w0R DO 〈td width="20%"〉　〈/td〉;j"\-[u9g'~V
〈td〉　〈/td〉 K'Qv[g
K
〈/tr〉
r`#F^ lu x{}3?4Y 〈tr〉
q4gC5hu q4T:E 〈td width="20%"〉　〈/td〉he z7g~!S*cg
〈td〉　〈/td〉
X2`#Az/B+S&SE;r 〈/tr〉
;E"NS/I }(T 〈/table〉%Z0b k7H:Z
〈/td〉EQxO(`a2X&l:B
〈/tr〉
Ae A0CJ;U^B8Z/~ 〈/table〉 [table=200][tr][td=1,2,20%] [/td][td] [/td][/tr][tr][td][table=98%][tr][td=1,1,20%] [/td][td] [/td][/tr][tr][td=1,1,20%] [/td][td] [/td][/tr][/table][/td][/tr][/table]
w!d3d)s-kF-N [/td][/tr][/table][b]5.4表格中的文本[/b]　　表格单元格中的文本（也可以是图像或者表格）对齐方式由align和valign这两个属性的值决定，基本格式为：
$RCy/Y_bL@7} 　　〈table align=# valign=# 〉 其中，+S"ZES.`#ad
　　ALIGN=LEFT | CENTER | RIGHT 定义了单元格内容的水平对齐方式。
o*@R9X(ins'C 　　VALGIN=BASELINE | BOTTOM | MIDDLE | TOP 确定一个元素在单元格中的垂直对齐方式。BASELINE表示纵向对齐到字体基线上；BOTTOM表示与单元格底边对齐；MIDDLE表示上下居中；TOP则是与单元格顶边对齐。)VI HK,CST"C
　　还可以用cellpadding属性调整表中文本与单元格边框的距离。PZ G&iyW"m
　　〈table cellpadding=n 〉 定义对整个表格有效。n以像素为单位。8T@ r(R!uT/A
　　〈td cellpadding=n 〉 定义仅对当前单元格有效。
`E@p!~j?4O [table=450,#999999][tr][td]例：建立一个两行三列的表格，表中文本水平、垂直居中显示，单元格边距为5个像素。L)S!T0m(F
L0q
〈table border="1" width="200" cellpadding="5" cellspacing="0"〉
}P`3O^V }9R0V 〈tr〉m)K)F4Ah[;F
〈th width="33%" align="center" valign="middle" 〉姓名〈/th〉Ot
P5r6|^Z
〈th width="33%" align="center" valign="middle" 〉性别〈/th〉1dM xK"K:C3?8Q
〈th width="34%" align="center" valign="middle" 〉年龄〈/th〉
UY6i5Q/_G)[3| i&xN 〈/tr〉
N)s0I*oR2k$s%k 〈tr〉Wj&Xr p a Z:O6G,r
〈td width="33%" align="center" valign="middle" 〉李旦〈/td〉
A PYC,az oU0] 〈td width="33%" align="center" valign="middle" 〉男〈/td〉t\1MLU}q'XVn
〈td width="34%" align="center" valign="middle" 〉14〈/td〉(j\O0Q)GV,jy,Nv
〈/tr〉
dG6|
xF
Kw&o|4rD 〈/table〉 [table=200][tr][td=1,1,33%]姓名[/td][td=1,1,33%]性别[/td][td=1,1,34%]年龄[/td][/tr][tr][td=1,1,33%]李旦[/td][td=1,1,33%]男[/td][td=1,1,34%]14[/td][/tr][/table]
&@Q GH.Tv$U [/td][/tr][/table]

查看完整版本: 从HTML语言到网上家园 第五章