|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
9 A. P* D3 C( S+ Z3 _8 }! h
3 _- z9 o+ e9 D* ?1 A0 x g 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
3 D4 Z! n j5 {* ]- d# f0 U
; e; \0 n: l+ B" o; V# ~* {, { 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
; m, l; z) q! G7 g: a9 K. D) O
. O. j7 o4 g, b A, u 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉% w8 u- @0 j& G- a2 Z$ }! x
& s# j' o/ X; m8 k
〈tr〉
4 X8 K: r" N# t* H2 k# B7 o! `1 T `8 u3 l- j( ?
〈td〉
) V5 T3 ~% k, Z# Y/ i: d* Y( n6 |7 P/ n
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉+ } W9 G. U5 \! d" _- Z% U9 }( |6 z
# W7 K. h' e7 x0 r9 q0 F& @
〈tr〉
7 r. v! t8 l6 ~
$ d5 Y H+ a' Y. L% `5 x. B 〈td〉' F2 O8 Q; p4 b# @% o- `
8 d9 F7 F% u% v
〈/td〉
5 n) M) T& I. `! L2 r
+ U* v1 ^: F" Z) I/ t8 E 〈/tr〉
# V* j% H9 @ n6 N0 a& V( F- B) G- h/ a' p i1 a: \3 Y/ q0 z8 k
〈/table〉
# t$ @' j* N* n% g) C. w0 b; e
) z$ x5 N8 F' l 〈/td〉
! g9 H/ {- L9 M. z
+ `; [8 k! j, y0 S 〈/tr〉, C7 [* E% w; B$ a* w1 w. N
) v+ U* H) Q0 g4 t, ^: D
〈/table〉
) s# k! _4 q% B3 b2 ^/ H. @+ t2 K" r$ f2 y8 B
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
( Q9 n9 o$ Q: C0 d1 k! F8 P
$ S/ G* R' t. T% u0 q 源代码如下：8 o( A- R% d0 p
5 F/ t9 I2 {( S/ b0 ^
〈table border="0" bgcolor=white〉
! A/ h, h( z6 w$ j4 o/ G3 a* l8 Z4 m5 d$ g; y8 h0 ]
〈tr〉+ f- c7 O) P" t5 [, h; j4 w
- V& P7 d! Y9 X7 J( B: [
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉: ]' |8 H4 G/ ]; x) q0 i4 J# E
, ^+ m0 h4 G" j$ @ _9 c- @ 〈/td〉
! c! n' I+ I5 R- ?" r0 z f D: b+ U& u& i& M* F* ~) V
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
8 Z( F1 r$ R9 } q- x
9 s# {5 {+ c. d5 i 〈/td〉8 X( z0 ?: A& z! H' O
l+ \$ g! G* w% H6 V) h 〈/tr〉
; q& J( C8 g3 N2 o6 X# M3 T( ~
- P& A8 m0 o { 〈tr〉& O: n+ T4 w4 X( A1 ~7 ~
U# G4 e" q. @ Q$ m9 U3 d4 h 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉" x+ B3 t% K# d) n8 u
7 Q- _* s' J0 P7 I% t 〈/td〉& ^' \+ d; N6 d. p U
, b$ Y7 W0 }9 r9 k+ R9 b2 u
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉7 L4 ]. S/ S) V. W0 j3 i7 y- ?
4 \/ L: Y' ^- m8 ^: _2 N: T
; Q0 z3 [' {: Z$ V: l* v 〈/td〉+ l% o+ @# N$ @% j: n: `. G6 O+ j
1 d3 C0 x! R$ x) v 〈/tr〉6 m1 i# M' r$ H' f' k6 i
$ ~( N( m' w6 k( W& Z& c( p 〈/table〉 |
|
发表于 2008-1-19 22:20
| 