An Objective Look at Table Based vs. CSS Based Design（中英文）

     这篇博文post at May 12, 2004 9:17 PM，我对其进行整理，将中文和英文混合在一起，不仅可以学习英文，还了解一些独特观点。扩大自己的思考方式与范围，一个人要学会有自己独立思考的能力，而不是随波逐流。

Over the years there have been many great articles extolling the virtues of CSS based design and bemoaning table based design. However there have been very few articles looking at things from the other side of the fence. This is probably because you really have to understand and use CSS based design before you can criticise it. Yet once converted, few (if any) people go back to the old way of coding.

     多年以来，许多优秀的文章都在赞美着基于 CSS 设计的优越， 哀叹着基于表格设计的没落。但却很少有人换个角度想想，或许是因为你得在了解并运用了基于 CSS 的设计之后才可以批评它， 而一旦了解了之后，你又不愿意回头去用原先的老式设计方法了。

In order to bring some balance back to the equation, and to have a bit of fun playing devils advocate, I’ve decided to write an article about why in some instances, traditional table based design can be as good, if not better than CSS and standards based design.

     为了弥补一下这种不平衡，也因为在这场游戏中扮演一个大反派挺酷的，我决定写篇文章，说说为何在某些情况下，传统的表格设计方式就算不比基于CSS 的——或者说基于标准的——设计方式好，但它也不差。

The Demonisation of Tables（对表格的妖魔化）

Before tables came along, the web was a pretty dull place. Using tables for layout opened up the possibility of visually “designing” a page. It could be argued that table based layout was responsible for the popularity of the web and the field of web design. That’s right. Without tables, all us web designers would probably be without a job.

     表格出现以前，Web 本是个相当无趣的地方。用表格布局页面，打开了可视化的页面设计的新局面。表格对于 Web 和 Web 设计领域普及的贡献到底有多大或许有争议，但是，如果没有出现表格，我们这些网页设计师们可能没有工作。

Yet over the last few years, table based layout has become demonised. Web purists will tell you that tables were never meant for layout so you shouldn’t use them for such. However history has shown us many examples of technologies that started out life with one purpose, only to ended up finding more practical applications as something else. The web itself was never intended to be anything other than a way of sharing research data, and yet it’s become a channel for entertainment and marketing as well as information and education.

     近年来基于表格的设计确实被妖魔化了，网站纯粹主义者会告诉你，表格对排版毫无意义，因而你绝不能用到它。然而历史证明，许多技术一开始是为了实现某个目标设计的，却在别的领域发现了更大的用场而大展身手。 就像 Web 本身，一开始不也只是为了共享研究数据嘛，现在在娱乐和商业方面的应用却与信息与教育方面的并驾齐驱了。

The Comfort Factor（只为舒服一点）

As web designers, we’ve been laying out pages using tables for years. It’s a skill most web designers have, and most are comfortable with. Using tables in this way leads to very predictable results. By using a few very simple hacks, such as spacer gifs, we can pretty much guarantee that our sites will look the same on the widest range of web browsers out there, from the lowliest version of Netscape 4 to modern browsers such as Safari.

    Web 设计师们多年以来都在使用表格排版页面，这是绝大部分设计师都已掌握的能力。使用表格在一些方式上能实现想得到的效果，通过一些简单的 hack，比如间隔 gif， 我们几乎一定能保证我们的站点在最广泛的 Web 浏览器上看起来都一样，从最低版本的 Netscape 4到Safari 这样的现代浏览器。

Despite the fact that pioneers have been talking about web standards for a long time, the majority of web sites are still developed using tables and non standards compliant code. Because of this, user agents will be forced to handle table based layouts for many years to come. This effectively negates one of the biggest selling points for web standards. That of forward compatibility. It’s highly unlikely that in the near future, any of the big browser manufacturers (um, that’ll be Microsoft then) will release a browser that renders the majority of sites unusable.

    尽管那些先行者早已宣传了好久 Web 标准， 大部分的网站还是使用表格和不兼容标准的代码开发的，因此用户代理就不得不在很长一段时间内支持基于表格的排版方式。 这对于 Web 标准的卖点来说，是个致命的打击：标准没有标准应有的地位。为了兼容，不大可能会出现下面这种情况，某个主要的浏览器厂商 (唔，还是说 Microsoft) 突然发布了一个大部分网站都显示不了的浏览器。

So most web designers really don’t feel there is an overwhelming need to start developing sites using CSS based layouts and standards compliant code.

     所以大部分的网页设计者们真的没有感觉到使用基于  CSS 排版和支持标准的代码的危机感和必要性。

