用標準dl,dt,dd標簽拋棄table列表

2019-10-26 17:24:51

字體：大中小

來源：轉載

供稿：網友

現在，越來越多的前端開發er們開始使用xHTML+CSS替代最初的table布局完成網頁的整體布局，不但讓網站降低了開發和維護的成本，而且代碼也更語義化了。但是，并不是說table從此消失了，它仍然被很多人用來作為網頁中數據表現的必需品，比如個人信息數據列表等。事實上，使用HTML的dl、dt、dd標簽會讓你節省更多的代碼，更能讓代碼符合內容的語義化。當然，table也有它的用武之地，那就是很大數據量的數據表，但是小型的數據列表和表單完全可以不使用table哦！
如果你仍然在使用傳統table來創建數據列表，那么請繼續往下看，看看使用HTML的dl、dt、dd標簽是如何讓你的工作更輕松…
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>

上一篇：Data URI和MHTML完整解決所有瀏覽器

下一篇：HTML是網頁制作者必須要學習掌握的

發表評論

共有條評論