| 阿七 |
2006-04-03 14:43 |
为何使用表格排版是不明智的 b^C2<'
出处 xy Pz_9
<p\i B'y
找出问题，对症下药 $^louas&
表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border="0" 使得设计师可以将图片和文本放在这无形的网格中。迄今为止，表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法。下面我们开始寻找这个问题滋生的源头，并学习创建过渡性的，甚或完全不需表格的排版方式。 2P ic 4Z
:}3;z'2]l
概览：这对我有什么用处？ \i M
我们将告诉你这样一种工作方式，它会： <L>$Y#wU
Av"^uevfs
使你的页面载入得更快 Bv(c`JE~;
降低你的流量费用 .F@0`*#rE~
让你在修改设计时更有效率而代价更低 WbH#@]+DN
帮助你的整个站点保持视觉的一致性 ~E*`+kD
让你的站点可以更好地被搜索引擎找到 I+g[
p
使你的站点对浏览者和浏览器更具亲和力 < (<IRCR
在世界上越来越多人采用 Web 标准时，它还能 提高你的职场竞争实力 (事实上也就是降低失业的风险)。 t Zqy
\_G
我们还会讨论如何用层叠式样式表 (CSS) ——也许是一个和你曾经采用的方式 (表格) 有些微不同的——思维方式来处理你的内容和标记。 iz5WWn^
iU9> qJ]
魔鬼网站：嵌套的表格与 GIF 分隔图片 $9Asr
07
开始的时候，Internet 不过是学校、研究者和军方用来交换信息的一个媒介罢了。然而那些早期的梦想家们没花多长时间就发现：这实在是个理想的媒体，尤其对于销售从新鲜农产品和狗粮到二手车和实时体育报道来说。 _7Rp.)[&
n2(@uT&>
即便如此，和其他媒体的幼年时期一样，早期的 Internet 看起来是那么的‘粗糙’ (以至于实在不怎么能吸引顾客)。直到大概 1997 年的时候，David Siegel 出版了他那本里程碑式的书*，它在当时有限的浏览器功能和 W3C 标准之下，设计出非常华丽的网页效果。(朋友，其实我们说的是 Netscape 2 和 3 啰。) t8\XO j
U3 y-cgE
这些效果是多么漂亮啊，以至于到今天，它们还是最流行的网页排版方式。 \aB>Q"
pS
` D9AtN] R
译注：David Siegel 这本书的名字是 "Creating Killer Web Sites"，表明用表格和分隔 GIF 可以设计出魔鬼般迷人的站点。 4;.y>~z
ouf91<n
表格带来的问题： & U6 bOH%P
把格式数据混入你的内容中。 w0!4@
这使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息。 W&Pp5KR
带宽并非免费。 o:8*WCiqrN
这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。 r~U/t~V=D
这还使我们保持整个站点的视觉的一致性极难，花费也极高。 v cZg3:j
基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。 2!E@Gbhm5
解决方案近在眼前 f %JC;Y
现在的浏览器在支持 Web 标准方面有了很大的改进，所以我们再也不必使用那些古老的方式了。 I|oS`iLl$
y1@
*)|
r
我们将去掉那些表格里嵌套的表格和用 GIF 填充的单元，代之以简洁的标记和 CSS 排版出的载入快速、修改方便、对所有人都那么有亲和力的漂亮站点。 oP 4z>
ERQc1G]3Dd
解决方案：CSS 与结构化标记 :^[HDI-[2
通过在 HTML 文档中使用结构化的标记以及层叠式样式表来排版，我们可以使页面的实际内容与它们呈现的格式相分离。 Z<^TO1xs9B
b w2KD7
比之使用表格，它有这么一些优势.... X
cDu&6Dy
jt? . g'
把页面中的外观标记去除以后，重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出，你只需要改动一下样式表就行了，而完全不必改动页面本身。 S B# Y^ !
%=GF
比如说，你可以看看 CSS Zen Garden，或者 Eric Meyer 的站点 上的样式切换器。如果想了解更多，可以看看 Paul Sowden 写的 Alternative Style。 ;%_s4
P/hV{@x
带宽并非免费 @;K-@*k3
运用 Web 标准来缩减网页文件的大小，这样用户将不必访问每页都下载一次外观的数据。控制输出效果的样式表是由用户的浏览器自动缓存的。 C~:@ETcbil
cEc_S42Z
缩减文件大小意味着更快地载入和更少的流量费用。 \) ' o{l&
W-UMX',0zS
嘿，这些网页就像一个模子里刻出来的！ zXRq ) ;s
运用 Web 标准还能使保持整个站点的视觉一致性变得非常简单。因为页面使用同样的 CSS 文档来进行排版，所以它们会被格式化为相同的风格。 . \6q\7Ej
*(>,\8OVf
这样加深了你的站点给人的印象还能使它更便于使用。 ^+'[:rE
zA
g.,dA
一次编辑，到处应用，人人皆然 9z0G0QW[
运用 Web 标准使得你的站点对残疾人和使用手机或 PDA 的 Web 浏览者 更具亲和力。 Z|k>) pv@
UG5AF Z\
使用读屏器 [2] 的访问者 (或者连接速度比较慢的访问者) 不希望在下载了数不尽的表格单元和分隔图片后才获得我们页面的实际内容。 m:
V ~%C me
换句话说，把内容与格式分开使得你的内容与设备无关。 5z f bI
: fx^{N!T
[2] 译注：读屏器(screen reader)是盲人等无法观看显示器的用户使用的一种把当前屏幕上的内容朗读出来的设备。 *\ !>2
2*
xxS>O%
Google 的眼神不大好 :{Mr~Co*
保持网页的亲和力、尽量减少它的标记、并合理的运用网页头部的标签同样会帮助你提高搜索引擎上的排名。 7XU$O$C
%&[=%
zc
降低代码/内容比、在头部标签中加入关键字，把网页顶部的的标志图片改为文本……这些行为都可以帮助你的站点在搜索引擎中获得更好的搜索结果。 "z6 xS;
WNmG'hlA
你仍然可以在需要时运用表格，别用得太多就行了 F).7%YfY
这对于那些固执于老式的第四代浏览器的浏览者 (和你的老板们) 会比较好接受，而在直到他们回心转意之前，其他人至少也能接受。 uGW!~qAr*
0` y*7.Ip
:I !}ZD+Z
oH ] _2[
!
看看表象之下是什么 ^1mnw @04
o0}kRL
下面的代码描述的表格的结构： V<&^zIJUR
nd #owjB
table { margin: 3px; padding: 2px; border: solid 2px blue } z55g'+Kab
iz-B) ^8.
td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver } kuI$ VC
pt_]&3\e
这样就好多了 ~LF1$Cai
N eC]MW
这是用来去掉那些多余的标记的 CSS 代码： ; BmPP,
s/\ <;g:u^
table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }
Memb
`3
"~:P-]`G
td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia } w/, A@fLL
*bl|[(pP
ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em } ZU68\c L
= v(&qh9Q2
li { margin-bottom: 10px } JE_ GWgwdv
- ,qG
EJ
过渡性的设计 ys- w0H
使用 margin 和 padding 来代替多余的表格单元和间隔 GIF。 o\N^Uu
t3<HE_B |
使用 link 和 @import 来载入样式。前者用于早期浏览器，后者给现在的浏览器。 )u=46EU_
hH]oJ}H \
<link href="basic.css" rel="stylesheet" type="text/css"> 5;CqGzgoP
nU2 3D@l
<style type="text/css" media="screen"><!-- Zfc{}iu s
@import url(modern.css) screen; },%, v2}
--></style> R,+"^:}
xzb{g,c
一些实例：
W2]%QN=m$
)&[Z w{6P
Santa Cruz Montessori School `,s0^?_
k10k V;(Rg=5
Fox Searchlight Pictures
H><!
C
等等，还有更多： 5 J
7XVe>
想了解更多关于过渡性设计的信息，请阅读 Eric Meyer on CSS 的第一章。和 Jeffrey Zeldman 的 Designing with Web Standards 的大部分内容。 @N6KZn |R
|k<5yj4?
CSS 排版：希望就在眼前 vpP8'f.
大部分用户使用的浏览器都有很好的 CSS 支持，当然它们也有个各自的脾性，不过只要你习惯了它们，就能够处理得很好。 -ze@~Z@
OyATb{`'
编写 CSS 代码很简单。即便对于一个看 JavaScript 就像看天书的家伙来说也是如此。 , ik\MSS
o RHWb_$"
if(links[x].length > 0);{ Tl
S 904'
for (y=0; y<links[x].length; y++) { +K61-Div
X({R +
每条 CSS 规则都有一个选择符和一个声明。声明是由 属性名(property) 和 属性值(value) 组成的。属性名一般使用连字符(-)连接。 vq RW^>~-B
g.x]x #BC
body {margin:0; padding:0} | $ `I1
,S7M4ajVZB
.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue} (@c ZmU,
j12khp?
#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0} r~sQdf
KTjf2/
结构化标记：所写即所想，所想即所写 /;9 ]LC.g
即便书写 CSS 很简单，使用 CSS 来排版却真的需要一种和我们以往有些不同的思维方式。 ZZU"Q7`^
W_ubgCB
我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构。 ?& "!
,
^vr`t9EE
我们用 <h1> 标记来标示最重要的头条；次一级的条目则用 <h2> 来标记，以此类推；而段落则放在 <p> 标记中。 ~ MW_=6U
v DVE#Nm_
这就是我们称之为“结构标记”或“语义标记”的东西。 LYp=o8JW|
2w6 7 >w\
你的内容将不放在表格和表格元素中，取代它们的是 div 元素。还要给你的 div 元素安排一个 id 或 class，不过这是为了描述它们的内容或功能，而非它们的外观。 gf U!sYZ
['_G1_p
避免 <b>ed 与 <br>eakfast 标记 r?wE ;gH
且想想为何你希望某个对象按特定的方式出现；它有什么含义？你的标记能够也必须表达意思，即便对于那些无法观看页面的人来说也是如此。语义性的标记使得你的页面对一切受众都更有亲和力，这还包括了搜索引擎。
'E ~[I"0
^r0mx{i &
当你把某个对象设为斜体时，大概要么就是想强调它，要么是想 引用某个书中标题吧？ 如果是前者，应该用 <em>；如果是后者，其实得用 <cite>。 om pkDl\E
CDgu`jj%]
如果某个对象被标记为粗体，事实上它应该被标记的是， <strong>。 ^FN(wvqb8
$K*&Wdo
如果你希望在某处添加一个换行，这大概是开始了一个新的开头。如果不是开头，会不会是某种在你的站点中出现过的class (类型)？在上面两种情况下，你都应该用 CSS 替换 <br>。 ;c;PNihg
< e7
.foo {display:block} +)l6%QKcW
tQrkRg(E:
如果希望了解更多，请阅读 Bed and BReakfast markup (B&BR)， Tantek Çelik 作品。 tO]`
I-
i-_ * 5%A
导航条该怎么做？ (
mKuFz7
考虑你需要导航的内容是一些无序的链接这种情况： 63n<4VSH
I:G4i}mA
用 <ul> 标签来编辑它们。 2q ,> *B?
Wf>scl `s
link1 ?\NWK p
link2 ]:vo"{*C
link3 ^z\*;
f
link4 ]EZiPW-uy
link5 @>sZ'M2mq
水平导航条 V,qc [*_3
我们可以用 CSS 来控制这个列表显示在网页上的外观。 2RC|u?+@
NLA/XZ
通过使用 display:inline 我们可以创建水平导航条。 [:(^n0%
Uc?#E $X
& KS*rHgt?
J"Z=`I)KON
这是上面这个导航条用到的代码： EFNi# D8s
3.?kxac
#nav1{ U4*Q
;A#
margin-top: 1em; 08TeGUjJ
margin-bottom: 0.5em; P 4|p[V8
} ')m R87
U2D2?#
#nav1 ul { c/Ykk7T9--
background-color: silver; C>:'@o
Z
text-align: center; y:R!E *.L'
margin-left: 0; shAoib?Kw:
padding-left: 0; %P2l@}?a
border-bottom: 1px solid gray yxx'g+D*
} dRD t.U!T
RU_w r<
#nav1 li { ;0c
-+,
list-style-type: none; Z=&cBv4Fs
padding: 0.25em 1em; $ rU"Krf67
border-left: 1px solid white; BHZCM^
display: inline W#.+C6/
} - E(0}\
qTuQ]*[-
#nav1 li:first-child { _P{f+HxU
border: none; 0lm7'H*~
} #@3& 1 }J/
<Cbi5DtR
垂直导航条 j*' +f~ A
5mYX#//:
'OTQiI^t=
这是垂直导航条的代码： fR$_=WWN>h
F!_8?=|
#nav2 { Nm7YH@x*o
background-color: silver; l{o,"P"
border: solid 1px gray; !ay:h
Iv
width: 8em NZoNsNu*C.
} !Soz??~o/
U5RLM_a@M
#nav2 ul { SIridZ*%
list-style-type: none; .US=fWyrb
margin: 0; ?` lD|~
padding: 0; RH}i=
border: none tP][o494\&
} b
t{b%r
MO>9A,&f
#nav2 li { D
0 O^=v|
margin: 0; ]?6Pt: N2
padding: 0.25em 0.5em 0.25em 1em; ?Qxf~,F
border-top: 1px solid gray; HSk_'g(\0
width: 100%; 4`GOBX1b.y
display: block S"4eS ,5L|
} nZ'-3
:N^+!,i
html>body #nav2 li { b}
0G~oLP
width: auto; l
+a1 `O
} GoLK
95"]
QR2S67-
#nav2 li:first-child {
CkV5PU
border: none 4`B3 Kt`o
}
,v%' 2[}
KdBpfPny@
想了解更多？看看 Mark Newhouse 的文章吧，在 A List Apart 的 Taming lists，以及在 CSS-Discuss wiki 的 "Styling lists"。 Q+oV?
S3{
W c G
g
当然，CSS 总会有些事情做得不如表格好。 PjD9D.
p|C[T]J\@
比如说你有个黑色的导航条，当你希望把它延伸到整个页面那么长的时候。如果用表格，简单得很，给 <td> 一个黑色背景就行了。
k^Q.lb
{
Sv_Nb >
没错，我们可以用 CSS 完成这个，但需要一种不同的思维方式。 W,|+Dl
_%[po%]
如果我们的导航条的 div 一个黑色的背景，那么黑色只会延伸到导航内容结束为止。可在大部分页面中，内容总是比导航条长的，这就不大好看了。 mqj-/DN6*
[!De|,u(^
所以我们只好把一个黑色的 GIF 图片放在 div 里边，并为 div 给足左侧的 padding，可一旦导航条比内容长的时候，这又不好办了。 Ptc+ypTu
&7i&"TNptP
另一种“解决”的方式把黑色的 GIF 放在 <body> 的背景中 (而内容的 div 中设置别的背景颜色)，这个方法本是不错的，可万一你又想把 <body>. 的背景设置成别的颜色，那就完蛋了。 Mf2F LrAh
P)kJ[Zv>f
或者我们可以把图片放在一个专门的“包裹” div 里。然而这毕竟又把非语义性的麻烦引入了我们的标记中。 \Buy JskE
zak|* _
而且当然，在导航条的宽度是变动的时候如果要用小块图片拼成背景，CSS 肯定无法胜任。 u &w})`+u5
$~S~pvT
就像我们前面说的，表格总有做得比 CSS 好的地方。但你总归应该问问自己，表格带来的麻烦是否值得用它带来的那点利益来交换？ ~o>Gm>5!HH
- V:HT
j
从玩弄表格技巧到遵循 Web 标准：通盘考虑 * E
*oWb]H
首先，你得考虑好一个移植策略。是一口气把整个站点移植了呢，还是逐个逐个部分地一步步完成？ 9b/Dswxjx
l>MDC qV
检查一下，找出会因为移植而受益的页面和分支。自然而然地，从首页、新产品通告之类的页面开始检查会比较好。 0$]iRE;O]
S3:AitGJ
分析你的站点的内容分别属于下面的哪些类型： ^$5 0[
B
Z =I/L
产品信息 i84!x%|P
价格信息 tEL9hZzI
公司信息 w`;HwK$ ,
报表 A*eVz]i,k&
服务信息 uN:KivVe
投资信息 Km;}xke6
购物篮
0_eqO'"
用户论坛 !( rAI
等等 @uH!n~QV
分解你的页面 {$,\Qg
如果你已经把站点的内容分好了类，那么是时候分析每个页面，把它们按照逻辑关系进行分解了。 $8)XN-%(
)-26(aNGT
主导航条 *m}8L%<HT
子导航条 =w! ik9
页眉与页脚 Wk <fNHg
内容 %( 1O jfZc
相关信息 T IKkS*$
其他 _Xt/U>N
注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构 (因为我们希望把它们替换为用 div 标记组织的那种简单得多的表格结构)。 V9,<>
d
MH_:jb
看看你的那些标记吧 r*+~(83k
一旦你分析好页面的结构，就可以着手揭开表象，分析你现在的页面代码中可以转换成结构化标记的那些地方。 3uocAmY
bGCC?}\
作为一个完美主义者，消灭所有的 <font> 标记和间隔 GIF 吧！ /)6T>/
同样的，一并搞定 <b> 和 <br> 标记。 `9co7[Z
去除表格中的那些外观标记 (bgcolor, background, 等等)。 }6@E3z]AMO
把纯粹用来表示外观的那些 CSS 调用 (比如 <span class="header">) 改成结构化的标记。 (Tantek Çelik 在他的文章 A Touch of Class 里详细讨论了这方面的内容。) 6u0>3-[6OD
把描述外观的标记改为描述结构的标记 az
F!V
你可以使用“查找加替换”(或者正则表达式)，不过最好的方法还是在浏览器里打开这个页面，然后把文本复制粘贴到你的 HTML 编辑器里。 r8s>s6 vm
F:!6B b C
关键还是要用结构化的方式来思考！仅仅把 <b> 标记替换为 <strong> 是远远不够的。
HG;;M6
@."K"i'Bl
最重要的条目是哪个？用 <h1> 来标记它。次要一点的就用 <h2>，依此类推。用 <p> 来标记段落。把导航条标记为无序列表。 "[N2qJ}p
?4bYb]8Z
选定一个 DOCTYPE 来使用。(我们推荐 XHTML transitional，除非你是此道高手，否则别用 XHTML strict。) rG
P;0KtQ
s<zN`&t
把你的页面合理分布在的 div 中 pUHgjwT'U
把你的主导航条放在一个 id 属性设为 mainnav 的 div 中，子导航条则放在一个 id 或者 class 是 subnav 的 div 中。而页脚类似这个形式：<div id="footer">，至于整个页面，它被放在 <div id="content"> 里边。 ,~Mf2Y#m0p
EB}B75)x
即便现在它还不怎么讨人喜欢，但只要你开始给样式表添加规则，它就会马上变得可爱起来。 SZF 8InyF
p A OKy
是开始自己编写 CSS 的时候了 TcaW'&(K
首先，给每个 div 设置一个边界。例如： div {border: 1px dotted gray; padding: .5em} 这可以帮助你完完整整地看到里边的内容，也不再需要卷动屏幕了。 LP"g(D2'n
b* n3Fej
首先为以定义的元素编写 CSS (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。) 4Hz3 KKu
C}h(WOcr`X
尽量运用上下文相关或者有递归下降结构的选择符。这可以使得你的标记更清晰。例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 将能够只能影响你的子导航栏的 div 中的列表项。 z}[ u~P,
k+9F;p7
在尽可能多的浏览器下进行测试，毕竟你可以让朋友帮助你用它们自己的浏览器测试。 q-(~w!e
6{I7)@>N
用 CSS 排版的站点范例 9WG=3!-@
CSS Zen Garden oJTEN}fL
Adobe Studio M2Nh3ijr
Wired News h"1}j'2>@
ESPN }k VC ]+
Quark tx5bmF;b)
Inc.com Yh1</C
PGA Open Championship
L ci?
phish.com B& _:20^y~
CSS Edge }rJqMZ]w
在线资源 i3)3. WK^
8XH;<z<oJ
CSS-Discuss &}u _e`A
._0$#J S[
邮件列表: 互动性强，很有帮助。 X?haHM#]
Wiki: "Wiki 与众不同的特点是，它保留了对每个参与者长期的记载。" 如果你想糊弄一下 Windows 下的 Internet Explorer，而把主要注意力转向其他的浏览器，可以在这里找到该怎么做。当然，还有更多。 &E]) sJ0
Archives: 有个 CSS 的问题绊住你了？别急，别人很可能遇到过同样的问题并在此获得过帮助呢。 Vx!ZF+
zeldman.com 每日报道：见解深刻，发人生省，内容和链接书写规整
dcrvEc_/
NN7Kw Vg
A List Apart 为制作网站者量身定做 `lY-/Ty
a0ms9%Y;Q[
Taming lists, Mark Newhouse. 如果你要语义化地标记你的导航条，这里是必读的。 UT@Qo}:
CSS: Going to Print, Eric Meyer. 你再也不必另外弄个 'printer-friendly 版本' 出来了。 F[c oa5
Alternative Style: Working With Alternate Style Sheets, Paul Sowden. 让你的浏览者们自己选择如何浏览。 Tcy9oYh!Pn
Using XHTML and CSS for an effective Search Engine Optimization Campaign, Brandon Olejniczak. 别忘了，结构化标记还能帮助你获得更好的搜索引擎排名。 dU-:#QV6
The Web Standards project 祝福他们。 .B^ tEBGVD
3SY1>}(Y
CSS: A guide for the unglued 提供了大量重要的链接。 #`@)lU+/
n 'ZPB
CSS Layout Techniques: for Fun and Profit 你可以把这些 Eric Costello 的排版用于自己的项目。还有资源和教程。 i{}m 8K)
bSTori5
Real World Style Mark Newhouse 的关于 CSS 排版的技巧、诀窍和技术。 f:8!@,I
HA
c"&#pG
DevEdge Netscape Sidebar Tabs 极为方便地链接到 W3C 关于 CSS, HTML, 和 DOM 的标准。 iw.F8[})
~e|E5[-i
New York Public Library Style Guide 学习 XHTML 和 CSS 的简易上手指南。 *=md!^x`
g1XpERsSEV
The Business Benefits of Web Standards 现代经理人的好消息。Web 标准以一种连 MBA 也能看懂的方式表现出来。 |
|