为何使用表格排版是不明智的：
找出问题，对症下药
表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border="0" 使得设计师可以将图片和文本放在这无形的网格中。迄今为止， 表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能 更强大的网站设计方法。下面我们开始寻找这个问题滋生的源头，并学习创建过 渡性的，甚或完全不需表格的排版方式。
表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border="0" 使得设计师可以将图片和文本放在这无形的网格中。迄今为止， 表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能 更强大的网站设计方法。下面我们开始寻找这个问题滋生的源头，并学习创建过 渡性的，甚或完全不需表格的排版方式。
这里有没有合适的听众？如果你的老板正在 Seybold [1] 这里，但却在参加另一场会议， 去把他们拽过来。他们更需要了解 Web 标准能够为公司省钱。
我们将告诉你这样一种工作方式，它会：
我们还会讨论如何用层叠式样式表 (CSS) ——也许是一个和你曾经 采用的方式 (表格) 有些微不同的——思维方式来处理你的内容和标记。
开始的时候，Internet 不过是学校、研究者和军方用来交换信息的 一个媒介罢了。然而那些早期的梦想家们没花多长时间就发现：这 实在是个理想的媒体，尤其对于销售从新鲜农产品和狗粮到二手车 和实时体育报道来说。
即便如此，和其他媒体的幼年时期一样，早期的 Internet 看起来 是那么的‘粗糙’ (以至于实在不怎么能吸引顾客)。 直到大概 1997 年的时候，David Siegel 出版了他那本里程碑式的 书，2它在当时有限的浏览器功能和 W3C 标准之下，设计出非常华丽的 网页效果。(朋友，其实我们说的是 Netscape 2 和 3 啰。)
这些效果是多么漂亮啊，以至于到今天，它们还是最流行的网页排 版方式。
[2]译注：David Siegel 这本书的名字是 "Creating Killer Web Sites"，表明用表格和分隔 GIF 可以设计出魔鬼般迷人的站点。
现在的浏览器在支持 Web 标准方面有了很大的改进，所以我们再也不必 使用那些古老的方式了。
我们将去掉那些表格里嵌套的表格和用 GIF 填充的单元，代之以简洁的 标记和 CSS 排版出的载入快速、修改方便、对所有人都那么有亲和力的漂 亮站点。
通过在 HTML 文档中使用结构化的标记以及层叠式样式表来排版，我们 可以使页面的实际内容与它们呈现的格式相分离。
比之使用表格，它有这么一些优势....
把页面中的外观标记去除以后，重新设计现有的站点和内容将变得非 常节省人力 (同时便宜得多)。如果想改变 站点的输出，你只需要改动一下样式表就行了，而完全不必改动页面本身。
比如说，你可以看看 CSS Zen Garden， 或者 Eric Meyer 的站点 上的样式切换器。 如果想了解更多，可以看看 Paul Sowden 写的 Alternative Style。
运用 Web 标准来缩减网页文件的大小，这样用户将不必访 问每页都下载一次外观的数据。控制输出效果的样式表是由用 户的浏览器自动缓存的。
缩减文件大小意味着更快地载入和更少的流量费用。
运用 Web 标准还能使保持整个站点的视觉一致性变得非常简单。 因为页面使用同样的 CSS 文档来进行排版，所以它们会被格式化为相同的风格。
这样加深了你的站点给人的印象还能使它更便于使用。
运用 Web 标准使得你的站点对残疾人和使用手机或 PDA 的 Web 浏览者 更具亲和力。
使用读屏器 [2] 的访问者 (或者连接速度比较慢的访问者) 不希望 在下载了数不尽的表格单元和分隔图片后才获得我们页面的实际内容。
换句话说，把内容与格式分开使得你的内容与设备无关。
[2] 译注：读屏器(screen reader)是盲人等无法观看显示器 的用户使用的一种把当前屏幕上的内容朗读出来的设备。
保持网页的亲和力、尽量减少它的标记、并合理的运用网页头部的标签同样会 帮助你提高搜索引擎上的排名。
降低代码/内容比、在头部标签中加入关键字，把网页顶部的的标志图片改为 文本……这些行为都可以帮助你的站点在搜索引擎中获得更好的搜索结果。
这对于那些固执于老式的第四代浏览器的浏览者 (和你的老板们) 会比较好接 受，而在直到他们回心转意之前，其他人至少也能接受。
 | |||||||||||||
