摘要:使用DIV和CSS排版
之前聽過網頁排版盡量用div和css，不要用table的方式來排版( 原因讓我文章最後再提)，最近工作上有機會，就試了一下，這篇文章用最簡單的例子來說明，如何用div和css排版。
假設我們要做一個L型的網頁，如下：
要達成這目的，比較直覺的作法是用table，用一個2x2 的table，第一列的第一個td指定colspan=”2”，如下面的html語法：
標題區塊
左方區塊
主要內容區塊
這html語法，包含了資料，又包含了許多用來排版的 <tr> <td> ，現在有另一種方式可以達到這需求，讓我們一步一步來做，首先先將html語法拿掉<table>相關的tag，拿掉後如下：
標題區塊
左方區塊
主要內容區塊
是不是清爽多了？現在html只剩下一塊一塊的資料區塊，這時候畫面會如下方的方式顯示，為了方便說明，我先將「左方區塊」和「主要內容區塊」的高度拿掉，並加上margin。
接著讓我們設定「左方區塊」的寬度250px(在css加上width)，「主要內容區塊」則設定margin-left，讓它離左邊的物件250px+5px=260px的寬度，結果如下：
做到這，似乎只差一步就可以完成排版了，那就是怎麼讓「左方區塊」和「主要內容區塊」是水平的呈現，而不是垂直的呈現，其實很簡單，只要在「左方區塊」的CSS加上 「float: left;」，意思是讓它浮起來，結果如下：
最後設定一下「標題區塊的」margin-bottom和「左方區塊」和「主要內容區塊」的高度，就完成了。(如第一張圖)
對我來說排版一直是很困擾的事，但寫網頁就免不了排版，本身是寫程式的，對我來說用table很直覺，因此我也一直用table在排版，但後來才發現較正規的做法是用div和CSS排版， 我才去試著做做看。我覺得最大的優點是，html變的乾淨，讓html語法專注在資料上，排版交給CSS，讓程式設計師負責html的內容和美術設計師則調整CSS，彼此各司其職，更容易合作。用CSS來排版讓排版更靈活，CSS有許多技巧可以把div放到想要的位置，而table的排版就是依照<tr>和<td>，當頁面複雜時，這些<tr><td>就不是那麼容易調的，我認為大的區塊用div來排，在呈現資料時才用table，不過不管怎麼做，還是要考慮什麼方式才是開發團隊較熟悉的。
附上實驗的html檔
