【DIV+CSS入門教程】使用Table佈局是不明智的

使用Table佈局頁面為什麼是不明智的？
大家看到標題，不要誤解認為在頁面中不能使用Table，而是可以使用Table，但是儘量不要用Table去佈局頁面，為什麼這麼說呢，因為使用Table佈局頁面會使頁面失去靈活性，怎麼個靈活法呢， 比如今天你好不容易做出來的頁面，第二天老闆說我不喜歡登錄模組放到右邊，還是放到左邊，通知板塊放到右側去，頁面風格最好一個月換一種，如果遇到這種老闆，提出這種要求，並且你的頁面是用Table佈局的，那麼你會崩潰的， 工作量那是大大滴~，如果不相信的話，你們自己可以找個頁面，用Table佈局出來，然後變換板塊和風格，你就會體會到Table佈局的不靈活性，這是為什麼呢，因為Table的誕生是為存儲資料用的，功能和Execel差不多， 不是用來佈局用的，只不過後來大家發現用Table可以把想放的頁面元素，比如圖片，放到任何自己想放的地方，且做出來的頁面可以相容多種瀏覽器，於是Table就承擔起了佈局頁面的重擔，這一做就是好幾年... ... 直到Web2.0時代的到來，Table才從佈局頁面的工作中逐漸解脫，專心的去存儲資料^_^

既然Table是為存儲資料誕生的，那誰的誕生是為了頁面配置呢？
答案就是:DIV，DIV就是為佈局頁面而誕生的，只不過一直不被人認同，原因就是DIV去佈局頁面需要CSS的配合，使用比較繁瑣，還不如Table拖拖拽拽頁面就佈局OK了，感覺還不如Table方便， 從而DIV被人們放置在一個無人問津的昏暗角落裡，暗暗的等待著伯樂的出現，直到2003年美國加州Scott Design公司參加了在三藩市舉辦的有關網頁排版和設計的一個研討會上的演講，使DIV看到了陽光，走出了陰霾... ...

說了那麼多，我們對比一下Table佈局頁面和DIV佈局頁面的優缺點

使用表格進行頁面配置會帶來很多問題：
* 把格式資料混入你的內容中。 這使得檔的大小無謂地變大，而使用者訪問每個 頁面時都必須下載一次這樣的格式資訊,頻寬並非免費。
* 這使得重新設計現有的網站和內容極為消耗勞力 (且昂貴)。
* 這還使我們保持整個網站的視覺的一致性極難，花費也極高。
* 基於表格的頁面還大大降低了它對殘疾人和用手機或 PDA 流覽者的親和力。

而使用CSS進行網頁佈局，它會：
* 使你的頁面載入得更快
* 降低你的流量費用
* 讓你在修改設計時更有效率而代價更低
* 説明你的整個網站保持視覺的一致性
* 讓你的網站可以更好地被搜尋引擎找到
* 使你的網站對流覽者和瀏覽器更具親和力
* 在世界上越來越多人採用 Web 標準時，它還能 提高你的職場競爭實力 (事實上也就是降低失業的風險)。

網上有一篇文章，轉過來，文章著重介紹DIV三點優勢,也許看完文章後，就像社區元老heflyaway說的感覺作者比較迷戀Table，每篇文章都不可避免的帶有個人色彩，而轉出來的目的，其實就是想給大家降降DIV+CSS的溫度 ，免得「走火入魔」，視DIV+CSS是為萬能的，如果想學好CSS佈局頁面，就要從多個方面看它，好了，不多說了，下面是作者對CSS佈局頁面的三點優勢及理解：

1、內容和形式分離，網頁前臺只需要顯示內容就行，形式上的美工交給CSS來處理。 生成的HTML檔代碼精簡，更小打開更快。
2、改版網站更簡單容易了，不用重新設計排版網頁，甚至於不用動原網站的任何HTML和程式頁面，只需要改動CSS檔就完成了所有改版。 對於入口網站來說改版就像換件衣服一樣簡單容易。
3、搜尋引擎更友好，排名更容易靠前。

第一點、內容和形式分離
網頁前臺只需要顯示內容就行，形式上的美工交給CSS來處理。 生成的HTML檔代碼精簡，更小打開更快。
這個是DIV+CSS技術最顯著的特點，也是CSS存在的根源。 完全的顛覆現在傳統（table）網頁設計的技術。 所有現在用table製作的內容，都可以用CSS來解決掉，而且解決的更完美，更強大。 不需要大家再表格套表格，讓生成的網頁檔案大小更精簡，更小。 table時代，一個頁面表格達到10個以上是非常普遍的事情，但是現在用DIV+CSS，一個table都可以不用，就完全達到之前的效果，這就直接導致網頁檔案大小比使用table時減少50%-80%，更節約各位站長的硬碟空間 ，訪問者打開網頁時更快，而且用div+CSS時，不像以往使用table時，必須把全部table讀取完了才顯示頁面內容，現在是可以讀一個div就顯示一個效果，大家打開網頁不用等。 好處真是明顯而強大。
這個優點的確是顯著的，凡是使用傳統table建的網頁，內容多的話，有時候達到30K左右都有可能，檔打了打開時，肯定就有0.0幾秒的延遲。 使用DIV+CSS，你前臺打開看到的全是直接內容，CSS檔都是導入連結的，是另一個檔，根本和HTML檔案大小沒關係，這種生成的HTML檔，一個也就10K左右大小。

第二點，改版網站更簡單容易了
不用重新設計排版網頁，甚至於不用動原網站的任何HTML和程式頁面，只需要改動CSS檔就完成了所有改版。
DIV+CSS對於入口網站來說改版就像換件衣服一樣簡單容易，改版時，不用改動全站HTML頁面，只需要重新寫CSS，再用新CSS覆蓋以前的CSS就可以實現改版了。 方便吧。

第三點，搜尋引擎更友好，確實能夠對SEO起到一定的説明。
通過DIV+CSS對網頁的佈局，可以讓一些重要的連結、文字資訊，優先讓搜尋引擎蜘蛛爬取。 這對於SEO也有説明。

綜上所述，個人感覺DIV+CSS不能太迷信它的很好很強大，它作為製作網頁，美化網頁的一個重要輔助是很強大方便的。 可以彌補table製作框架和表格時的很多不足和美工上的缺點，但是完全只用它來做，太費時費力，對於全國中小型網站長來說，真的不太適合。 我個人覺得用table+DIV+CSS是最好的組合，也是最省時省力的辦法。

還需要再說明一下，本節講得是Table佈局頁面和CSS佈局頁面的問題，討論的是「佈局頁面」上用誰更好，並不是說在CSS佈局的頁面內不能用Table，真正厲害的人物是DIV、Table、CSS用得恰到好處， 他們三個各做各的事情，DIV佈局頁面，Table存儲資料，CSS給頁面穿衣服！