新Web设计师时代 看DIV+CSS创造神话

作为一个身处2008年末的Web设计师，你是否好意思承认自己的代码中使用了Table，如果是，你是一个有勇气的人，Web设计是个奇怪的行业，你可以将自己的网站设计得像晚报的分类广告，或者楼道里的开锁广告，但千万别让人知道你使用了Table，在你的源代码中发现Table就像一个销售被人掀起裤脚发现穿了白袜子一样。

Table是如此丑陋，臃肿，哪怕只显示一段简单的内容，你也需要<table><tr><td>这三个基本的标签，每个标签里面还要加上一堆乱七八糟的属性，不像<div>，既简单，又整洁，又时尚，它和CSS珠联璧合，琴瑟和谐，它们构成最完美的Box模型，他们象现实中的箱子，你把东西放进去，然后，很自由地对他们进行排列，厌烦了一种布局，没关系，简单地改动一下CSS定义，一种全新的布局便诞生了；不象Table，Table像食堂里的餐具柜，一排排，一列列，土里土气，油腻腻的，象我们的父辈，邋遢，什么都往家里拿，胡乱堆在角落里，如果Div是小资，Table就是老三届，他们不属于这个时代。

也就是近几年的事，至多不过三五年，W3C是一个人人都认为重要但人人都不喜欢的组织，他们的官方网站十分丑陋，我敢说平生没见过这么丑陋的网站，但他们的网站是为数不多的可以通过全部W3C标准验证的网站，这意味着，他们的网站在语法上，在结构上，在可访问性上是完美的，虽然依旧十分丑陋。不过这是笑谈，W3C非常重要，否则微软会把全体Web开发工程师带到万劫不复的境地，还好，Netscape死后，涅磐出Firefox，而Opera在Firefox横空出世之后虽然没得到任何好处，至少得到了精神上的支持，看到没，终于有大哥出来收拾你。乔布斯复出后，苹果重返昔日的光芒，这时人们才知道世界上还有一个叫做Safari的浏览器，所有这一切加在一起，让W3C真正有了存在的必要。

W3C说，Table可以用来容纳文字，格式文字，图片，链接，表单，以及其它Table。..但是，Table不应该单纯用来做网页布局（Tables should not be used purely as a means to layout document content），理由是，当Web被非可视化设备渲染的时候，Table会出现问题，他们指定是屏幕阅读器以及盲文浏览器，另外，Table在大型显示设备上会强迫用户左右滚动，因此，Web设计者应该使用CSS而不是Table。参见W3CHTML4.01关于Table的定义。W3C说这段话的时候，是1999年12月24日，那时尽管CSS早已诞生，但并没有多少人使用，最初的Web像一个在线版的文档，并没有成为现在这样的平台，不需要过多过多地考虑布局问题，随着互联网第一次泡沫的形成，涌现出大量的门户网站，门户网站是Table布局的始作俑者，因为他们的首页比一整份报纸的所有版面拼接在一起还复杂，Table在这方面十分顺手，结合colspan和rolspan，你几乎能够实现任何复杂的版面。

 

这种布局风格在2000年代初，一直到中期仍然十分流行，尤其国内，在大为美的潜意识下，人们把所有能塞到一个页面的东西都塞进了首页，Table就像一个旧时代的管家，把所有东西虽不能井井有序，但至少是一样不少地编排起来。然而这样的Web终于到了让人厌恶的地步，随着搜索，RSS订阅，以及以博客为代表的个性化Web的出现，人们有更多渠道获得信息，而不必去访问那几个让人几乎要晕过去的门户的首页，于是出现了一种清新的，轻量的Web风，使用更简单的布局，更明快的配色，大图标，大Banner，以及更容易阅读的大字体，同时，在这个时候，CSS已经非常成熟，而Firefox，Opera，Safari为代表的浏览器，在遵守W3C标准方面要远远好过IE，人们终于认识到CSS的威力。因为CSS在布局上，其核心是一个Box模型，人们必须为CSS找一个可以依附的容器对象。

Div成为幸运者一方面因为它天生就是Box的最佳原型，在语义上，Div代表页面的一个区域，在外形上，它四四方方，更重要的是，它不像<P>或<a>那样事先已经被赋予特殊的语义（虽然它们也能用于Box模型）；另一方面，则出于人们对Table统治一个臃肿时代的憎恶，一个时代的结束，继任者都会努力抹去旧时代的痕迹，那些旧时代的象征或代表的命运多半如此，人们并不是简单地忘却它们，而是断然划清界限。

