我爱电脑技术论坛's Archiver

麦迪 发表于 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〉
0ub4Dp: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(pDB 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"XHX v 〈th width="33%"〉性别〈/th〉vo U6J;APD"v
〈th width="34%"〉年龄〈/th〉
Hk!}nC)C}-| 〈/tr〉
"Z'R4C'] ? 〈tr〉|jGdL
〈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\ cC*^
〈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+e t9J#R6QO9p k 〈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]+sk%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
显示效果: [@6n P}"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"〉
BB$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"〉DyyW6w&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!Y B a-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"Pmt2O    〈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"〉S0ax K0i
〈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 显示效果:
OAwJj!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&eHIE U 在〈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}lMj/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 h Y;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〉
!w v0w0R DO 〈td width="20%"〉 〈/td〉;j"\-[u9g'~V
〈td〉 〈/td〉 K'Qv[gK
〈/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(FL0q
〈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〉OtP5r6|^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|xFKw&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]

页: [1]

Powered by 我爱电脑技术论坛 Archiver 6.1.0  © 2001-2007 本SEO插件由网络人站长论坛出品