傳統的table布局與css布局【原創】

傳統table布局方式利用了html的table元素所有的0邊框特性。由於table元素可以在顯示時，使得儲存格邊框和間距被設定為0，即不顯示邊框，所以可將網頁中的各個元素按照版式劃分後，分別放入表格的各個儲存格中，從而實現了複雜的排版組合效果。

<table width=600 border="1" cellspacing="3" cellpadding="3">
  <tr>
     <td width="51%" rowspan="2" background="#000fff"><font color="blue">文本顯示</font></td>
     <td width="30%" background="#000fff">&nbsp;</td>
     <td width="19%" background="#000fff">&nbsp;</td>
  </tr>
</table>

複雜的表格設計使得設計不容易，修改更加複雜，最後產生網頁代碼除了表格本身的代碼外，還有許多多餘的透明gif佔位圖及其他元素，使得網頁檔案量龐大，最終導致瀏覽器下載及解析速度變慢。

css布局，採用div，div可以理解為圖層或者一個塊。div功能僅僅用於將一段資訊給標記出來，用於後期的樣式定義。

目前流行的div+css，div考慮資料，css負責樣式，修改方便，操作簡單。