Html表格在網(wǎng)頁(yè)布局中的應(yīng)用已經(jīng)有很多年了,多年技術(shù)的發(fā)展與Web工具的增強(qiáng),一度使html表格布局達(dá)到了登峰造極的地步。網(wǎng)頁(yè)制作師可以非常輕松的使用圖像編輯器設(shè)計(jì)網(wǎng)頁(yè)并切圖,最后自動(dòng)生成以表格布局的網(wǎng)頁(yè)。
但傳統(tǒng)表格布局雖然加速了網(wǎng)頁(yè)制作師們完成網(wǎng)頁(yè)速度,但卻忽視了代碼的理性分析。實(shí)際上,html表格的功能不是用來(lái)進(jìn)行網(wǎng)頁(yè)布局的,最初的網(wǎng)頁(yè)也沒(méi)有今天這么復(fù)雜,僅顯示文本或幾個(gè)簡(jiǎn)單的圖像,后來(lái)隨著網(wǎng)頁(yè)內(nèi)容的豐富,圖像、聲音、動(dòng)畫等多媒體不斷充斥著網(wǎng)頁(yè),用戶對(duì)網(wǎng)頁(yè)視覺(jué)提出了更高的要求,于是就有人試著在表格中放置一些網(wǎng)頁(yè)的內(nèi)容。
其實(shí)在表格布局之初就有專家提出異議,而且那時(shí)css技術(shù)也已經(jīng)公布于眾,一套較完善的網(wǎng)頁(yè)標(biāo)準(zhǔn)技術(shù)也已經(jīng)被推向市場(chǎng),但響應(yīng)者甚少,微軟的IE瀏覽器更是帶頭唱反調(diào),標(biāo)準(zhǔn)就這樣被非標(biāo)準(zhǔn)壓制了好幾年。
現(xiàn)在Web技術(shù)從 1.0 跨入 2.0 時(shí)代,表格布局已經(jīng)不能再適應(yīng)新技術(shù)的發(fā)展趨勢(shì)了,如今的Web世界中用戶體驗(yàn)才是王道,xhtml + css 的技術(shù)應(yīng)用逐漸占據(jù)上風(fēng),使微軟這樣的巨無(wú)霸也不得不臣服于W3C所提倡的標(biāo)準(zhǔn)之下。
Web 2.0 對(duì)于網(wǎng)頁(yè)結(jié)構(gòu)和布局提出了更高的要求,這不僅僅是為了節(jié)省幾行代碼、減少帶寬的問(wèn)題,因?yàn)榻裉斓木W(wǎng)絡(luò)帶寬已經(jīng)不是技術(shù)發(fā)展的主要障礙了。要實(shí)現(xiàn)Web的交互與共建就必須允許用戶可以操縱網(wǎng)頁(yè),而這些都必須建立在完全標(biāo)準(zhǔn)的網(wǎng)頁(yè)結(jié)構(gòu)之上,這是html表格布局無(wú)法做到的。
Web 2.0 的這種要求與表格網(wǎng)頁(yè)布局是格格不入的,透過(guò)那些所謂精美的表格頁(yè)面看網(wǎng)頁(yè)源代碼,你會(huì)發(fā)現(xiàn)就如同看天書一般,這讓后期維護(hù)和更新成為了一場(chǎng)噩夢(mèng),我們通過(guò)一個(gè)簡(jiǎn)單的案例來(lái)說(shuō)明這個(gè)問(wèn)題。
上圖中,位于左側(cè)上方的是html表格布局,右側(cè)下方的是 xhtml + css 布局,我們清晰的可以看出其代碼量相差很大,這只是一個(gè)最簡(jiǎn)單的網(wǎng)頁(yè)布局,但如果做一個(gè)企業(yè)網(wǎng)站或者一個(gè)大型門戶網(wǎng)站,其代碼量的差距是可想而知的。
但遺憾的是,部分設(shè)計(jì)師在學(xué)習(xí)和使用網(wǎng)頁(yè)布局時(shí)有表格恐懼癥,認(rèn)為網(wǎng)頁(yè)中只要出現(xiàn)<table>、<td>、<tr>等標(biāo)簽就是不符合標(biāo)準(zhǔn)的,實(shí)際上這是種錯(cuò)誤的認(rèn)識(shí),我們?cè)诰W(wǎng)頁(yè)布局中只要記住一點(diǎn):表格是用來(lái)組織和展示數(shù)據(jù)的,而不是用來(lái)布局的,當(dāng)你要展示一個(gè)二維表格的數(shù)據(jù)給用戶時(shí),選擇使用表格是再恰當(dāng)不過(guò)的了。
建站咨詢熱線
4006123011