dl,dt,dd标签与table表格实现数据列表的比较(2)

文章来源于国外翻译，感谢作者专注前端开发给我们带来经精彩的文章！

设计教程/前端设计/前端设计2009-09-14

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

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*/
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、dt、dd的实例中你应该能明显的看出它们的代码更简洁更平滑更符合语义化了吧。

看到这里，如果你还在坚持使用table标签来完成web表单或其它网页布局的话，现在是时候改变一下你的代码了。让你的工作更轻松些吧！

英文原文:How To Use DL, DT And DD HTML Tags To List Data vs Table List Data

共2页:
<
1
2
>

情非得已