HTML的dl、dt、dd標(biāo)記制作表格對決Table制作表

2020-03-24 19:26:04

字體：大中小

供稿：網(wǎng)友

不但讓網(wǎng)站降低了開發(fā)和維護(hù)的成本，而且代碼也更語義化了。但是，并不是說table從此消失了，它仍然被很多人用來作為網(wǎng)頁中數(shù)據(jù)表現(xiàn)的必需品，比如個人信息數(shù)據(jù)列表等。事實(shí)上，使用HTML的dl、dt、dd標(biāo)簽會讓你節(jié)省更多的代碼，更能讓代碼符合內(nèi)容的語義化。當(dāng)然，table也有它的用武之地，那就是很大數(shù)據(jù)量的數(shù)據(jù)表，但是小型的數(shù)據(jù)列表和表單完全可以不使用table哦！如果你仍然在使用傳統(tǒng)table來創(chuàng)建數(shù)據(jù)列表，那么請繼續(xù)往下看，看看使用HTML的dl、dt、dd標(biāo)簽是如何讓你的工作更輕松
table數(shù)據(jù)列表傳統(tǒng)table的數(shù)據(jù)列表代碼如下所示。我們要為每行添加tr標(biāo)簽，然后還要在其中為標(biāo)題和數(shù)據(jù)各加一個td標(biāo)簽，由于標(biāo)簽都是td，想要添加樣式的話還要為每個td添加html' target='_blank'>class屬性。
復(fù)制代碼代碼如下:
table
tbody
tr
td Name: /td
td Squall Li /td
/tr
tr
td Age: /td
td 23 /td
/tr
tr
td Gender: /td
td Male /td
/tr
tr
td Day of Birth: /td
td 26th May 1986 /td
/tr
/tbody
/table

一下是相應(yīng)的CSS代碼，我們?yōu)橹霸贖TML中聲明的class添加樣式。
復(fù)制代碼代碼如下:
/*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標(biāo)簽，如果想使用CSS來對內(nèi)容進(jìn)行修飾或修改的話，需要為td單元格添加一些相應(yīng)的class屬性。這樣無形中增加了自己的工作量，代碼會稍微變多了一些。代碼變多意味著什么？意味著網(wǎng)站的流量在浪費(fèi)、增加更多的產(chǎn)生Bug的幾率以及后期維護(hù)更困難。dl、dt、dd數(shù)據(jù)列表現(xiàn)在讓我們來看看使用了HTML dl、dt、dd標(biāo)簽的數(shù)據(jù)列表。首先我們使用dl(definition list-自定義列表)標(biāo)簽來容納整個數(shù)據(jù)結(jié)構(gòu)，然后我們使用dt(自定義標(biāo)題)標(biāo)簽和dd(自定義描述)標(biāo)簽來容納數(shù)據(jù)中的標(biāo)題和內(nèi)容。
復(fù)制代碼代碼如下:
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*/
復(fù)制代碼代碼如下:
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的實(shí)例中你應(yīng)該能明顯的看出它們的代碼更簡潔更平滑更符合語義化了吧。看到這里，如果你還在堅持使用table標(biāo)簽來完成web表單或其它網(wǎng)頁布局的話，現(xiàn)在是時候改變一下你的代碼了。讓你的工作更輕松些吧！
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML的表單介紹

下一篇：舉例講解HTML中META標(biāo)簽的一些使用技巧