用標準dl,dt,dd標籤拋棄table列表_HTML/Xhtml_網頁製作

現在，越來越多的前端開發er開始使用xHTML CSS取代最初的table佈局來完成網頁的整體佈局，不僅讓網站降低了開發和維護的成本，而且程式碼也更語義化了。但是，並不是說table從此消失了，它仍然被許多人用來作為網頁中資料表現的必需品，例如個人資訊資料列表等。事實上，使用HTML的dl、dt、dd標籤會讓你省下更多的程式碼，更能讓程式碼符合內容的語意化。當然，table也有它的用武之地，那就是很大數據量的資料表，但是小型的資料列表和表單完全可以不使用table哦！
如果你仍然在使用傳統table來建立資料列表，那麼請繼續往下看，看看使用HTML的dl、dt、dd標籤是如何讓你的工作更輕鬆…
table資料列表
傳統table的資料列表程式碼如下所示。我們要為每行添加tr標籤，然後還要在其中為標題和資料各加一個td標籤，由於標籤都是td，想要添加樣式的話還要為每個td添加class屬性。

複製程式碼

程式碼如下:

以下是對應的CSS程式碼，我們為先前在HTML中宣告的class新增樣式。

複製程式碼

程式碼如下:

/TABLE LISTDATA 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(自訂描述)標籤來容納資料中的標題和內容。

複製程式碼

程式碼如下:

Name:

Squall Li

Age:

23

Gender:

Male

Day of Birth:

26th May 1986

而在css程式碼中，我們只需讓dt和dd向左浮動即可。

複製程式碼

程式碼如下:

/*DL, 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:2px00;
padding:5px 0;
}

從dl、dt、dd的實例中你應該能明顯的看出它們的程式碼更簡潔更平滑更符合語義化了吧。 看到這裡，如果你還在堅持使用table標籤來完成web表單或其它網頁佈局的話，現在是時候改變一下你的程式碼了。讓你的工作更輕鬆一點吧！

Name:	Squall Li
Age:	23
Gender:	Male
Day of Birth:	26th May 1986