過去有很多網(wǎng)頁設計師喜歡將他們的網(wǎng)頁效果圖用table布局實現(xiàn)成網(wǎng)頁，但是這樣做會遇到一個比較麻煩的問題就是，后期調試和維護會相當?shù)睦щy。現(xiàn)在，越來越多的前端開發(fā)er們開始使用xhtml+css替代最初的table布局完成網(wǎng)頁的整體布局，不但讓網(wǎng)站降低了開發(fā)和維護的成本，而且代碼也更語義化了。但是，并不是說table從此消失了，它仍然被很多人用來作為網(wǎng)頁中數(shù)據(jù)表現(xiàn)的必需品，比如個人信息數(shù)據(jù)列表等。事實上，使用html的dl、dt、dd標簽會讓你節(jié)省更多的代碼，更能讓代碼符合內(nèi)容的語義化。當然，table也有它的用武之地，那就是很大數(shù)據(jù)量的數(shù)據(jù)表，但是小型的數(shù)據(jù)列表和表單完全可以不使用table哦！
如果你仍然在使用傳統(tǒng)table來創(chuàng)建數(shù)據(jù)列表，那么請繼續(xù)往下看，看看使用html的dl、dt、dd標簽是如何讓你的工作更輕松…
table數(shù)據(jù)列表
傳統(tǒng)table的數(shù)據(jù)列表代碼如下所示。我們要為每行添加tr標簽，然后還要在其中為標題和數(shù)據(jù)各加一個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代碼，我們?yōu)橹霸趆tml中聲明的class添加樣式。
| /*table list data*/ table tr .title { table tr .text { |
從以上代碼可以看出，使用table標簽，如果想使用css來對內(nèi)容進行修飾或修改的話，需要為td單元格添加一些相應的class屬性。這樣無形中增加了自己的工作量，代碼會稍微變多了一些。代碼變多意味著什么？意味著網(wǎng)站的流量在浪費、增加更多的產(chǎn)生bug的幾率以及后期維護更困難。
dl、dt、dd數(shù)據(jù)列表
現(xiàn)在讓我們來看看使用了html dl、dt、dd標簽的數(shù)據(jù)列表。首先我們使用dl(definition list-自定義列表)標簽來容納整個數(shù)據(jù)結構，然后我們使用dt(自定義標題)標簽和dd(自定義描述)標簽來容納數(shù)據(jù)中的標題和內(nèi)容。
| <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 { dl dt { dl dd { |
從dl、dt、dd的實例中你應該能明顯的看出它們的代碼更簡潔更平滑更符合語義化了吧。
看到這里，如果你還在堅持使用table標簽來完成web表單或其它網(wǎng)頁布局的話，現(xiàn)在是時候改變一下你的代碼了。讓你的工作更輕松些吧！
新聞熱點
疑難解答
