标准dl,dt,dd标签抛弃table列表||dl,dt,dd标签 VS 传统table实现数据列表

阅读更多

 

标准dl,dt,dd标签抛弃table列表

dl,dt,dd标签 VS 传统table实现数据列表

 

　　过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页，但是这样做会遇到一个比较麻烦的问题就是，后期调试和维护会相当的困 难。现在，越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局，不但让网站降低了开发和维护的成本，而且代 码也更语义化了。但是，并不是说table从此消失了，它仍然被很多人用来作为网页中数据表现的必需品，比如个人信息数据列表等。事实上，使用HTML的 dl、dt、dd标签会让你节省更多的代码，更能让代码符合内容的语义化。当然，table也有它的用武之地，那就是很大数据量的数据表，但是小型的数据 列表和表单完全可以不使用table哦！

　　如果你仍然在使用传统table来创建数据列表，那么请继续往下看，看看使用HTML的dl、 dt、dd标签是如何让你的工作更轻松…

　　table数据列表

　　传统table的数据列表代码如下所示。我们要为每行添 加tr标签，然后还要在其中为标题和数据各加一个td标签，由于标签都是td，想要添加样式的话还要为每个td添加class属性。

　
　　　
　　　　　
　　　　　
　　　
　　　
　　　　　
　　　　　
　　　
　　　
　　 　　　
　　　　　
　　　
　　　
　 　　　　
　　　　　
　　　
　

Name:	Squall Li
Age:	23
Gender:	Male
Day of Birth:	26th May 1986

　　以下是相应的CSS代码，我们为之前在HTML中声明的class 添加样式。

/*TABLE LIST DATA*/
table {
　 margin-bottom:50px;
}

table tr .title {
　 background:#5f9be3;
　 color:#fff;
　 font-weight:bold;
　 padding:5px;
　 width:100px;
}

table tr .text {
　 padding-left:10px;
}

　　从以上代码可以看出，使用table标签，如果想使 用CSS来对内容进行修饰或修改的话，需要为td单元格添加一些相应的class属性。这样无形中增加了自己的工作量，代码会稍微变多了一些。代码变多意 味着什么？意味着网站的流量在浪费、增加更多的产生Bug的几率以及后期维护更困难。

　　dl、dt、dd数据列表

　　现在 让我们来看看使用了HTML dl、dt、dd标签的数据列表。首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构，然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。

　

Name:

　

Squall Li

　

Age:

　

23

　

Gender:

　

Male

　

Day of Birth:

　

26th May 1986

　　而在css代码中，我们仅需让dt和dd向左浮动即可。

　 　/*DL, DT, DD TAGS LIST DATA*/

dl {
　 margin-bottom:50px;
}

dl dt {
　 background:#5f9be3;
　 color:#fff;
　 float:left;
　 font-weight:bold;
　 margin-right:10px;
　 padding:5px;
　 width:100px;
}

dl dd {
　 margin:2px 0;
　 padding:5px 0;
}

 

From

http://blog.bingo929.com/dl-dt-dd-html-vs-table-list-data.html

 

O

 

O

 

O

=

O

 

O

 

O