使用Table 布局是不明智的

使用Table 布局页面为什么是不明智的呢?不要误解认为在页面中不能使用Table,而是可以使用Table,但是尽量不要用Table 去布局页面,为什么这么说呢,因为使用Table 布局页面会使页面失去灵活性。比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用Table 布局的,那么你会崩溃的,工作量太大了。你自己可以找个页面,用Table 布局出来,然后变换板块和风格,你就会体会到Table 布局的不灵活性,这是为什么呢,因为Table 的诞生是为存储数据用的,功能和Execel 差不多,不是用来布局用的,只不过后来大家发现用Table 可以把想放的页面元素,比如图片,放到任何自己想放的地方,且做出来的页面可以兼容多种浏览器,于是Table 就承担起了布局页面的重担,这一做就是好几年… …直到Web2.0 时代的到来,Table 才从布局页面的工作中逐渐解脱,专心的去存储数据

既然Table 是为存储数据诞生的,那谁的诞生是为了页面布局呢?答案就是: DIV。

DIV 就是为布局页面而诞生的,只不过一直不被人认同,原因就是DIV去布局页面需要CSS 的配合,使用比较繁琐,还不如Table 拖拖拽拽页面就布局OK 了,感觉还不如Table 方便,从而DIV 被人们放置在一个无人问津的昏暗角落里,暗暗的等待着伯乐的出现,直到2003 年美国加州Scott Design 公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲,使DIV 看到了阳光。

网上有一篇文章,转过来,文章着重介绍DIV 三点优势,也许看完文章后,就像社区元老heflyaway 说的感觉作者比较迷恋Table,每篇文章都不可避免的带有个人色彩,而转出来的目的,其实就是想给大家降降DIV+CSS 的温度,免得“走火入魔”,认为DIV+CSS是为万能的,什么都可以做。如果想学好CSS 布局页面,就要从多个方面看它,好了,不多说了。

下面是作者对CSS 布局页面的三点优势及理解:
1、内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS 来处理。生成的HTML 文件代码精简,更小打开更快。

2、改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS 文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。

3、搜索引擎更友好,排名更容易靠前。

第一点、内容和形式分离网页前台只需要显示内容就行,形式上的美工交给CSS 来处理。生成的HTML 文件代码精简,更小打开更快。
这个是DIV+CSS 技术最显著的特点,也是CSS 存在的根源。完全的颠覆现在传统(table)网页设计的技术。所有现在用table 制作的内容,都可以用CSS 来解决掉,而且解决的更完美,更强大。不需要大家再表格套表格,让生成的网页文件大小更精简,更小。table 时代,一个页面表格达到10 个以上是非常普遍的事情,但是现在用DIV+CSS,一个table 都可以不用,就完全达到之前的效果,这就直接导致网页文件大小比使用table时减少50%-80%,更节约各位站长的硬盘空间,访问者打开网页时更快,而且用div+CSS时,不像以往使用table 时,必须把全部table 读取完了才显示页面内容,现在是可以读一个div 就显示一个效果,大家打开网页不用等。好处真是明显而强大。这个优点的确是显著的,凡是使用传统table 建的网页,内容多的话,有时候达到30K左右都有可能,文件打了打开时,肯定就有零点几秒的延迟。使用DIV+CSS,你前台打开看到的全是直接内容,CSS 文件都是导入链接的,是另一个文件,根本和HTML 文件大小没关系,这种生成的HTML 文件,一个也就10K 左右大小。

第二点,改版网站更简单容易了
不用重新设计排版网页,甚至于不用动原网站的任何HTML 和程序页面,只需要改动CSS 文件就完成了所有改版。

DIV+CSS 对于门户网站来说改版就像换件衣服一样简单容易,改版时,不用改动全站HTML 页面,只需要重新写CSS,再用新CSS 覆盖以前的CSS 就可以实现改版了。

第三点,搜索引擎更友好,确实能够对SEO 起到一定的帮助。
通过DIV+CSS 对网页的布局,可以让一些重要的链接、文字信息,优先让搜索引擎蜘蛛爬取。这对于SEO 也有帮助。

综上所述,个人感觉DIV+CSS 不能太迷信它的很好很强大,它作为制作网页,美化网页的一个重要辅助是很强大方便的。可以弥补table 制作框架和表格时的很多不足和美工上的缺点,但是完全只用它来做,太费时费力,。

还需要再说明一下,真正厉害的人物是DIV、Table、CSS 用得恰到好处,他们三个各做各的事情,DIV 布局页面,Table 存储数据,CSS 给页面穿衣服!