为何使用表格排版是不明智的

王朝other·作者佚名 2006-01-09

找出问题，对症下药

表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border="0" 使得设计师可以将图片和文本放在这无形的网格中。迄今为止，表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法。下面我们开始寻找这个问题滋生的源头，并学习创建过渡性的，甚或完全不需表格的排版方式。

概览：这对我有什么用处？

我们将告诉你这样一种工作方式，它会：

使你的页面载入得更快

降低你的流量费用

让你在修改设计时更有效率而代价更低

帮助你的整个站点保持视觉的一致性

让你的站点可以更好地被搜索引擎找到

使你的站点对浏览者和浏览器更具亲和力

在世界上越来越多人采用 Web 标准时，它还能提高你的职场竞争实力 (事实上也就是降低失业的风险)。

我们还会讨论如何用层叠式样式表 (CSS) ——也许是一个和你曾经采用的方式 (表格) 有些微不同的——思维方式来处理你的内容和标记。

魔鬼网站：嵌套的表格与 GIF 分隔图片

开始的时候，Internet 不过是学校、研究者和军方用来交换信息的一个媒介罢了。然而那些早期的梦想家们没花多长时间就发现：这实在是个理想的媒体，尤其对于销售从新鲜农产品和狗粮到二手车和实时体育报道来说。

即便如此，和其他媒体的幼年时期一样，早期的 Internet 看起来是那么的‘粗糙’ (以至于实在不怎么能吸引顾客)。直到大概 1997 年的时候，David Siegel 出版了他那本里程碑式的书*，它在当时有限的浏览器功能和 W3C 标准之下，设计出非常华丽的网页效果。(朋友，其实我们说的是 Netscape 2 和 3 啰。)

这些效果是多么漂亮啊，以至于到今天，它们还是最流行的网页排版方式。

[*]译注：David Siegel 这本书的名字是 "Creating Killer Web Sites"，表明用表格和分隔 GIF 可以设计出魔鬼般迷人的站点。

表格带来的问题：

把格式数据混入你的内容中。

这使得文件的大小无谓地变大，而用户访问每个页面时都必须下载一次这样的格式信息。

带宽并非免费。

这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。

这还使我们保持整个站点的视觉的一致性极难，花费也极高。

基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。

解决方案近在眼前

现在的浏览器在支持 Web 标准方面有了很大的改进，所以我们再也不必使用那些古老的方式了。

我们将去掉那些表格里嵌套的表格和用 GIF 填充的单元，代之以简洁的标记和 CSS 排版出的载入快速、修改方便、对所有人都那么有亲和力的漂亮站点。

解决方案：CSS 与结构化标记

通过在 HTML 文档中使用结构化的标记以及层叠式样式表来排版，我们可以使页面的实际内容与它们呈现的格式相分离。

比之使用表格，它有这么一些优势....

把页面中的外观标记去除以后，重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出，你只需要改动一下样式表就行了，而完全不必改动页面本身。

比如说，你可以看看 CSS Zen Garden，或者 Eric Meyer 的站点上的样式切换器。如果想了解更多，可以看看 Paul Sowden 写的 Alternative Style。

带宽并非免费

运用 Web 标准来缩减网页文件的大小，这样用户将不必访问每页都下载一次外观的数据。控制输出效果的样式表是由用户的浏览器自动缓存的。

缩减文件大小意味着更快地载入和更少的流量费用。

嘿，这些网页就像一个模子里刻出来的！

运用 Web 标准还能使保持整个站点的视觉一致性变得非常简单。因为页面使用同样的 CSS 文档来进行排版，所以它们会被格式化为相同的风格。

这样加深了你的站点给人的印象还能使它更便于使用。

一次编辑，到处应用，人人皆然

运用 Web 标准使得你的站点对残疾人和使用手机或 PDA 的 Web 浏览者更具亲和力。

使用读屏器 [2] 的访问者 (或者连接速度比较慢的访问者) 不希望在下载了数不尽的表格单元和分隔图片后才获得我们页面的实际内容。

换句话说，把内容与格式分开使得你的内容与设备无关。

[2] 译注：读屏器(screen reader)是盲人等无法观看显示器的用户使用的一种把当前屏幕上的内容朗读出来的设备。

Google 的眼神不大好

保持网页的亲和力、尽量减少它的标记、并合理的运用网页头部的标签同样会帮助你提高搜索引擎上的排名。

降低代码/内容比、在头部标签中加入关键字，把网页顶部的的标志图片改为文本……这些行为都可以帮助你的站点在搜索引擎中获得更好的搜索结果。

你仍然可以在需要时运用表格，别用得太多就行了

这对于那些固执于老式的第四代浏览器的浏览者 (和你的老板们) 会比较好接受，而在直到他们回心转意之前，其他人至少也能接受。

看看表象之下是什么

下面的代码描述的表格的结构：

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }

这样就好多了

这是用来去掉那些多余的标记的 CSS 代码：

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }

过渡性的设计

使用 margin 和 padding 来代替多余的表格单元和间隔 GIF。

使用 link 和 @import 来载入样式。前者用于早期浏览器，后者给现在的浏览器。

@import url(modern.css) screen;

--></style>

一些实例：

Santa Cruz Montessori School

k10k

Fox Searchlight Pictures

等等，还有更多：

想了解更多关于过渡性设计的信息，请阅读 Eric Meyer on CSS 的第一章。和 Jeffrey Zeldman 的 Designing with Web Standards 的大部分内容。

