找出问题，对症下药
表格之所以存在于 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 来载入样式。前者用于早期浏览器，后者给现在的浏览器。
<link href="basic.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
