DIV+CSS的布局格式不是一天两天了,可别被这流行的趋势冲昏了头脑,在很多时候table式的布局是相当有用的,这并不是复古,也不是不懂进步,至少现在,还不能完全把它抛到脑后。在网页布局里面,感觉有两个地方用起表格来屡试不爽。
1.100%宽,部分自适应宽度式的页面布局
这种页面布局方式是现在页面布局里面用得最多的,像Google Reader,blogger,维基百科,Gmail,QQ邮箱等等都是这种方式的布局。这种布局的好处就在于最大化利用屏幕空间展示更多信息给用户,在此同时,固定操作栏的宽度以保证操作的可用性。
那么,table给这种页面布局带来什么好处呢,DIV为什么不能完成这种布局呢?首先,DIV是可以完成的,不过很麻烦,而利用table 就方便得多,区别在于两者在宽度自适应和100%宽的实现上有差异。
- DIV左右布局中,左部分固定为200px,剩余部分宽度自适应,这就很难办,如果设置右半部分DIV的宽度为100%的话,自身宽度会变为整个屏幕宽度,并且自己撑开位于左半部分下方,要完成布局,需要用到Javascript。
- 而table并不会发生这种情况,如果table分作左右两列,左列的td宽度固定为200px,当把整个table的宽度设置为100%时,右边的td部分自动自适应全屏宽,完成布局的目的。不管是可以在横向的宽度自适应上利用table,竖向的高度自适应也能用上。
NOTE:图上传不了,搞得云里雾里的。
2.多行多列对齐排列
这方面的布局经常被用在多列列表布局时,可能会想用li标准的列表先呈现纵向列表,或者直接利用div充当每一横行,然后再分割每个li或者div元素,这样的方式不是很好,因为每个横行里尼可能要用多个span标签或者div:float的标签去划分,如果是用了span,宽度和高度由于它是个行内元素无法调整,只能用padding或者margin调整。如果是利用float的div,还需要用另一个空的div去clear。当然,如果肯花时间的话,可以把所有浏览器都过一遍,当遇到那个已经死掉的IE6时,也需要多花些功夫。
如果把时间浪费在调试上,还不如利用table去简化它,table在各个浏览器中的实现都是一样的(除了td的行高)。而且天生据来的列和行的划分,使得对齐元素是小菜一碟。
DIV+CSS的流行并不是用来完全取代table布局的,它的存在带来了很多地位的好处,在这里就不一一列举了。请勿忘记table,而是要利用他们双方的优势,节约开发时间和提高开发效率。DIV+CSS不是万能的。