|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。2 H1 r1 N/ D' ] O
0 u* b& G' N, n& e
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。' q( f4 }5 Q6 b8 ]# F2 {
* B. Q$ Q+ R# N; z1 b$ a
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
9 k0 p* {( F% U6 J3 R
3 g4 S; f& |9 t: X- i, h( N9 S 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
% H) C. V, v% h% Q6 ^( R& n$ N% ^ \- d- v( c( n: }" b, [
〈tr〉+ _+ Q8 ^' s5 Y; p. x7 \
; j" s+ x" `& a4 C
〈td〉
& F) n5 m% }4 o& @& f
, h" w+ v! [, O7 Q/ l9 x 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
! i5 q1 M* M6 l8 u* R5 x ^+ W
# U- L- M, Y/ z. {) [! a 〈tr〉
/ z; o2 v; ?+ {! G9 u: ?4 s9 Y5 q% l [$ Y$ b- x: r
〈td〉
; k2 O2 B) j0 d3 ^3 v8 W: ~8 r
/ p' r: d2 | |+ Q/ [8 u 〈/td〉
% K* a& | x( L* c3 S' U7 E6 _% i! M' v6 r
〈/tr〉
: G- V0 v: S! [- t' x o' L9 s5 \! C8 H# o, s0 l6 u
〈/table〉, L" G" {. n) G
) G# j: x) j0 @, u' c9 Z: y 〈/td〉
' t* N. m& i8 c3 c" M/ a" j, _' `( d- `* k" {4 F
〈/tr〉! Q: @# v6 j3 U0 U
c* h' t$ N. H( E/ m& k 〈/table〉+ ^4 S( A# a& e) I: h8 {
- k8 f. I! _; |2 H$ \+ p
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
9 _1 t, w( p: m: q4 w% j0 L/ t9 n I4 R4 N: O
源代码如下：2 u8 v( o- {5 N4 P+ v* \2 h( x
, q' X, ?- y0 O+ E- d2 y8 N 〈table border="0" bgcolor=white〉3 q6 ^0 r8 l" D$ s8 V3 m
3 R* @6 F3 q) ^, _6 {7 L; C
〈tr〉3 S, {* E6 c: G4 v. S+ v7 z
+ c/ s5 D5 ]( z6 b2 a4 U# Q8 I/ p 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
. b7 e( z: c" Q9 R! U
7 w' Y) R. ^/ c/ A7 L& ? 〈/td〉9 \4 i/ o/ o- \* e! K# }$ ]1 S- [3 x
0 U1 z* w0 _4 f3 p
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉( K9 f' V: ^! U2 Q+ w
9 l7 _0 B- I- l- R- u0 g. M3 W2 b, t7 |' \ 〈/td〉# K( z- k9 m, ~* x
& Y0 A9 P/ O7 u' D1 H: v! ^) k8 |8 C 〈/tr〉2 G& N% O, }5 g4 x/ G
: t; y* ~7 Q! L7 D" x
〈tr〉 t, k! s* `. B. Q: K5 M
) x6 j7 E* x s4 V' |- q7 n: b 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
3 q* Z5 }- i! R* f8 d0 J* u
$ _4 i6 K, U! Q$ x, S 〈/td〉
/ s! a! L1 j- @; N$ L5 x/ ~
" i4 }$ n( |2 z1 y+ j; J$ \: ~' i 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉" n. s1 D0 v; H b. M
* t4 L6 V% Z6 b; I4 }
5 `; A/ Z# w% b) G
〈/td〉6 }' [/ Y9 Y Q) l. u
$ | o1 m8 m" g6 G% i 〈/tr〉
, v- t& _, o2 c ^5 w4 ]9 N5 `! W9 d$ p+ g Q
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|