比較Table與dl、dt、dd標(biāo)記制作表格

本文章分享的是關(guān)于Table和dl、dt、dd標(biāo)記制作表格的對(duì)比，希望提供這篇文章給大家學(xué)習(xí)后，能幫助到大家，讓大家的工作變得輕松一些。

過(guò)去有很多網(wǎng)頁(yè)設(shè)計(jì)師喜歡將他們的網(wǎng)頁(yè)效果圖用table布局實(shí)現(xiàn)成網(wǎng)頁(yè)，但是這樣做會(huì)遇到一個(gè)比較麻煩的問(wèn)題就是，后期調(diào)試和維護(hù)會(huì)相當(dāng)?shù)睦щy�，F(xiàn)在，越來(lái)越多的前端開發(fā)er們開始使用xHTML+CSS替代最初的table布局完成網(wǎng)頁(yè)的整體布局，不但讓網(wǎng)站降低了開發(fā)和維護(hù)的成本，而且代碼也更語(yǔ)義化了。但是，并不是說(shuō)table從此消失了，它仍然被很多人用來(lái)作為網(wǎng)頁(yè)中數(shù)據(jù)表現(xiàn)的必需品，比如個(gè)人信息數(shù)據(jù)列表等。事實(shí)上，使用HTML的dl、dt、dd標(biāo)簽會(huì)讓你節(jié)省更多的代碼，更能讓代碼符合內(nèi)容的語(yǔ)義化。當(dāng)然，table也有它的用武之地，那就是很大數(shù)據(jù)量的數(shù)據(jù)表，但是小型的數(shù)據(jù)列表和表單完全可以不使用table哦！

    如果你仍然在使用傳統(tǒng)table來(lái)創(chuàng)建數(shù)據(jù)列表，那么請(qǐng)繼續(xù)往下看，看看使用HTML的dl、dt、dd標(biāo)簽是如何讓你的工作更輕松…

    table數(shù)據(jù)列表

    傳統(tǒng)table的數(shù)據(jù)列表代碼如下所示。我們要為每行添加tr標(biāo)簽，然后還要在其中為標(biāo)題和數(shù)據(jù)各加一個(gè)td標(biāo)簽，由于標(biāo)簽都是td，想要添加樣式的話還要為每個(gè)td添加class屬性。

    以下是相應(yīng)的CSS代碼，我們?yōu)橹�前在HTML中聲明的class添加樣式。

    從以上代碼可以看出，使用table標(biāo)簽，如果想使用CSS來(lái)對(duì)內(nèi)容進(jìn)行修飾或修改的話，需要為td單元格添加一些相應(yīng)的class屬性。這樣無(wú)形中增加了自己的工作量，代碼會(huì)稍微變多了一些。代碼變多意味著什么？意味著網(wǎng)站的流量在浪費(fèi)、增加更多的產(chǎn)生Bug的幾率以及后期維護(hù)更困難。

    dl、dt、dd數(shù)據(jù)列表

    現(xiàn)在讓我們來(lái)看看使用了HTML dl、dt、dd標(biāo)簽的數(shù)據(jù)列表。首先我們使用dl(definition list-自定義列表)標(biāo)簽來(lái)容納整個(gè)數(shù)據(jù)結(jié)構(gòu)，然后我們使用dt(自定義標(biāo)題)標(biāo)簽和dd(自定義描述)標(biāo)簽來(lái)容納數(shù)據(jù)中的標(biāo)題和內(nèi)容。

    而在css代碼中，我們僅需讓dt和dd向左浮動(dòng)即可。
    /*DL, DT, DD TAGS LIST DATA*/

    從dl、dt、dd的實(shí)例中你應(yīng)該能明顯的看出它們的代碼更簡(jiǎn)潔更平滑更符合語(yǔ)義化了吧。

    看到這里，如果你還在堅(jiān)持使用table標(biāo)簽來(lái)完成web表單或其它網(wǎng)頁(yè)布局的話，現(xiàn)在是時(shí)候改變一下你的代碼了。讓你的工作更輕松些吧！