web标准推出时,讨论了很多使用<div>替代旧式的<table>布局。有些极端的人会提倡页面中不要有<table>,还有很多人去写各种各样使用非table标签来表现表格样式的东西。这些人把web标准发挥到了极致,可是却忽略了web标准的本意。
web标准其中有很大部分都是在说结构、样式、数据的分离,页面代码的结构要有层次,页面代码能反映内容的逻辑关系,代码的易读性。
《网站重构》一书分析了使用DIV+CSS布局优于TABLE布局的原因,一是使用DIV+CSS能更好的表现页面结构,二是使用DIV+CSS使页面代码更易读,且可以减少页面文件大小。书中提到使用DIV+CSS布局的页面比使用table布局的页面,页面大小可以减少30%。
其实这个真正实践中可能达不到这个数字,这句话精确的应该这样说:一个良好的使用DIV+CSS布局的网站,比一个糟糕的使用table的网站,页面文件的大小总量可以减少30%左右。
做到这个良好实在是不容易,要清楚内容的逻辑关系、精通CSS+XHTML、做到样式共用的极大化。
刻意使用DIV+CSS来做表格实际上是很辛苦的,如果加上CSS那部分的话,其实代码并不算简洁,结构也得不到太大的改善。而且为了做到通用性,往往还需要添加一些CSShack,无形中使得代码变得更加复杂。
在表现表格式数据的时候,使用表格会事半功倍。也能节约很多时间。
这两天觉得在做2列多行的表单的时候,适用表格更加方便。特别是表现宽度不一定、表头右对齐、输入框左对齐的时候,使用表格会快很多。而且XHTML对表格的标签也有一些优化,添加了一些结构性的标签如<th>,这样使用CSS定义的时候也可以省很多事,不用给每个<td>定义CLASS,可以直接用th来定义表头的样式,页面代码看起来也很干净。
<table>还有一个长项,就是单元格内的内容垂直居中,特别是外围容器的高度已知,单元格内的内容高度不定时,垂直居中显得格外神奇。目前的版本使用DIV+CSS来实现此功能恐怕不得不借助javascript了。
与页面相关的工种(无论是页面制作还是页面绑定),如果不会手写table,不知道table系列标签的用法,都不能算合格,至少在基本功上还是需要下下功夫的。
遵循web标准的核心“结构、样式、数据的分离”,正确的使用table和div!