表格使用指南

来源:百度文库 编辑:神马文学网 时间:2024/04/29 15:33:08
相关搜索:指南,表格
一.表格基础$ Z2 D+ B7 ?1 X# @& k
最简单的表格如下
( f  k8 h! t& D5 `8 ] 内容
& B/ _0 f/ Z5 [" Q: K" H
拆开说明:5 c7 v; r- ~2 u1 P
代码
描述
表格开始
行开始
表元头
& Y& `& F# Z7 D7 f
内容 内容
表元尾
' V) ]* B0 r& ~* O- v( i6 |
行结束
表格结束*注  表元:表格内具体数据,表格内所有数据都在[td]和[/td]中.
3 y' U& h7 x' w- C7 t$ `' U$ \$ t" ]$ u5 l# F* Q, g* M. S# n( a$ X  ^5 }
有头必有尾,有行必有元。
6 I7 x" Q; S1 K8 Z$ \. [7 c) ^" B举两个例子
) Q* H: L( ?) \; {5 E5 F6 s& m& s代码:. k; m7 o6 K  W/ f# B! d& Q
4 [6 L' m) c5 p9 w
! f; ?- a- z1 W8 T$ m+ [内容+ R, N1 O6 A: w* i( p/ n1 s& |
内容
T8 P9 P4 O8 |. P$ N! l" ^1 P3 H- ^& a7 c+ h2 }* O# d: f; \! P1 i8 i+ G
效果是一行两列:
/ S. i$ X4 c/ t$ k$ G( G/ ]1 @0 G3 f0 u( y+ k, K# w
内容 内容
# 通过重复使用[td]内容[/td]可以把一行分为N列
' O- W9 {' {/ ~代码:
/ Z  t6 Y) Q3 u/ Q% ?' I% K# I4 U$ U5 C* \
) @* L" T6 [) Y: x% h
内容6 c! N+ D2 U1 d7 _) J
) I; @2 [6 a, _6 f9 \% {. S, L( A' n+ }6 o* M3 S
内容0 N$ x: [5 F6 V* q! I
, a' K" c. [0 ~  \3 Y( r1 I2 M! I& n1 G2 k, S
效果是一列两行:
r! d0 r9 p0 t6 z
. q' I/ r6 i* k# n3 m4 y( p( D' | 内容
内容
# 通过tr可以给表格分行.当然,每行必须含有表元标记. 二.表格进阶
( l1 L* F0 L9 h8 h- v1 q1 G# Q2 w' Q5 W表格宽度
. h# {3 k3 m% ^+ M; Q: p3 I# r: S% K! Y( e
表格宽度属性附加在表格头部,它可以是具体像素值也可以是百分比。
1 l1 H0 h7 ^$ d9 W系统允许的最大像素值宽度为560,超过这个数值会自动被修改成98%。& F. Y. {' C2 X) i: i
表格没有高度的定义,表格的高度取决与表格中的内容(表元)。, K. n4 c) Y6 t5 `0 k
( V' p6 k& w- t2 o9 y  G! V, s两个例子:& k5 _$ c( U: W! h& T( W: _- _
1  R6 W! @' D7 p6 U
代码:8 F' ]* y+ K6 S% w
[table=500][tr][td]内容[/td][/tr][/table]
8 c& @5 B; i& @" G6 p4 s效果:
4 S* X  D0 m, @6 n& T# V 内容
3 i' i2 N5 m+ E$ @+ q8 m
注:表格宽度为500像素0 i" z6 u; f, ~3 T& f- V$ k, a
+ {, j: q7 i8 E5 I% L
2& M& C: ?, p% {" s* g+ x
代码:
3 |1 W+ G- N# b8 |- w[table=90%][tr][td] [/td][/tr][/table]$ y. A+ r8 Q/ i8 d
效果: 内容
& D) }. E- ~% S" i% t( M' r, j
注:表格宽度为帖子内容框的90%,这个宽度会随浏览器分辨率变化而变化.
4 a3 [5 L5 z- c% O8 _
! k5 A- ^& t) Z+ y- |% ~1 ~表格背景色
t6 |4 e6 p% f2 g5 S7 h5 M/ \5 n" _. ~1 {- n
表格背景色属性也是加在表格头部,必须和表格宽度一起使用,它可以是16 进制RGB颜色数码, 也可以是下列预定义色彩名称:(16进制RGB颜色数值可以用色彩选取器选择,本页最下方有链接)
' e. k' f3 o, `; Scolor=#000000>Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
& o/ n4 P+ Y; }7 y! x& S0 U7 mFuchsia, White, Green, Purple, Silver, Yellow, Aqua 5 s3 q6 i$ M7 z1 p. X$ D* B! `
+ o& q. v2 O' _
两个例子:0 M" ^4 ?9 Z# z; K# \
1" ^, t/ J' h  [+ o- f5 q0 b
代码:[table=500,Red][tr][td]内容[/td][/tr][/table]4 c5 q2 }, s0 E% m1 h5 N/ r
效果:  S6 w% T, s; x0 }8 ], [. Y. `
5 [4 Q) w% G9 F4 P
内容
' s; X2 U( o1 f3 Q  _; ^
注:表格宽500像素,颜色为红色。
& I( O- O+ }7 [2 m
: g! h5 g- Z* w( e- x: P2! d. N, r% I3 b7 c# _( ~
代码:[table=20%,#0000FF][tr][td]内容[/td][/tr][/table]
' S" n8 q6 w6 U7 R$ J5 C效果: 内容
; J, [8 J- Y' B  L4 @, \" g
注:表格宽20%,颜色值为#0000ff(蓝色) 跨行与跨列
0 r2 O" A$ [* j4 j7 t3 u0 V
* q0 N* ~$ g" K) a& Z这两个属性定义在表元,第一个数字代表所跨的列数,第二个数字代表所跨的行数。- b8 B/ z8 L2 m3 k7 _
(这个太麻烦,建议使用的时候用HTML编辑器编辑好,直接复制到论坛所见即所得模式下,或者使用后面所讲的表格叠加实现这个效果)
6 t1 S' R7 k. |2 C& f# I+ c9 i; ~3 L1 D5 L+ _8 I
直接看两个例子好了:" c& Y+ w6 s& o. e! M4 D1 q
o$ B% I; f& {0 W
跨多列. t, x& z5 s. v3 Q( m& |1 _
* A8 A" c1 p& h8 r/ L" K% l代码:# o& x. O0 f  ?) n
[td=3,1] 内容1内容2内容3内容41 R* V; `! Y9 P
效果是第一行跨三列:
; U' c' z4 Z# P 内容1
内容2 内容3 内容4
R) Z2 ^6 j& W5 O4 H! M' ~& ~
8 l* B; m$ J: }$ D& n* Z3 r% u: `1 @- F' Q3 b7 q
跨多行# e8 [& B( c* X5 R; w# R( ]- D
' e8 E, T4 s" o代码:
0 ?. h: K; M0 K7 I, K) |[td=1,2]内容1内容2内容3
" C( z: X2 {) z% f" r) B: C! C效果是第一列跨两行:2 h% `6 Z) v% d8 o: E* R* z' W  j: U
内容1 内容2
内容3
表元宽度
' |3 {/ R6 f6 a+ G* v表元宽度属性附加在表元头([td]),必须和跨行跨列一起使用,它可以是具体数值也可以是百分比。
0 j& M; A% a, V# Q7 }8 }( D表元没有高度的定义。8 ?5 B9 ~9 H) y. b7 b
: y' a* }' ^' X! Z0 J两个例子
2 Z; c7 K/ v8 N: m% z- I
6 }- m  D- }% M& I4 U一行两列,宽度分别为20%和80%
& g9 h+ R- h5 b9 O& c( z代码: 内容 内容
+ f% c: Q) H' X! \  e* O& X: s# j0 S
内容 内容
# z& C. L4 z" ]4 F
# v0 T; E0 N- V- J1 o% Y7 W两行,第一行跨两列,第二列两表元宽度分别为150像素和400像素.
- U5 x  J- J1 {' r' Y代码: 内容
内容 内容
& B: V5 q4 x2 Y1 K. S; q 内容
内容 内容