用规范dl,dt,dd标签丢弃table列表
日期：2014-01-09 浏览次数：20849 次
过去有很多网页设计师喜欢将他们的网页效果图用table规划实现成网页，但是这样做会遇到一个比较麻烦的问题就是，后期调试和维护会相当的困难。如今，越来越多的前端开发er们开始使用xHTML+CSS替代最后的table规划完成网页的全体规划，不但让网站降低了开发和维护的成本，而且代码也更语义化了。但是，并不是说table从此消逝了，它仍然被很多人用来作为网页中数据表现的必需品，比如团体信息数据列表等。理想上，使用HTML的dl、dt、dd标签会让你节省更多的代码，更能让代码符合内容的语义化。当然，table也有它的用武之地，那就是很大数据量的数据表，但是小型的数据列表和表单完全可以不使用table哦！
如果你仍然在使用传统table来创建数据列表，那么请继续往下看，看看使用HTML的dl、dt、dd标签是如何让你的任务更轻松…
table数据列表
传统table的数据列表代码如下所示。我们要为每行添加tr标签，然后还要在其中为标题和数据各加一个td标签，由于标签都是td，想要添加款式的话还要为每个td添加class属性。
| <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> |
以下是相应的CSS代码，我们为之前在HTML中声明的class添加款式。
|
/*TABLE LIST DATA*/ table tr .title { table tr .text { |
从以上代码可以看出，使用table标签，如果想使用CSS来对内容进行修饰或修正的话，需求为td单元格添加一些相应的class属性。这样无形中添加了本人的任务量，代码会稍微变多了一些。代码变多意味着什么？意味着网站的流量在浪费、添加更多的产生Bug的几率以及后期维护更困难。
dl、dt、dd数据列表
如今让我们来看看使用了HTML dl、dt、dd标签的数据列表。首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构，然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。
| <dl> <dt>Name: </dt> <dd>Squall Li</dd> <dt>Age: </dt> <dd>23</dd> <dt>Gender: </dt> <dd>Male</dd> <dt>Day of Birth:</dt> <dd>26th May 1986</dd> </dl> |
而在css代码中，我们仅需让dt和dd向左浮动即可。
/*DL, DT, DD TAGS LIST DATA*/
