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

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

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

您还能够参考如下xHTML+CSS相关教程及资源:
《43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程》
《CSS代码命名惯例语义化的方法》
《简洁纯净的CSS表单设计实例》
《为你的有序列表添加个性样式》

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属性。这样无形中增长了本身的工做量，代码会稍微变多了一些。代码变多意味着什么？意味着网站的流量在浪费、增长更多的产生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*/

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表单或其它网页布局的话，如今是时候改变一下你的代码了。让你的工做更轻松些吧！

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