|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
# l& O+ h; c* R0 X# ~7 c. ]
7 Z$ q3 @1 E4 B: ^/ ?5 r 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
. g( K# |; s; e2 R2 |, Y% n- ^! q: J- _# H6 \% K
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
0 ~9 j$ k/ x1 g: f0 a K' i. A- l Y6 g2 k
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉, D+ z. j, G# D, F. f
0 j2 @; i R3 l; K( |( g; t
〈tr〉: d9 G# i9 D; H0 p; F" G
+ Y1 C+ Y+ B4 N. C2 c
〈td〉/ I4 q0 z9 H0 U& E- b
9 M# Q/ C9 N5 b) M 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉6 i) {& @: e, p0 O& a4 v9 ~$ }
% ^ R( L: Z# A9 a7 P/ S
〈tr〉
2 }6 q3 D! `) U3 e; Z2 r9 T% t' D
〈td〉4 S. A7 p$ O# V5 K0 F6 x
4 D' }% j* S+ O) n/ v+ m
〈/td〉& W3 ?/ ?/ [6 \. z/ o2 c
' `7 ?' G& n x7 R) T+ E! p
〈/tr〉
, \5 `4 Q V- g/ d4 B7 k3 W5 h5 E
〈/table〉0 A) k/ n: p p9 B: n9 `% F
$ w, T! Y$ k# t# E* M2 x# Q
〈/td〉
! `& I" r' q" ^1 [1 X( u7 |4 W
8 X4 N' d5 P" t+ D: W+ N 〈/tr〉
# V2 {" u3 H2 |
. {) i3 R/ r: u, |, j/ L4 R) S 〈/table〉
9 r* b+ c+ g: v- s" B
5 [- ?/ z" i" V! O0 n2 b 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
! h& u, B! [! }$ I9 R3 w! `
8 |+ }! c$ `6 {2 v0 U2 @! a. c 源代码如下：
( S: p$ B! k' Z4 n9 m. `3 n1 ]: a3 z
〈table border="0" bgcolor=white〉# _9 X e& e9 N# [2 }
* D! y9 S' Q# l# [7 b
〈tr〉
) X7 G4 t, o& L9 A* z
r, f r+ W0 p% | 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉8 L6 ^4 W/ B7 t
9 _/ r+ v/ z' ^8 o1 S/ D7 z 〈/td〉
5 D6 D9 A7 ~) B, Y' f5 G
8 ~$ C( f! Q9 c- P. r( d# X- r 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉& d/ f/ K. M2 H
, J7 T* G* n" k( \ 〈/td〉& U5 Z) j/ n7 |% \ C
4 N) c9 ~) {6 z# { g 〈/tr〉
% z" O& D4 G6 Z7 |
8 b J4 ^9 J2 C% R! _# I 〈tr〉
; L" w8 J+ D3 H& i2 t# B! B0 \
1 F' e5 |8 H) x7 g% o 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉' R& L# W# d: c) r7 O/ e) t* s% L
! E1 V) }7 } R# R# }' ^ 〈/td〉: P$ S, {# K# \) w" _
F7 t: N4 ]) j 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
' z5 a; j; v8 v v9 e X1 I6 g3 O: @+ ^( q# E+ z3 U5 J
2 J; L& C, R$ n9 B) h; {, {2 z 〈/td〉8 O( H9 L4 H0 s! X' u$ ?1 _: s
, t6 f! v! O b; K# A 〈/tr〉! C0 A8 b0 u* n3 `+ m) f0 U8 |
; {* X" k9 k) Z3 Z D* v" C 〈/table〉 |
|
发表于 2008-1-19 22:20
| 