vicwity's blog

四月 2007 - 博客

  • table与div的困惑

    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!

  • UI也应该懂点程序

    今天忽然觉得称职的UI也应该懂点程序的,不要求会写代码,但至少知道可以怎样实现某些功能。

    特别是有较多的交互操作、逻辑关系比较复杂时。如果页面流程没有设计好,会给程序员带来很大的麻烦。也会造成不好的用户体验。

    这次就有点失败,设计页面流程时有些问题考虑的太简单了。结果给别人带来了一些麻烦。

    设计一个好看的东西不是很难,设计一个大多数人觉得好用的东西就太难了。

    需要学的东西太多了。

  • 眼镜与演唱会

     

    “戴XX眼镜,看张学友演唱会”觉得他的这句广告词挺逗的。

更多内容