|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14387
- 金币
- 2479
- 威望
- 1647
- 贡献
- 1427
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
8 _7 J g P* k* h+ y. Q" d8 v( V
" V! |1 r5 A1 s4 c, B 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
1 g& [4 z, X: q# T& G6 i) F7 X' s2 N6 T0 W5 p
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：* ~/ s9 q, t1 T3 ]* t4 w! n! A
! k$ E U+ ^. }& O; l" i0 b
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
C8 X/ B# `8 P' t2 |: F
$ M# {& }9 I; r0 Y9 ~6 V* C& S 〈tr〉
& m1 v+ l5 r( [- I& ^+ _6 s$ O2 T7 l: s6 _% q+ m$ ?* I9 \' Q; @
〈td〉
- f4 o+ i. w; o/ v4 }/ s" ^ m% m
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
2 f8 u5 F& \1 [, B$ A8 r! ] O# o9 I6 ~" }2 i2 z5 F" H. |% \7 R
〈tr〉 q* q" S! D3 T+ t4 o& ~
! ~+ E) q, X6 c+ n* G' U1 n9 M; T
〈td〉% m. J9 v$ p) O g- ]. p+ a
/ y Y/ k! E" ^
〈/td〉5 q- z! n! Z# u2 ~+ i8 n, b
/ e! A" C- s# O8 I" N- \& H
〈/tr〉7 J& Y: X/ K. ?% H) y8 y) b1 z
- s: i6 e8 Z$ `- R9 p6 r% r3 E 〈/table〉7 p7 h. c; W# C* _
0 y( A' V: R7 i7 L
〈/td〉
2 \! X' z$ r$ ^/ T; A# y
' _7 W: ~( K' F6 n, } 〈/tr〉
' D7 F# u$ W4 |! d. ?1 }
! u; _5 o/ q' x0 n( ]+ C 〈/table〉
3 X! t B9 d8 ^* S+ z( l2 e4 {& f4 L! A8 Z% z6 U" P
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
; l3 j i0 u" N5 \8 [
# g/ s. S3 n/ [+ d) F! ^+ ^ 源代码如下：
9 i+ g- `1 v/ e3 H1 g* T4 d
& L+ X6 o B X# h/ L& s$ { 〈table border="0" bgcolor=white〉
8 A l' v' I! p6 c! y
; ~/ r- b- O. x) P 〈tr〉
2 h/ O0 y* s' ?% v$ r/ l) B0 C% G% D; r1 P
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
$ Z. e1 T1 i5 u" S4 g: B
8 G7 @! A |' I; d, r! @8 j) A 〈/td〉# U; c! j. t! P2 C9 f% [! X- I
7 b6 i* v, o- n- f
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
$ s5 k% t6 u D" Z+ {6 p
& I- l2 i$ z, t) ]+ w* Z" m# C 〈/td〉
) N- `7 ~. ?" A T+ x' z6 D# C" R) ?
〈/tr〉1 f/ q. I1 |( G; a- a! T1 o
& g1 \# i" Q$ ^$ | N+ ?' _
〈tr〉" X7 \% V7 T( I- n
8 a3 J8 E/ O/ M1 h* P5 x 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
5 G: g6 j' e& R# Z8 b
P. x4 F$ z! J, i, \ 〈/td〉
- e0 ?0 y/ }/ w2 B2 @1 Q, c' @( e5 S o, M$ t* t
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉3 G- A9 q9 {6 z0 u: P
9 ?* g: ]3 g. z% v+ G* @1 I
5 q- ]" m, [' U% c: J: v4 Y 〈/td〉
. |3 X. \& v0 L- ]# f+ y- H, W
〈/tr〉1 h6 ~* u" g3 |
9 v0 |1 B: T6 l+ P V
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|