过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难。现在,越来越多的前端开发er们开始使用xhtml+css替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用html的dl、dt、dd标签会让你节省更多的代码,更能让代码符合内容的语义化。当然,table也有它的用武之地,那就是很大数据量的数据表,但是小型的数据列表和表单完全可以不使用table哦!
如果你仍然在使用传统table来创建数据列表,那么请继续往下看,看看使用html的dl、dt、dd标签是如何让你的工作更轻松…
传统table的数据列表代码如下所示。我们要为每行添加tr标签,然后还要在其中为标题和数据各加一个td标签,由于标签都是td,想要添加样式的话还要为每个td添加class属性。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <table> <tbody> <tr> <td class=title>name:</td> <td class=text>squall li</td> </tr> <tr> <td class=title>age:</td> <td class=text>23</td> </tr> <tr> <td class=title>gender:</td> <td class=text>male</td> </tr> <tr> <td class=title>day of birth:</td> <td class=text>26th may 1986</td> </tr> </tbody> </table>
|