Changing the Barriers to Entry（改变入门门槛）

One of the reasons the web has been so successful, is it’s low barrier to entry. HTML is a simple “language” to learn and browsers are very forgiving about poorly formed documents. This makes it incredibly easy for anybody to publish on the web. Even your 12 year old nephew could knock up a simple site using the copy of Frontpage that comes bundled with Microsoft Office.

     web之所以能够如此成功的一个重要原因是，是因为它入门的门槛低。 HTML 是个简单易学的语言，并且浏览器可以容忍许多标记混乱的文档。 这使在 Web 上发布内容变得难以置信地容易。即便你 12 岁的侄子也能用 Microsoft Office 中附带的 Frontpage 捣鼓出一个简单的网站来。

Compare table based design to CSS based design. Sure the syntax of CSS is pretty easy. Nobody in their right mind would argue that you need too be a rocket scientist to learn CSS. However, some of the concepts can be quite tricky to grasp. On the face of it, the box model is pretty simple, yet I still get tripped up by margin collapsing on occasion. Floating and clearing can be conceptually difficult to grasp, as can positioning. In my experience, there is probably around a 6-12 month learning curve from knowing basic CSS to actually being able to develop CSS based sites competently.

     比较基于表格的设计和基于CSS的设计，可以肯定 CSS 的语法更简单，正常人都会同意：你没必要是火箭科学家才能学会 CSS。尽管如此，其中有些概念还是过于微妙了，不易领会。比如表面上看，Box 模型很简单，但我偶尔还是会在边界折叠 (margin collapsing) 上滑一跤， 浮动(float) 和清除 (clear) 这样的概念也不好理解，较难运用。 以我的经验而言，从了解 CSS 的基本概念到能自如地用 CSS 开发站点，大约需要走过一条为期 6-12 月的学习曲线。（这点我非常同意，学习CSS很容易，但是能了然于心的运用却很难）

Then there is the problem of browser support. Once you’ve been doing it for a while, you get to know what browsers support what, and what the common browser bugs are. However, there are so many bugs, even the “experts” find themselves spending an inordinate amount of time bug fixing. For a novice this must be extremely frustrating. Not knowing if the problem is down to your misunderstanding of CSS or some obscure browser bug. Is it any wonder why the same questions come up time and again on list like CSS-Discuss?

    然后是浏览器支持的问题。一旦你正式开始干活，就会慢慢了解哪个浏览器支持什么、不支持什么，和一些常见的浏览器 bug。可惜bug 太多了， 就算“专家”们也难以估量自己花在修整 bug 上的时间。对新手来说就更让人泄气了，因为他们不知道是因为自己误解了CSS 呢，还是某些晦涩的浏览器 bug？也许这就是为何同样的问题一再出现在 CSS-Discuss 等邮件列表上的原因吧。（同意）

When the browser manufacturers finally get their act together, developing sites using CSS will get a lot easier. Still, I think most people would agree that CSS development has a much higher barrier to entry than table based design. In an odd way, I think this is one reason why CSS based design is becoming so “popular” amongst web professionals. It allows them to differentiate themselves from the amateur “FrontPage Cowboys” and take back the web for themselves. Perhaps this is why many people see web standards as “Ivory Tower” and why many web standards advocates come across as having a sense of superiority and a zealous attitude towards web design.

    当浏览器厂商们取得一致的步调时， 用 CSS 开发站点将会容易得多。然而，我想大部分人都会同意我的观点，CSS 开发的门槛比表格的要高多了。换个说法， 我认为这也是为什么 CSS 开发设计在Web 专家们之间如此流行。这让他们把自己和那些业余的“Front-page 牛仔”们区分开来，让他们找回当年 Web 只属于自己这个小群体时的感觉。 大概这正式因此，那么多人都把 Web 标准看作不可触及的“象牙塔”， 那么多 Web 标准的鼓吹者却以狂热的态度，带着优越感去看待网页设计。

Some Things Are Just Easier with Tables（有些事情还是用表格做比较容易）

I’m sure we’ve all found ourselves writing fairly complicated CSS to do something that would be trivial using tables. Take form styling for example. It’s possible to lay out even very tricky forms using tables in just a few minutes. You can achieve similar results by floating elements with CSS, but it’s a lot more involved. |f you’re a CSS guru it’s all part of the fun. However if you’re a regular mortal and your boss is breathing down your neck because they don’t understand why their “simple form” is taking so long, it can be incredibly frustrating.

    我相信大家都曾发现，自己为了实现用表格做起来是小菜一碟的功能写了相当复杂的 CSS。比如处理表单 (form) 的外观，形状再复杂怪异的表单也能用表格轻松搞定。 你是可以用 CSS 的浮动元素实现类似的结果，但就麻烦多了。 如果你是个 CSS guru，这种麻烦也是快乐的事。可毫无疑问，如果你只是个普通人，还有个会掐住你的喉咙问你怎么做个小表单也花了这么久的老板，事情就不那么好玩了。

