大家好，我是IT修真院鄭州分院，一枚正直、純潔、善良的web程序員。
今天給大家分享一下，修真院官網(wǎng) CSS任務(wù)中可能會使用到的知識點：
div+css布局較table布局有哪些優(yōu)點？
一、背景介紹
table布局是網(wǎng)頁早期布局實現(xiàn)的主要手段，當(dāng)時的網(wǎng)頁構(gòu)成，相對也比較簡單，多是以文本
以及靜態(tài)圖片等組成的，類似于報紙的形式，分區(qū)分塊顯示，table標(biāo)簽的結(jié)構(gòu)表現(xiàn)恰好可以
滿足這樣的要求。但是隨著網(wǎng)頁要求的提高和技術(shù)的不斷探索更迭，尤其是W3C（萬維網(wǎng)聯(lián)
盟）及其他標(biāo)準(zhǔn)組織制定的標(biāo)準(zhǔn)出臺后，明確了table標(biāo)簽不是布局工具，使table標(biāo)簽重新回
到其原有的作用上（即僅作為呈現(xiàn)表格化數(shù)據(jù)的作用），而提倡使用div+css的布局組合。
二、知識剖析
2.1使用table布局的特點
優(yōu)點:?
?1、對于新手而言，容易上手，尤其對于一些布局中規(guī)中矩的網(wǎng)頁，更讓人首先想到excel，進而通過使用table去實現(xiàn)它。
2、表現(xiàn)上更加“嚴謹”，在不同瀏覽器中都能得到很好的兼容
3、通過復(fù)雜的表格套表格的形式，也可以實現(xiàn)比較復(fù)雜的布局需求。布置好表格，然后將內(nèi)容放進去就可以了。
4、它可以不用顧及垂直居中的問題。
5、數(shù)據(jù)化的存放更合理。
缺點:
1、標(biāo)簽結(jié)構(gòu)多，復(fù)雜，在表格布局中，主要是用到表格的相互嵌套使用，這樣就會造成代碼的復(fù)雜度更高！
2、表格布局，不利于搜索引擎抓取信息，直接影響到網(wǎng)站的排名
2.2使用div+css布局的特點
優(yōu)點
1、符合W3C標(biāo)準(zhǔn)的，W3C標(biāo)準(zhǔn)提出網(wǎng)頁由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。結(jié)構(gòu)清晰明了，結(jié)構(gòu)、樣式和行為分離，帶來足夠好的可維護性。
2、布局更加靈活多樣，能夠通過樣式選擇來實現(xiàn)界面設(shè)計方面的更多要求。
3、布局改版方便，不需要過多地變動頁面內(nèi)容，通常只要更換相應(yīng)的css樣式就可以將網(wǎng)頁變成另外一種風(fēng)格展現(xiàn)出來。
4、布局可以讓一些重要的鏈接和文字信息等優(yōu)先讓搜索引擎抓取，內(nèi)容更便于搜索。
5、增加網(wǎng)頁打開速度，增強用戶體驗。
缺點
1、開發(fā)技術(shù)高，要考慮兼容版本瀏覽器。目前來看，DIV+CSS還沒有實現(xiàn)所有瀏覽器的統(tǒng)一兼容。
2、CSS網(wǎng)站制作的設(shè)計元素通常放在1個外部文件中，或幾個文件，
有可能相當(dāng)復(fù)雜，甚至比較龐大，如果CSS文件調(diào)用出現(xiàn)異常，那么整個網(wǎng)站將變得慘不忍睹。
2.3 div+css的布局較table布局的明顯優(yōu)勢
1，其實也是div+css布局的第一個特點，table標(biāo)簽被嚴格地定義為存放數(shù)據(jù)的一個區(qū)域，而不是布局工具，它的布局形式不符合W3C標(biāo)準(zhǔn)，沒有實現(xiàn)結(jié)構(gòu)和表現(xiàn)的分離，它既有css的表現(xiàn)功能，也有html的結(jié)構(gòu)功能。
2，table布局加載網(wǎng)頁時，必須整體加載完，降低了網(wǎng)頁的呈現(xiàn)速度，而div+css布局是邊加載邊顯示的。
3，table布局在網(wǎng)頁代碼編寫時，有時需要嵌套多重表格才能實現(xiàn)，但使用div+css布局，相對而言會減少許多嵌套時的代碼，更容易檢查和維護。
4，table布局不方便表現(xiàn)的更換，使用div+css布局，大多只要更改css樣式表就能變化表現(xiàn)形式。
5、易于維護和改版。
三、常見問題
問題:如何在div+css布局中依然使用table布局中的一些功能？
四、解決方案
第一種，就是在div+css的布局中局部使用table布局（主要是純表格數(shù)據(jù)的實現(xiàn)）。
第二種，是使用相關(guān)的默認樣式表。如下代碼對應(yīng)表所示：
table? ? { display: table }
tr? ? ? { display: table-row }
thead? ? { display: table-header-group }
tbody? ? { display: table-row-group }
tfoot? ? { display: table-footer-group }
col? ? ? { display: table-column }
colgroup { display: table-column-group }
td, th? { display: table-cell }
caption? { display: table-caption }
五、參考文獻
參考二：table和CSS+DIV排版模式的優(yōu)缺點比較
參考四：Table布局的優(yōu)缺點介紹及為什么不建議使用
參考五：主流網(wǎng)站為什么用div+css布局，而不用table
六、視頻鏈接
今天的分享就到這里啦，歡迎大家點贊、轉(zhuǎn)發(fā)、留言、拍磚~
