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