If you have the knowledge and patience, you can do most things using CSS that you used to do using tables. Sure it may take you longer, but you’ll get there in the end (or die trying). However there are some things which, try as you might, you just can’t seem to crack. One such thing is page footers. I regularly see posts from frustrated CSS authors trying to create page footers than “stick” to the bottom of the viewport if the content doesn’t fill the whole screen. It’s pretty easy to do using tables, but try doing this using CSS alone. Is it any wonder why web developers turn their back on CSS when even simple things are rendered so complicated when you stop using tables.

    如果你有足够的知识，又有足够的耐心，你能够用CSS实现大部分你曾用表格设计的东西。 可以肯定它会花你很长的时间，但凡事都会有个限度的(或者被打击得放弃了尝试)。更重要的是，有些事情是你无论怎么努力，还是无法实现的东西，其中一项便是页脚栏 (page footer)。我常常见到来自灰心失望的 CSS 作者的贴子， 他们试图创建那种可以粘在窗口底端的页脚栏，使即便那个窗口没伸展到整个屏幕也能保证效果。如果用到了表格，要做出这种效果简单得很， 可单独用 CSS 来做就是另一回事了。 为什么还有 Web 开发者们不愿意用 CSS？就是因为一旦不用表格，简单的事情反而变复杂了。（的确呀~~~其实我也有点不明白，为什么有些事情，表格很轻松，CSS很困难，CSS到底有多大的好？当然我也觉得表格的代码太多了，没有CSS的代码少，结构清晰）。

Overstating the Benefits（夸大收益）

There are lot’s of good reasons for throwing away tables and adopting CSS based layouts instead. However in their rush to push web standards, many people have overstated the benefits. It’s true that switching a large site to a CSS based layout can save a huge amount of bandwidth. However, for most sites, this saving would be insignificant.

    有相当多很好的理由，告诉你应丢掉表格，去适应基于 CSS 的排版。可在推动 Web标准的洪流中，许多人夸大了收益。 大的站点改用 CSS 排版确实能节省不少带宽。可对大部分的其他站点来说，收益小得可以忽略不计。

People want fast loading pages and many advocates have suggested that CSS helps accomplish this. For most sites, the “design” is spread evenly across the whole site. However with CSS based sites, the “design” is usually held in one or more external files. These files can be pretty complicated, and even for a simple site, can get big, fast. A recent site I designed uses 4 stylesheets weighing in at around 12k (albeit including formatting and comments). By using CSS you’re actually front loading the design, rather than spreading it evenly across the site. The means that the first page you hit can actually take longer to download than the equivalent table based page. Once the styles have been downloaded, they will usually be cached and not need downloading again. However the first page on a site is the one page that you really don’t want to see such a performance hit.

    人们都想要加载快速地页面，标准鼓吹者们也说 CSS 能帮你做到这一点。大多数站点的“设计”都是均匀分布在整个站点上的，但基于 CSS 的“设计”是放在一个到更多的文件中的。 这些文件会很快变得很复杂、很大，即便一个小站点也是如此。我最近设计的一个站点用了 4 个样式表，加起来有 12k 之大 (虽说包括了空白和注释)。使用 CSS其实是在先集中地载入然后再浏览，而不是把要载入的数据平均分布到整个站点各处。也就是说，相比用表格排版，首页需要花更长的时间来下载。只不过如果样式表已经下载了，它们会被缓存起来而不需要重新下载。可毕竟一个站点的首页是你最不希望载入得那么慢的一页呀。（这点我稍微看不明白。或许是自己接触真正的网页设计太少了。）

Client buy-in（招揽顾客）

The sad fact is, most clients don’t care how a site is coded. Yet for some reason web designers feel the need to “sell” web standards to their clients. One way people do this is through the carrot and stick approach. The carrot is more often than not, search engine friendliness, while the stick is accessibility.

     即便有时网页设计者们觉得把符合  Web 标准搭售给客户是有必要的，但令人遗憾的事实是，大多数的客户对站点的代码好坏并不在意。我们一般用的是胡萝卜加大棒的方式，胡萝卜是诸如对搜索引擎的友好度之类，而大棒才是网页的亲和力 (accessibility)。

