Freewind @ Thoughtworks scala java javascript dart 工具 编程实践 月结 math python english [comments admin] [feed]

(2011-09-13) 关于页面布局,用div还是table

广告: 云梯:翻墙vpn (省10元) 土行孙:科研用户翻墙http proxy (有优惠)

有时候追求技术的纯粹性,是一件费时费力的事情,特别是某些技术在某些方面设计得不够好的时候。比如说,页面布局,是用div+css,还是用table?

记得上大学刚学做网页时,好像css用得很少,那时候布局基本上就一个选择:table。利用table的单元格td,将页面分成几块,里面再套table。

这种方式挺古老,但是很好用:比如,你把table的宽设为100%,再将其中某些列的宽度设个固定值,则其它没有设值的,就会自动占满剩余空间。每一行的各单元格,总是拥有相同的高度。在一个单元格内,可以方便的设置其align,即里面的内容是靠左靠右,还是靠上靠下。我们可以很轻松地利用它做出一些复杂的页面布局,虽然用的标签稍有点多。(table > tr > td )

大约是毕业那会儿,突然css流行起来了。人们仿佛一夜之间,发现了css的强大,于是那种复杂的效果都出来了,网页也越来越漂亮。

有人说,我们做网页时,html是用来放数据的,而css是用来放样式的,不能混在一起。html中的标签是有语义的,比如table,它表示的是一个数据表格,是用来放数据的,而不是布局的。要布局,一定要用div+css这种方式,这才是纯粹的css用法。而且,div+css还有其它的好处,比如你要更改页面,把这一块放在那一块的前面,只需要改改css即可,而不用动html,这多好。

好吧,我承认这的确很有吸引力,于是开始学着用div+css来布局。然而,很快发现,这东西怎么这么难以理解?要理解div的定位方式absolute, relative, static,要理解它的流布局,以及方向float,还有换行clear,还有margin的设置,还要解决IE6的某些bug,以前不同浏览器上的显示差异。我只想做一个简单的左右两列布局,左列固定右列自动占满剩余空间,并且两列等高。这用table一分钟完成的任务,用div搞了一天都没搞定。

上网搜索一下,发现这的确是个大问题,无数的人在问怎么写。当然也发现了一些解决方案:比如一些网站,列出了一些常见布局,直接下载它写好的css。还有就是960.gs/blueprint等,居然是专门的布局框架,只需要用它定义好的一些css类,就可以方便地做出布局。(这在table时代是没有的,可以说是制造问题再解决它)

我很认真地学习了它们,并且在自己的项目中使用了960.gs,效果还不错。但是,总是感觉手脚被绑着。比如,它推荐的布局方式是宽960px,分成12列(可调整),这表明我无法弄一个占满页面100%宽度的布局出来。而且,把页面分成12列,大多数时候够用,但是一旦需要一些不规则的宽度,那就相当的头疼。但是我一直认同那种观点:布局应该是css的事情,这样比较纯粹。

直到前某几天,突然想做一个很简单的网站,不想再拷960gs过来,就偷个懒用table吧。当我花了几分钟把布局做好之后,我愣住了--竟然这么轻松!之前用div+css费老劲做出来的布局,用table两下子搞定了!

仔细想想,之前用960gs那么麻烦的布局,最终也只能得到一个近似table的效果。而且难度、复杂度远高于用table,可维护性反而更差(因为太复杂)。以前期望的优点没有得到,反而更麻烦了。这样做,唯一达到的效果就是:看,我的布局全是div+css搞定的,没有用table!牛B吧!

之所以会产生这样的情况,是因为css关于布局这一块,没有设计好。使用div进行定位、大小控制、缩放方面,比较麻烦,而且各浏览器的实现情况不一样,容易产生不同的布局效果。如果它设计得更好一些的话,我想我们是可以抛开table,大胆使用div+css布局。

在当前的现实情况下,某些时候使用table方便,某些时候使用div+css方便。对于同一个网页,有多种显示效果的(比如博客),应该尽量使用div+css,因为虽然麻烦一些,但可以通过css定义出产生非常自由的效果。而对于普通网站,不妨直接使用table,因为简单方便,容易控制。

写了这么多,只是想强调:大多数的技术都不够完美,都有自己擅长和不擅长的地方。如果你不去思考,只是为了用而用,会很辛苦。更不能因为想用某一种技术,就盲目地认为它是最好的,其它的看都没看就否认了。我们的选择标准,应该是:简单、方便、快捷,稳定。至于到底用了什么技术,一点也不重要。

comments powered by Disqus