|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。" p1 Y: R: }" ~1 N
x) f% H, _; `! j$ t$ P
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。" E, N, n- ]5 K0 Y# s
* J O# l) P2 |4 `3 {% b 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：5 I0 A( t1 S& W
U3 T& K: u5 A8 [3 a/ K" z J6 I 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉+ c1 Z# h. p! O. m" }# M; M
) x: I( j: Y7 d. k3 I
〈tr〉- U( D# U9 Z2 D' m) H2 d
0 K5 V' |* N7 ^5 Z* n" J2 U
〈td〉
+ \2 o& o$ \/ \) V( e
& l, [1 v& h2 A0 h& \# ]4 b 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉# V- H* |9 E3 {. g
7 b2 I& \; A+ x8 k2 q1 z
〈tr〉
0 z% Q% m x+ S: \9 V' [5 c; h% F9 n0 a2 M+ \
〈td〉! E1 j! K! y5 G) n
! b1 \1 o* o7 v2 I8 [
〈/td〉
0 s7 d# j% U2 r4 N0 q4 |; }8 h/ S: n' j* C$ }7 u0 r' s2 l; E
〈/tr〉, L1 l. U- `, V( N1 ^ {. V: G
" Z% B$ t) v n) H, F' O- x& p
〈/table〉
7 S2 |' l2 f( S( ^; H& ?2 N) Q9 n! `9 F0 B% v
〈/td〉
) J' K' q8 Q% ~1 q" P% p4 o" Q6 R4 b/ b7 j
〈/tr〉
R6 x! I0 Y R5 Z; }$ F
+ E4 U! |3 X6 q$ g: J 〈/table〉
$ C* d: ~6 r, E% r# W+ N e( U3 m1 E/ [1 U/ m
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
7 f. D( t) s. U$ K
0 g2 ^% ~* x3 v% x2 J 源代码如下：
) R& A! b8 Z/ S" r* l/ g
) N9 k# ^4 V& C- y7 \6 V3 } 〈table border="0" bgcolor=white〉+ d. r$ V7 `) j
4 o; L) f2 q H+ |% S& J
〈tr〉$ X% W7 K- R4 g5 _ f: n. e$ ~
r2 ]3 e9 R, G+ o( G1 C' T
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
$ X( ~4 g3 u& d- j% U
) x3 q; F* K% k4 `9 C& f 〈/td〉9 ^" I. Y3 n9 T" A8 p h
( \! `! D- j& h) f# h 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
k4 v! z) R! t$ s
5 e1 R3 J0 n' } 〈/td〉
8 `, N4 C: z# R& ~/ t! Q" B2 {, w7 h! s$ Z5 ]. w: i
〈/tr〉) h- j, c+ U$ w ?/ D. m5 J
" p0 G- N# U8 e% R. s; n5 w
〈tr〉
* R/ {* G0 t6 r3 _* n! h% K3 J) T, ]* \& L6 u
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
/ X; T3 R% a# T8 x2 N- ]# [
- S' ~+ _5 h6 x; f; L 〈/td〉 y* m2 b# H8 S2 O+ n: `
9 H4 _# ?# ]% T3 N2 D
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉( q/ s" _- R( x+ G& S3 J
2 ?8 N! S& l E( `& a6 X) O4 U& `5 H* k- H8 Q; p" d) H
〈/td〉
; J+ J- `8 Q. c6 ^! }7 ]" p$ s2 n# i: o& u
〈/tr〉7 D% V* f- C+ h$ N( m( K
& t" {, R$ h0 \$ \* q" l
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|