CSS: 簡單行列用table還是dl,dt,dd?

如果表格不複雜，只是幾行幾列，還是採用DL.DT.DD，如果是複雜資料顯示，例如註冊個人資訊列表，還是建議使用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代碼：

/*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 {  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