頁(yè)面設(shè)計(jì)中如何合理應(yīng)用table和div

這篇文章主要為大家展示了“頁(yè)面設(shè)計(jì)中如何合理應(yīng)用table和div”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“頁(yè)面設(shè)計(jì)中如何合理應(yīng)用table和div”這篇文章吧。

table和div 的合理應(yīng)用

Table在早期的頁(yè)面設(shè)計(jì)中應(yīng)用廣泛，但是隨著互聯(lián)網(wǎng)的發(fā)展table漸漸被拋棄，現(xiàn)在互聯(lián)網(wǎng)上只有一小部分老站（有名氣，不必要改的那種有很多），還是沿用著table來(lái)布局頁(yè)面，現(xiàn)在的新站基本上都是使用了div+css來(lái)布局頁(yè)面，但是很多web前端初入門(mén)的朋友就會(huì)產(chǎn)生一種錯(cuò)覺(jué)，認(rèn)為table會(huì)是頁(yè)面對(duì)搜索引擎不友好的元兇，所以在設(shè)計(jì)列表的時(shí)候總是會(huì)去使用dt ，ul 之類的標(biāo)簽。這樣有的使用會(huì)讓你多花很多設(shè)計(jì)頁(yè)面樣式的時(shí)間，而真正對(duì)搜索引擎優(yōu)化的效果很微弱。

大量使用table的一個(gè)非常大的弊端除了對(duì)搜索引擎不友好，還有就是對(duì)程序員也非常的不友好，table的大量嵌套，會(huì)讓人看的很暈。但是如果配合著div使用的話就會(huì)提供效果，達(dá)到的效果或許比dt，ul來(lái)的更加好。

還有一個(gè)問(wèn)題就是大量的table tr td 會(huì)讓你頁(yè)面的語(yǔ)義非常的差，這里先不討論標(biāo)簽語(yǔ)義化，大家自己去百度搜一下，語(yǔ)義良好的頁(yè)面，搜索引擎是非常的喜好的，這里我先介紹一個(gè)語(yǔ)義化很好的網(wǎng)站 http://www.kemok4.com/w3school/ 大家也可以自己動(dòng)手操作，用谷歌瀏覽器去掉它的css鏈接，然后再看它的頁(yè)面布局，你會(huì)發(fā)現(xiàn)，它的所有的標(biāo)題，列表，都井然有序，就像是寫(xiě)論文的時(shí)候非常正規(guī)的排版一樣，即使不要樣式表，相信大家也不會(huì)產(chǎn)生非常大的厭惡感，但是有些網(wǎng)站就不一樣了，去掉css樣式文件之后，頁(yè)面直接就癱了，這里再發(fā)個(gè)站www.webgamei.com 去掉它的css樣式文件 （2個(gè)） 再看頁(yè)面，因?yàn)樗臉邮胶芏喽际侵苯訉?xiě)進(jìn)table中的style中，所以你看起來(lái)沒(méi)有很大的變化，但是你看導(dǎo)航部分，會(huì)發(fā)現(xiàn)，頁(yè)面毫無(wú)語(yǔ)義感，若是頁(yè)面的樣式分離開(kāi)了，那去掉css文件，估計(jì)沒(méi)法看了。

所以這里建議，在你的頁(yè)面設(shè)計(jì)出來(lái)之后，你可以先不去加css樣式，直接先把默認(rèn)樣式的版面寫(xiě)出來(lái)，在根據(jù)頁(yè)面去加css自定義樣式，這樣會(huì)不會(huì)更高效點(diǎn)呢 ，呵呵 ，我沒(méi)試過(guò)，只是這么想而以。

以上是“頁(yè)面設(shè)計(jì)中如何合理應(yīng)用table和div”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！