| | | | | | | | | |||||
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. | | | Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper. | | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| Suscipit lobortis nisl ut aliquip ex ea commodo consequat. | | | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | | | Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim. | | | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| |||||||||||||
| | | | | | | | | |||||
| 这本可以做得简单得多。 | | | 猜猜我们在这个小表格里用了多少代码？足足 13.7k。这玩意儿一共有 17 行 9 列，还没算上那些用来做间隔的 GIF！ | | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| 这种方法用了太多的表格单元和间隔符。 | | | 而且所有这种虚线边界都是用表格单元的 background 属性完成的，这可通不过 HTML 标准的验证。
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| 全部这些其实可以只用 8 个表格单元加 4 条 CSS 规则就搞定的。 | | | 我是说真的，只要 8 格单元和 4 条规则，只要这些。
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| 这四条规则是：一条给 <table>，一条给 <td>，一条给 <ul>，还有一条给 <li>。 | | | 就这么简单，写好这些就大功告成了。
| | ||||||||
| | | | | |||||||||
| |||||||||||||
下面的代码描述的表格的结构：
table{ margin:3px; padding:2px; border:solid 2px blue }
td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }
| 好多了 | 猜猜现在我们用了多少标记？仅仅 2.1k。这里只有 4 行 2 列，还没有用来作间隔的 GIF。 |
| 就这样 | 而且所有这些虚线边框都是由 CSS 完成的，它们完全符合标准。
|
| 只用了 8 个表格单元和 4 条 CSS 规则。 | 我是说真的。就用了 8 个单元 4 条规则。
|
| 你只需要一条规则给 <table>，一条给 <td>，一条给 <ul>，还有一条给 <li>。 | 就这么简单，写好这些就大功告成了。
|
这是用来去掉那些多余的标记的 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;
--></style>
一些实例：
想了解更多关于过渡性设计的信息，请阅读 Eric Meyer on CSS 的第一章。 和 Jeffrey Zeldman 的 Designing with Web Standards 的大部分内容。
大部分用户使用的浏览器都有很好的 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> 标签来编辑它们。
我们可以用 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 好的地方。但你总归应该问问自己， 表格带来的麻烦是否值得用它带来的那点利益来交换？
首先，你得考虑好一个移植策略。是一口气把整个站点移植了呢，还是 逐个逐个部分地一步步完成？
检查一下，找出会因为移植而受益的页面和分支。自然而然地，从首页、 新产品通告之类的页面开始检查会比较好。
分析你的站点的内容分别属于下面的哪些类型：
如果你已经把站点的内容分好了类，那么是时候分析每个页面，把它们按 照逻辑关系进行分解了。
注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构 (因为我们希望把它 们替换为用 div 标记组织的那种简单得多的表格结构)。
一旦你分析好页面的结构，就可以着手揭开表象，分析你现在的页面代码 中可以转换成结构化标记的那些地方。
<font> 标记和间隔 GIF 吧！<b> 和 <br> 标记。 bgcolor, background, 等等)。<span class="header">) 改成结构化的标记。 (Tantek Çelik 在他的文章 A Touch of Class 里详细讨论了这方面的内容。)
你可以使用“查找加替换”(或者正则表达式)，不过最好的方法还是在浏览 器里打开这个页面，然后把文本复制粘贴到你的 HTML 编辑器里。
关键还是要用结构化的方式来思考！仅仅把 <b> 标记替换为 <strong> 是远远不够的。
最重要的条目是哪个？用 <h1> 来标记它。次要一点的就用 <h2>，依此类推。用 <p> 来标记段落。 把导航条标记为无序列表。
选定一个 DOCTYPE 来使用。(我们推荐 XHTML transitional，除 非你是此道高手，否则别用 XHTML strict。)
div 中把你的主导航条放在一个 id 属性设为 mainnav 的 div 中，子导航条则放在一个 id 或者 class 是 subnav 的 div 中。而页脚类似这个形式：<div id="footer">， 至于整个页面，它被放在 <div id="content"> 里边。
即便现在它还不怎么讨人喜欢，但只要你开始给样式表添加规则，它就会马上变得 可爱起来。
首先，给每个 div 设置一个边界。例如： div {border:1px dotted gray; padding:.5em} 这可以帮助你完完整整地看到里边的内容，也不再需要卷动屏幕了。
首先为以定义的元素编写 CSS (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。)
尽量运用上下文相关或者有递归下降结构的选择符。这可以使得你的标记 更清晰。例如：#subnav li{border:1px solid black; padding:.5em; display: inline} 将能够只能影响你的子导航栏的 div 中的列表项。
在尽可能多的浏览器下进行测试，毕竟你可以让朋友帮助你用它们自己的浏览器测试。
显然，我们不能在这短短的一个小时内告诉你所有关于 CSS 的东西，不过下面 的这些书能很好的帮助你掌握 Web 标准，让你的页面更苗条、更干净、载入得 更快。
zeldman.com 每日报道：见解深刻，发人生省，内容和链接书写规整
A List Apart 为制作网站者量身定做
The Web Standards project 祝福他们。
CSS: A guide for the unglued 提供了大量重要的链接。
CSS Layout Techniques: for Fun and Profit 你可以把这些 Eric Costello 的排版用于自己的项目。还有资源和教程。
Real World Style Mark Newhouse 的关于 CSS 排版的技巧、诀窍和技术。
The Business Benefits of Web Standards 现代经理人的好消息。Web 标准以一种连 MBA 也能看懂的方式表现出来。
简体中文版 译者：Jjgod Jiang
Even though we did our best translating this thing, you still might want to read the original English version.
We're going global! If this isn't your native language, check out our translations page. If you'd like to translate this into your native tongue,
This work is licensed under a Creative Commons License.
[1] 译注：Seybold 是 2003 年在美国旧金山召开的一次有关设计与排版的研讨会， 详情请见 http://www.seybold365.com/sf2003/。 本文是该会议上的一次演讲。