dl dt 对比 tr td

2024-06-15 03:16| 来源: 网络整理| 查看: 265

dl dt 与 tr td的对比

过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页，但是这样做会遇到一个比较麻烦的问题就是，后期调试和维护会相当的困难。事实上，使用HTML的dl、dt、dd标签会让你节省更多的代码，更能让代码符合内容的语义化。当然，table也有它的用武之地，那就是很大数据量的数据表，但是小型的数据列表和表单完全可以不使用table

一、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属性。这样无形中增加了自己的工作量，代码会稍微变多了一些

二、dl数据列表

让我们来看看使用了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; } 三、总结

较少的列表可以使用dl 来完成较多的推荐使用table

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章