CSS 排版：希望就在眼前

大部分用户使用的浏览器都有很好的 CSS 支持，当然它们也有个各自的脾性，不过只要你习惯了它们，就能够处理得很好。

编写 CSS 代码很简单。即便对于一个看 JavaScript 就像看天书的家伙来说也是如此。

if(links[x].length > 0);{

for (y=0; y<links[x].length; y++) {

每条 CSS 规则都有一个选择符和一个声明。声明是由属性名(property) 和属性值(value) 组成的。属性名一般使用连字符(-)连接。

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}

#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}

结构化标记：所写即所想，所想即所写

即便书写 CSS 很简单，使用 CSS 来排版却真的需要一种和我们以往有些不同的思维方式。

我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构。

我们用 <h1> 标记来标示最重要的头条；次一级的条目则用 <h2> 来标记，以此类推；而段落则放在 <p> 标记中。

这就是我们称之为“结构标记”或“语义标记”的东西。

你的内容将不放在表格和表格元素中，取代它们的是 div 元素。还要给你的 div 元素安排一个 id 或 class，不过这是为了描述它们的内容或功能，而非它们的外观。

避免 <b>ed 与 <br>eakfast 标记

且想想为何你希望某个对象按特定的方式出现；它有什么含义？你的标记能够也必须表达意思，即便对于那些无法观看页面的人来说也是如此。语义性的标记使得你的页面对一切受众都更有亲和力，这还包括了搜索引擎。

当你把某个对象设为斜体时，大概要么就是想强调它，要么是想引用某个书中标题吧？如果是前者，应该用 <em>；如果是后者，其实得用 <cite>。

如果某个对象被标记为粗体，事实上它应该被标记的是， <strong>。

如果你希望在某处添加一个换行，这大概是开始了一个新的开头。如果不是开头，会不会是某种在你的站点中出现过的class (类型)？在上面两种情况下，你都应该用 CSS 替换 <br>。

.foo {display:block}

如果希望了解更多，请阅读 Bed and BReakfast markup (B&BR)， Tantek Çelik 作品。

导航条该怎么做？

考虑你需要导航的内容是一些无序的链接这种情况：

用 <ul> 标签来编辑它们。

link1

link2

link3

link4

link5

水平导航条

我们可以用 CSS 来控制这个列表显示在网页上的外观。

通过使用 display:inline 我们可以创建水平导航条。

这是上面这个导航条用到的代码：

#nav1{

margin-top: 1em;

margin-bottom: 0.5em;

}

#nav1 ul {

background-color: silver;

text-align: center;

margin-left: 0;

padding-left: 0;

border-bottom: 1px solid gray

}

#nav1 li {

list-style-type: none;

padding: 0.25em 1em;

border-left: 1px solid white;

display: inline

}

#nav1 li:first-child {

border: none;

}

垂直导航条

这是垂直导航条的代码：

#nav2 {

background-color: silver;

border: solid 1px gray;

width: 8em

}

#nav2 ul {

list-style-type: none;

margin: 0;

padding: 0;

border: none

}

#nav2 li {

margin: 0;

padding: 0.25em 0.5em 0.25em 1em;

border-top: 1px solid gray;

width: 100%;

display: block

}

html>body #nav2 li {

width: auto;

}

#nav2 li:first-child {

border: none

}

想了解更多？看看 Mark Newhouse 的文章吧，在 A List Apart 的 Taming lists，以及在 CSS-Discuss wiki 的 "Styling lists"。

当然，CSS 总会有些事情做得不如表格好。

比如说你有个黑色的导航条，当你希望把它延伸到整个页面那么长的时候。如果用表格，简单得很，给 <td> 一个黑色背景就行了。

没错，我们可以用 CSS 完成这个，但需要一种不同的思维方式。

如果我们的导航条的 div 一个黑色的背景，那么黑色只会延伸到导航内容结束为止。可在大部分页面中，内容总是比导航条长的，这就不大好看了。

所以我们只好把一个黑色的 GIF 图片放在 div 里边，并为 div 给足左侧的 padding，可一旦导航条比内容长的时候，这又不好办了。

另一种“解决”的方式把黑色的 GIF 放在 <body> 的背景中 (而内容的 div 中设置别的背景颜色)，这个方法本是不错的，可万一你又想把 <body>. 的背景设置成别的颜色，那就完蛋了。

或者我们可以把图片放在一个专门的“包裹” div 里。然而这毕竟又把非语义性的麻烦引入了我们的标记中。

而且当然，在导航条的宽度是变动的时候如果要用小块图片拼成背景，CSS 肯定无法胜任。

就像我们前面说的，表格总有做得比 CSS 好的地方。但你总归应该问问自己，表格带来的麻烦是否值得用它带来的那点利益来交换？

从玩弄表格技巧到遵循 Web 标准：通盘考虑

首先，你得考虑好一个移植策略。是一口气把整个站点移植了呢，还是逐个逐个部分地一步步完成？

检查一下，找出会因为移植而受益的页面和分支。自然而然地，从首页、新产品通告之类的页面开始检查会比较好。

分析你的站点的内容分别属于下面的哪些类型：

产品信息

价格信息

公司信息

报表

服务信息

投资信息

购物篮

用户论坛

等等

分解你的页面

如果你已经把站点的内容分好了类，那么是时候分析每个页面，把它们按照逻辑关系进行分解了。

主导航条

子导航条

页眉与页脚

内容