|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14189
- 金币
- 2385
- 威望
- 1647
- 贡献
- 1333
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。# P2 w+ S1 @' f$ v, [& y
- {' Q4 f: W' @# t; J6 i
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。) b- S, C' \9 G& ]" w, ~
0 L- ^' s( `9 ]8 m
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
, w. T: e- i6 H: M4 C- O, m+ Y/ H1 |( e' P$ h7 N
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉6 `6 _0 i: {* y
( @: Q! r" U& V# ]/ u, |+ P 〈tr〉6 y7 Y! z) k, g- J0 U1 r/ z9 q p
& c" N9 F$ j! K; q/ B6 l1 s
〈td〉
3 T% D/ R: W$ [/ f ]3 t5 {3 Q
9 j0 N) I& M* c1 Y- W3 {- l 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
) L4 J+ Q Q2 P. Y3 p: P$ U @* j, d% C+ t1 c, w( d
〈tr〉
' o6 x. \1 g, O: l/ @: h
6 j0 X+ W) `; D Q% Z0 \ 〈td〉
" b8 E9 x* d* `. t' s/ Q
, ~4 G$ v/ A' K3 k2 t: `. } B 〈/td〉 F( Z' }0 G u% } }
]% R- t( K- {
〈/tr〉+ b) ~, ~" u9 l; y/ H$ F# ^, S. O4 c8 \
) M6 |+ p3 u; L: y0 V( E# p 〈/table〉; D! F* n3 C( P! h# H! T s' m: B
, _5 |+ a! q6 S) \9 F2 c8 U* S
〈/td〉
: j) m# t s8 T" ~$ B) f# r8 k
〈/tr〉3 W! c0 r, x( g: \$ C% k; [
2 Q6 K% Q0 s4 X: k* j# R 〈/table〉5 O D ]3 i4 r' U
+ a/ n. |+ \) u% D6 K4 ~3 G
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
/ ^ e& _4 P; G6 h0 H& ^ x2 S: |. x9 U1 k% i" k( o( P# ~ A0 M4 H
源代码如下：
) o/ X( j. P* w4 ~4 S( j @8 ~
- ^+ q$ ^( ] V( p6 }, Q 〈table border="0" bgcolor=white〉; l: }, b. C1 i& W9 `
8 x# o* z8 a* J+ M: f9 `0 A7 q
〈tr〉& z: a6 F& M& h/ ?
8 `* |- w; h8 H. h& t* I( c
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉& t" g B8 V) s, `
2 _7 [* _% J7 g. R' T+ Z7 K
〈/td〉' a5 I8 J9 x3 R! u
2 d, {& u0 ?8 G( C! f/ e 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉4 @/ p w# M `/ E( o
6 e" k5 @7 V" U8 K q" x L
〈/td〉1 v7 t. {( K0 `. l2 Z
& w; j% q8 I1 B; o. ~ 〈/tr〉
" f0 I7 a% @; H: f' |" y+ g6 \4 P
: D- s* H* S: N- J& D: M- i 〈tr〉
6 K* k* {0 g I ?0 Z
9 i. R+ _" \8 C& r) P& S; u! w 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉' S; G( K5 h* F4 M. D6 R/ g( r
' |; @8 z) Q6 y' ^0 U
〈/td〉
4 y3 A0 |0 v+ f9 Q9 v7 A, ^
" p, O7 {( s0 j* Z r& e& {9 n 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉% ?% s/ Q) {4 D8 f, h
% Z# L7 Y2 Q8 h8 T- `8 @, J5 v3 _8 T- a" K6 `" U8 Q
〈/td〉
, i8 K1 N6 O- s0 P. Z- ] |6 K
) |/ B1 [ r" V/ x' Z 〈/tr〉
. W9 I; A2 i* f7 e! Y
0 ~* R, I6 w0 _+ w7 E! R1 O$ U" Y 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|