|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。" G. ~8 z4 w5 f; D
* @8 n. Y, E f: e+ w' _ N% O
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
1 I; y* E# G' V# e3 w# R( E3 B6 E: z3 a( Y* d3 B+ n
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：- S9 i5 T6 d4 H* x0 l
$ P: r4 B- p7 \1 S7 G( C+ A
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉6 }% C) r; ~& V$ i# ]$ N6 u
; f- z- a4 U' ?/ @7 a 〈tr〉
: O5 w4 X' s/ L; f7 i" {7 u; |; g' P. T6 }! k7 m6 ~
〈td〉
9 ?) h% @% p: F* g$ D8 J
( [8 e1 U. [! f, H; T 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉5 M6 B/ _7 m0 n* p! W. i1 Y/ n
- m8 X7 ?* w0 I% Q$ C _4 C& L 〈tr〉
0 L7 a/ S& Z6 i+ n4 {: I C- `" Z: d0 Q$ j9 B& w. A
〈td〉! I( c) \+ d; g& @* h0 B$ `1 Y1 `
2 P' B6 h0 l4 d3 u5 b& |: Q 〈/td〉
4 H& l& \8 z% {" O
& F* V M3 P2 ^% x 〈/tr〉
8 D- Y& ^& e1 E# ]+ D0 J! V
0 B1 Z, g* n; r, d( Q9 X 〈/table〉
9 l- g* _8 `" M7 t: O4 M
8 ~ C" T, m" F# P 〈/td〉. o! n% b& \4 ^3 |6 N; j/ B
3 e* A1 }0 ]' l9 s 〈/tr〉
: m5 O5 E6 P/ h& j: C# o
3 @8 n: `2 K2 z 〈/table〉
( h5 i9 g$ R/ f4 b! o* t5 M
* e) b$ C$ Z+ R" _- C, R0 y 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。+ l9 p# a! _6 ]) r$ Z! n
, b# n4 B9 ] I" L% p' e4 o$ G2 O 源代码如下：
; T, Q- t" G3 h! {8 b* K' r
& F G8 |& C5 M9 B- w 〈table border="0" bgcolor=white〉
/ T# N) V& d5 K% J4 s8 ^2 n3 `. r; M( O, X1 A
〈tr〉- P6 {7 ]1 Y. Y: Z' z/ |; [0 G3 C
" _3 M. v' N% I9 d& y
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
. n- r3 J% o! k1 T& S9 S0 x
2 _; g- {" U2 s, _5 @7 c j 〈/td〉# ^7 J |5 W: l3 F W
1 w/ O8 L# r5 v5 g l! m; [ 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉0 c& _- ^, `2 |
8 F+ c3 }! o5 G6 A1 h9 o 〈/td〉
, N. M6 F* D* I& x5 y, A8 B Z& [- T; d5 q2 C9 A! t
〈/tr〉
/ E6 _5 ^8 D" G1 Q/ z' A
# d2 }8 B. }* Z( M; ]5 L: B& w0 s 〈tr〉
/ Q0 P' v! r* t/ G. E6 v
: H, n/ h7 s! ` 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
0 @( V7 I- ]; W7 {2 u8 ^% b' p& u% l2 o: n. V' h+ ?
〈/td〉
' g/ e A4 r0 Y, p* d6 ^: j- W0 c' `: r. a/ e
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉! Y6 _. R/ s2 T: R0 i j
2 W5 ]# e5 ]! E" K2 V$ x! |, R+ r2 M8 s7 |% _+ v! \/ {. a9 R
〈/td〉! `$ b8 w; U$ B' a3 [' g
1 L) z. \$ _. L% d0 ^
〈/tr〉. X( R+ k) }" H
, i3 ^% }% l; t( o 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|