网页设计,别片面追求tableless

| 20 Comments | 0 TrackBacks | WebBlog Articles

今天无意中看了一篇文章,作者显然是CSS+Div的崇拜者,对 含有 table 的网页特别不屑一顾,甚至说了 tableless 是 Web2.0的重要标志,含table 的网页就是上个世纪的老古董之类的话:)

恩,tableless 是 Web2.0的重要标志这个我倒不反对,我理想中的网页在脱掉CSS外衣后应该有很好的可读性,这一点 tableless 的确值得推广,网页设计我不专业,但是我也尽量让自己的页面在逻辑上可读性高一点,CSS+ DIV 的确是个好主意。

但是是不是要把 table 一秆子打死呢? 我觉得到也未必。table还是必要的。只要不影响可读性,table 依然可以用,并不是什么上个世纪的老古董之类。
如果单纯为了追求 TableLess 所谓的Web2.0而不使用table而用 DIV +大量的CSS来嵌套模拟的话,似乎就有点钻牛角的感觉了:)
只要网页中不使用 table 来定义宽度,颜色等应该用CSS定义的东西,而table只用来做单纯的"Table"就可以了:)
就象这样:
原来的代码是这样的

<table align="center" border="1" bordercolor="color1" cellpadding="x" cellspacing="y" height="xxx" width="xxx"> <tr> <td align="center" background="xxxx" bgcolor="xxx" width="xxx"><b>状态</b></td> <td align="center" background="xxxx" bgcolor="xxxx" width="*"><b>主 题</b></td> <td align="center" background="xxx" bgcolor="xxx" width="xx"><b>作 者</b></td> <td align="center" background="xxx" bgcolor="xx" width="xx"><b>回复</b></td> <td align="center" background="xxxx" bgcolor="xx" width="xx"><b> 最后更新</b></td> </tr> </table>

改后的代码是这样的


<table id="posttable">
<tr>
<td id="state">状态</td>
<td id="topic">主题</td>
<td id="author">作 者</td>
<td id="reply">回复</td>
<td id="last_reply_time">最后更新</td>
</tr>
</table>

加上针对 table 的 CSS

#posttable { .... } #state ,#topic,#author,#reply,#last_reply_time {.....}

这样就足够了:) 也满足了可读性 :P 而不必要去为了追求Tableless 而去花大量的时间重写 :)

PS: 一家之谈。。。

引用通告|TrackBacks (0)

本日志的TrackBack URL: http://easun.org/cgi-bin/mtos/tb_mt_41.pl/136.

本文相关评论|Comments (20)

如果把后面那段代码中的tr改成ul,td改成li,那table和div根本就是一样了嘛。

这种table其实在可读性上没什么问题,最怕的是那种连html代码都不学,拿个dream weaver就来做网页的人,不是不写id就是id名称毫无意义,代码结构上看起来就比较痛苦了。

不过说真的,我没用table做过网页,倒不是说讨厌table,问题是我开始学习html的时候已经很少会有介绍用table设计网页的资料可供参考了。

@leavic:
无序列表的 inline 方式在对齐上需要对各个浏览器进行兼容性处理,另外在 脱掉CSS外衣 后不是一行:)
不过个人看法不同,在有的情况下,还是无序列表看起来好看点:)

PS: DW还好点,最可怕就是用M$的网页工具写的网页。呵呵 :P

你不说我都忘了,frontpage确实更恐怖

frontpage曾经被偶们老师一顿狂批的,嘿嘿~~~
记事本本,随手可得,随开随用,嘿嘿~~~

frontpage是专业的网页垃圾制造者。哈哈:)

老哥是用的虾米,自助记事本?~~嘿嘿~~~

你说对了,我现在写网页一直使用 “记事本”:)
不过近来,我似乎开始用 MT 的后台直接写了,连“记事本”都省略了,呵呵

用记事本很自由,唯一的不便就是不能所见即所得~~嘿嘿~~~
MT的后台……俄……貌似也是个文本框?忘了~~~嘿嘿~~

对,就是那个文本框,可以设定生成网页的地址,很方便吧。哈哈

嘿嘿……把MT后台当简化版网页编辑器……貌似还真是另类的用法~~~:P

呵呵,原因很简单,免去了 ftp 的麻烦,而且编码是 utf-8 :)

偷懒 and 实用是第一生产力啊~~~嘿嘿~~~:P

偷懒 and 实用是第一生产力啊~~~嘿嘿~~~:P
越来越懒是真话:)

懒……是人之本性,嘎嘎嘎~~~
睡懒觉最舒服了的~~~溜~

懒……是人之本性,嘎嘎嘎~~~ 睡懒觉最舒服了的~~~溜~
nod :) 睡觉最舒服了,哈哈。

嗯嗯……以后问候就改成“今天,你睡懒觉了吗”好了~~嘿嘿~~~
PS:貌似偶一般不太在乎什么时候睡,但很在乎什么时候起……SO 能一觉睡到中午十一点是最幸福的事……挖哈哈哈~~~^0^

我睡到12点了。呵呵。

狠有前途……看来懒觉尚未成功,偶还需要努力,嘎嘎嘎嘎~~~
俄……偶已经值了两个周末班了,上个星期又替同事顶了一个周末班,本来说好这个星期她还我的……结果……人算不如天算,她出差了。。。偶只好继续值周末班……55555~~~偶的懒觉啊~~~

晕啊。等凑在一起了,好好休息几天?

几天……貌似没戏……能有两天就满足了,嘿嘿~~偶现在是盼星星盼月亮盼着周末的到来,挖哈哈哈~~~
争取达到老哥的标准,12点,嘿嘿~~~ ^0^

发表该文评论|Leave a comment

最近发表|Recent Entries

[MT Tips]如何让某个日志在Blog首页固顶?

貌似最简单的办法就是修改日期到一个很遥远的日期,比如 AnySQL 那样:) 但是带来的问题的很多,比如导致Feed阅读器犯糊涂或者影响搜索引擎的收录等等,更糟糕的是对于 日志来说,最主要的就是发布日期。也许大家都已经发现了,我的主页模仿 MT Forum 搞了一个固顶日志(也是为了风格统一)出来,这个固顶日志是后台通过自己设置实现的。是怎么设置的。答案是利用 <mt:Entries> 的tags 功能。 具体概念代码如下:<mt:Entries tag="@top" sort_by="authored_on" sort_order="descend" limit="1" blog_ids="1,5"> dosthing.....</mt:Entries> 这样我们只要要在固定的主题 加上…

北京 Perl Workshop 2008 网站开张 - 接受大会注册,演讲报名

网站开张了, 地址是 http://conference.perlchina.org/bjpw2008/ 由 PerlChina 和 Postgresql China 合办,2008 年 11 月 8 号举行的 Beijing Perl Workshop 是一个免费的 Perl 交流会,向所有对…

好玩的 MT Forum 的按作者归档

Perl Forum 用 MT4 的 MT Forum 的功能搭建起来了好几天了,一直没有发现什么意外,今天突然发现 按作者按月归档 貌似找完了整个发布完的 Perl Forum 也没有找到 link ,查看作者个人信息貌似也没有 link ? 真是好玩的 归档方式。从后台看,给每个用户(作者)都建立了按月的归档页面,估计是为了便于各用户归档自己的文章吧? 后台抓图如下:…