It’s true that the search engines like semantic pages. It’s also a widely held belief that search engines like lean code. Building a site using CSS and web standards can definitely encourage the development of search engine friendly sites. However it’s no magic bullet. There are many table based sites out there that score very highly in the search engines. It’s equally possible to build a CSS based site that gets a terrible search engine ranking. The most important thing for high ranking is content and inbound links, not whether a site uses tables or CSS for layout.

     可是肯定的是，搜索引擎是比较喜欢语义化标记的页面，而且大家也都认为搜索引擎喜欢短小的代码，通过 CSS 和 Web 标准来建构站点可以大大增进对搜索引擎友好的站点的开发。但是，它并非灵丹妙药。许多基于表格的站点照样获得了很高的搜索引擎排名。 用 CSS 开发的站点照样也可能只获得一个很糟糕的排名。高排名的关键是内容和来自别处的链接，而不是用表格还是用 CSS 来排版。

More concerning is the number of people who try to sell web standards and especially CSS based design by playing on clients accessibility fears. There isn’t anything inherently inaccessible about table based design. As long as tables make sense when linearized, their content is easily accessible. Screen reader technology is pretty good these days, and most screen readers are proficient at handling table based sites. While it’s true that your site needs to be published to a recognised set of grammars to get a AA accessibility rating, tableless design is only a recommendation, not a requirement for the more stringent AAA rating.

    另外关于利用客户对“亲和力”这个词的敬畏来搭售 Web  标准特别基于 CSS 设计的， 其实基于表格的设计没有什么天生的亲和力缺陷，表格只要线性化了，就有意义，内容也就具有亲和力了。现时的读屏器技术已经不错，而且大部分的读屏器都能很好的支持基于表格的站点。当然你的站点的语法最好被认证通过 AA 亲和力等级，即便对更严格的 AAA 等级，不用表格设计也不过是个建议罢了，并非必备。（未能完全看懂）

One often mentioned benefit is that of supplier independence. In a world were everybody develops to a standard, it would be much easier to switch between developers. They’ll instantly understand how the site was put together and not have to trawl through somebody else’s tag soup. This is reliant on having a significant number of suppliers versed in web standards. Unfortunately this currently isn’t the case. While the number of skilled CSS developers is increasing, it’s still a relatively specialist field. Because of this, it could be seen as a relatively risky proposition for a large company to lock themselves into a style of coding when there is such a lack of skilled coders. In my experience an organisation will often have a single individual experienced enough to develop a site using CSS. For many organisation switching to web standards could actually increase their dependancy rather than decrease it.

     另一个经常提到的受益是可以让客户独立于设计提供商。在人人都依照标准开发的世界里，客户要换个开发伙伴是很容易的事情，新的开发人员可以很快明白站点的组织结构，而不需趟过先前某人的标记泥淖。但这得要大量的设计提供商都精通 Web 标准才行。 不幸的是，现在的情况并非如此。 虽然经验丰富的 CSS 开发者在增多，但这还是个相对比较专业的领域，因此，大公司要锁定在这种开发方式上还是比较有风险的——缺少熟练的开发者。我个人的经验是如果一个组织要用 CSS 开发站点， 得长期保持至少一个经验丰富的设计师才够用。 所以现在转向 Web 标准不是降低了客户对开发者的依赖，而是增加了。

Conclusion（总结）

Web standards and CSS based design are definitely the way forward. However in our rush to advocate these “new” techniques, we may end up believing our own hyperbole. Build something up enough and the reality will always fall short of our expectations. By taking a dogmatic approach we risk alienating the very people we are trying to convince.

     毫无疑问地，Web 标准和基于 CSS 的设计是未来之路。 可在我们奔向它们、鼓吹新技术的过程中，也会怀疑自己鼓吹的东西是否太夸张了。比较现实地做点东西却往往达不到我们的期望。而教条地推行这些很可能疏远了我们最应该赢得的伙伴。

Table based design will be around for a long time. To encourage developer buy-in we need to lead by example and help reduce the barriers to entry. Not create new barriers. We need to be honest and up-front about the benefits as well as the cost. Developing CSS sites can be hard and it can time consuming. In certain circumstances using tables for layout can make much more sense than CSS.

    基于表格的设计还会存在好长一段时间。要吸引开发者，我们可以用实例来教人上手，并降低门槛。更别弄出新的门槛来了。我们得诚实地正视利益和代价。 开发 CSS 站点可能比较困难、耗时，而在某些情况下用表格来排版比 CSS 有意义得多。