dl dt 对比 tr td

最新推荐文章于 2025-03-21 21:35:34 发布

韩冬_Yeah

最新推荐文章于 2025-03-21 21:35:34 发布

阅读量1.1k

点赞数 1

分类专栏：前端学习过程中的思考

本文链接：https://blog.youkuaiyun.com/qq_40128682/article/details/89950391

版权

前端学习过程中的思考专栏收录该内容

6 篇文章

订阅专栏

dl dt 与 tr td的对比

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

一、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 { 
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(自定义描述)标签来容纳数据中的标题和内容。

<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*/ 
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; 
}