Table的一切不公平待遇就此开始。为什么说不公平，W3C不建议Table布局的时候，只说应使用CSS代替，这是什么意思，Table不支持CSS吗？当然支持，而且，由于Table作为老牌的HTML对象，它的地位曾如此重要，任何浏览器都对Table提供了最完美的支持，包括CSS支持。当人们拥抱Div的时候，似乎忘记了Table也是Box，而且是一个拥有多个内格的Box，Table作为一个整体，和Div在Box模型方面没有任何区别，而它的内格，除了Margin之外，仍然是一个Box，内格不含Margin概念这是应该理解的。Div很优秀这不必说，然而当人们说Div+CSS的时候，似乎暗示着Table无法CSS，这是天大的误会。

Div支持的所有CSS属性，Table全部支持，事实上，在Div大红大紫之前，那些Div的早期采用者曾信心不足地表示，Table能做到，Div都能，而他们也为自己的话付出了代价，企图在Div中实现垂直居中的人明白我的意思，企图在IE6中不经CSSHack而实现100%Div布局的人更明白我的意思。100%Height问题，几个Div之间的宽度自适应问题，相信任何从事Div+CSS设计的人会遇到。Table在这方面的优势并不是因为它本身多么优秀，而是因为它老牌，没有浏览器敢忽视，也因为它的特性原本如此，人们发明表格，是因为希望数据显示得整齐，就这么简单。

 

然而，为什么Table后来背上那么多的恶名？Div拥护者对Table的责难不外乎以下几条。

代码臃肿：你至少需要写下<table><tr><td>这三个标签之后，才能开始真正的内容，另外，Table的各种标签中还包含了复杂的属性定义，而Div只需<div>一个标签。

页面渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染。

不利于搜索引擎优化：搜索引擎喜欢内容与修饰分开。

可访问性差：屏幕朗读软件和盲文浏览器无法很好地理解Table中的内容。

不够语义（Semantic）：我们需要语义的Web。

第1条：代码臃肿

首先，Table里面唯一无法用CSS定义的属性只有Cellspacing，Cellpadding几个，其它属性都可以并且应当使用CSS，这样，剩下的，就是<table><tr><td>和<div>的对决，我相信一个动辄几十K大小的网页，即使使用了几十个Table，因此多出来的代码也可以忽略不计，那些埋怨Table代码臃肿的人其实该检查自己的编码习惯，能将Table写得十分臃肿的人，写Div相比也未必会简洁到哪里。

第2条：页面渲染性能问题

我使用一台2004年的笔记本电脑，1.6G的CPU与1G内存，这种配置下，看不出Table布局和Div布局在页面渲染上有任何速度差别，其实这点差别即使有，相对网络本身的延迟也可以忽略。

第3条：不利于搜索引擎优化

如果你尽可能使用CSS而不是Table的属性，前面说了，产生的代码和Div的差别也不会很大，搜索引擎会歧视<table>标签吗，这种说法的依据我至今并没有找到。

第4条：可访问性差

这是Table固有的缺陷，不过多数Div+CSS的拥趸似乎并不是基于这个原因才排斥Table。

第5条：不够语义

语义Web的含义要深远得多，并不是仅仅在Table和Div上纠缠，即使W3C，也并没有规定Table只能用来显示表格数据，很多在Table的语义上进行纠缠的人，其实不妨再等等HTML5，那才是真正的语义。

本文的目的不是让你丢弃Div投身Table，相反，如果Div能满足你的设计需要，Div仍是首选，但没必要避讳Table，否则会走入另外一个极端。很多使用Div无法简单实现的设计，仍可以使用Table，当然，不管使用什么，都应该用CSS将内容与修饰分离。Div+CSS和Table+CSS都是合法的设计，谁更简单就用谁。根据我的经验，当你能预见你的内容的格式，对你即将加入的内容有能力完全控制其显示格式时，应当使用Div+CSS；当你即将加入的内容是不固定的，你无法预见其格式，如果不想让页面坍塌，使用Table+CSS是一种保险的做法。

本文来源：COMSHARPCMS作者：35公里