CSS布局與table布局的差別

        基于web标準的網站設計的核心在于如何使用衆多web标準中的各項技術來達到表現與内容的分離，即網站的結構、表現、行為三者分離。隻有真正實作了結構分離的網頁設計，才是真正意義符合web标準的網頁設計。不排除為了達到表現與内容分離，以後将誕生更多新的技術與結構，但從目前的web标準來看最理想的技術結構是使用HTML或XHTML來設計網頁結構，推薦使用XHTML以更嚴謹的語言編寫結構，并使用CSS（目前最新版本為2.0）來完成網頁的布局表現。

1、CSS2.0的優勢

        CSS（Cascading Style Sheets）層疊樣式表目前最新版本是2.0版，是控制網頁布局樣式的基礎，并真正能夠做到網頁表現與内容分離的一種樣式設計語言。但相對于傳統HTML的簡單樣式控制而言，CSS能夠對網頁中的對象的位置排版進行像素級的精确控制，支援幾乎所有的字型字号樣式，以及擁有對網頁對像盒模型樣式控制能力，并能夠進行初步頁面互動設計，是目前基于文本展示的最優秀的表現設計語言。

        浏覽器支援完善

        目前CSS2.0版本是衆多浏覽器支援最完善的版本，最新的浏覽器均以20為CSS支援原型進行設計，使用CSS2.0樣式設計的網頁在衆多平台及浏覽器下樣式表現最為接近。

        表現與結構分離

        CSS2.0真正意義上實作了設計代碼與内容分離，而在CSS的設計代碼中通過CSS的内部導入（Import）特性，又可以使設計代碼根據設計需求進行二次分離。如為字型專門設計一套樣式表，為版式、為各個頻道等設計一套樣式表，根據頁面顯示的需要重新組織，使得設計代碼本身也便于維護與修改。

        樣式設計控制功能強大

        對網頁對象的位置排版能夠進行像素級的精确控制，支援所有字型字号樣式，優秀的盒模型控制能力，簡單的互動設計能力。

        繼承性能優越

        CSS2.0的語言在浏覽器的解析順序上，具有類似OOP面向對象的基本功能，浏覽器能夠根據CSS的級别先後應用多個樣式定義，良好的CSS代碼設計可以使得代碼之間産生繼承及重載關系，能夠達到最大限度的代碼重用，降低代碼量及維護成本。

2、傳統的table布局 VS css布局

        傳統table布局方式實際上是利用了HTML table表格元素具有無邊框特性，由于table元素可以在顯示時使得單元格的邊框和間距設定為0，即不顯示邊框，是以可以将網頁中的各個元素按版式劃分放入表格的各個單元格中，進而實作複雜的排版組合。

        table布局的核心在于設計一個能滿足版式要求的表格結構，将内容裝入每個單元格中，間距及定格則通過gif進行占位來實作，最終的結構是一個複雜的表格，不利于設計與修改。

        表格布局代碼最常見的是在HTML标簽<>之間嵌入一些設計代碼，如width=“100%”，border=“0”等，表格布局的混合式代碼就是這樣編寫的，大量樣式設計代碼混合在表格，單元格之間，使得可讀性大大降低，維護起來成本也相當高，盡管現在有像Dreamweaver這樣優秀的軟體能幫我們可視化的進行這些代碼的編寫，而又經驗的網頁設計師都知道，Dreamweaver永遠不會智能地幫你縮減代碼或是重用代碼，隻有你需要什麼，它幫你寫入什麼樣式，最終結果是表格中到處留下設計的足迹，混合代碼也由此而成。

        複雜表格設計使得設計極為不易，修改更為複雜，最後生成的網頁代碼除了表格本身的代碼，還有許多無意義的透明gif占位圖及其他元素，檔案量龐大，最終導緻浏覽器下載下傳及解析速度變慢。

        而使用CSS 布局則可以從根本上改變這種情況。CSS布局的重點不再放在table元素的設計中，取而代之的是HTML中的另一個元素div，div可以了解為圖層或是一個“塊”，div是一種比表格簡單的元素，從文法上隻有<div>開始以及</div>結束這樣一個簡單的定義，div的功能僅僅是用于将一段資訊給标記出來用于後期的樣式定義，這裡将資訊标記，就是我們前面所提到的網頁的“結構”部分，通過div的使用，我們可以将網頁中的各個元素劃分到各個div中，成為網頁中的結構體，而樣式表現則由CSS來完成。

        div在使用時不需要像表格一樣通過其内部的單元格來組織版式，通過CSS強大的樣式定義功能可以比表格更簡單更自由的來控制頁面版式及樣式。

        代碼示例：

        XHTML部分：

        <div id ="content">[……内容……]</div>

        表示頁面中定義了一個div并使用content這個class名稱：

        CSS部分：

        #content {

                float:right   /*表示div在頁面中出現在右側，右對齊；*/

                margin-top:10px;      /*表示div居上有10像素的上邊距；*/

                margin-right:20px;   /*同上，表示外邊距；*/

                margin-bottom:10px;    /*同上，表示下外邊距；*/

                margin-left:10px;         /*同上，表示左外邊距；*/

                background-color:blue;   /*表示對象裡的文字居中顯示；*/

                text-align:center;         /*表示對象裡的文字居中顯示；*/

                line-height:160%;         /*表示對象中的文字行高為原高的160%；*/

                width:50%;                /*表示這個對象的寬度為頁面的50%；*/

        }

        .content {}區域表示在CSS中定義了一個名為content的樣式，用于對頁面中所有class為content的對象（此處應用content的元素是div）進行樣式控制。

        HTML中止保留了div标簽機器中的内容，所有的樣式設計代碼均在CSS檔案編寫，這也就實作了CSS布局的第一個目标——表現與内容分離。

        從樣式設計角度來看，CSS對目前名為content的div定義了許多屬性，如上邊距（margin-top）、浮動方式（float）、背景色（background-color）、文本對齊方式（text-align）等樣式，這些樣式有些在HTML标簽中可以直接實作，而類似上邊距（margin-top）等設計形式則是HTML本身不具備。不僅如此，這套代碼可以應用到所有使用class=“content”的div或其他對象使用，充分提高代碼使用率，效率大大提高。