以往傳統(tǒng)網(wǎng)頁設(shè)計都喜歡使用table(表格)來建構(gòu)網(wǎng)頁，這樣的建構(gòu)方式對于網(wǎng)頁整體排版來講并沒有太大的問題，可以完美相容于各個瀏覽器。但是時代在進步，還在用table排網(wǎng)頁感覺就有點過時了。會這樣說并不是想引起table和div之戰(zhàn)，而是想要說對于網(wǎng)頁的維護，table表格是比較麻煩一點的，再加上程式碼不太干凈、過多的巢狀，對于搜索引擎來講，也比較難發(fā)現(xiàn)其中重要的部分。

那如果用CSS+DIV進行網(wǎng)頁排版，就會比較好嗎？基本上是可以這樣講，但是大家又會遇到網(wǎng)頁校正的問題，一口氣要調(diào)整四、五種版本的瀏覽器，這樣很可能讓網(wǎng)頁設(shè)計者又跑回去用table表格排版。但其實在CSS中，已經(jīng)有語法是支援表格的了，并不是對表格進行樣簡單的樣式定義，而是透過CSS的表格屬性，完美畫出表格，排除瀏覽器相容的問題，讓傳統(tǒng)的table排版的設(shè)計師，也可以快速轉(zhuǎn)換。

本來想說使用table來產(chǎn)生清單排版，免除瀏覽器校正問題，但礙于搜索引擎對表格式的網(wǎng)頁不好解析其內(nèi)容，所以還是使用DIV排版，并默默的校正一堆瀏覽器。

但是這回imXD5因為網(wǎng)頁HTML5化，因此所有的CSS與DIV幾乎是重構(gòu)的狀態(tài)，所以在本來的分類文章清單中，樣式也順便進行重構(gòu)，可是問題來了？「重構(gòu)=花時間」，因為要用CSS+DIV模擬成table的樣式，如果一直使用float來排版，校正上其實很麻煩，當(dāng)然在瀏覽器的校正上，更是頭大。后來找了一下發(fā)現(xiàn)有不錯的好東西，在diplay的屬性上，有table相關(guān)的屬性值可以使用！

一般來講，table打好語法就可以呈現(xiàn)效果了，而且語法很簡單，就單純的table、tr、td，這三個語法就可以畫出表格，在各個瀏覽器下也都可以正常的顯示。如果覺得排版不漂亮，就直接在語法內(nèi)加上width、color等等的屬性值，效果很容易就達到了，可是這樣會讓程式碼雜亂。對于搜尋引擎來講，他們抓網(wǎng)站內(nèi)容通常不會一次抓完，會先抓到一定的網(wǎng)頁大小，之后再來，如果你把樣式調(diào)整的程式碼都放進去，很快的，搜尋引擎可能光收錄你的表格樣式，還沒抓到重點就已經(jīng)達到抓取額度了，重要的資料沒被收錄，倒是收錄了一些不重要的樣式設(shè)定。

1 <table> 2 <tr> 3 <td>1</td> 4 <td>2</td> 5 <td>3</td> 6 </tr> 7 <tr> 8 <td>1</td> 9 <td>2</td>10 <td>3</td>11 </tr>12 </table>
使用CSS構(gòu)版的優(yōu)點

既然表格不推薦，那我們可以考慮改用CSS+DIV來構(gòu)版。CSS+DIV構(gòu)版的好處就是將網(wǎng)頁樣式設(shè)定和主要內(nèi)容分離，透過style.css檔案來控制樣式，而且可以很方便的改，只要網(wǎng)站架構(gòu)不變，可以對你開心設(shè)計好幾個版本的樣式表，哪天心情好，換一下style.css的檔案，網(wǎng)頁就整個大不同。這也就是為什么那一些BSP部落格(例如無名、痞客邦)，會有這么多不同的套版，他們網(wǎng)頁架構(gòu)都相同，就只是CSS檔案的不同，透過CSS的變換，可以營造出不一樣的效果。

1 <div id="css_table"> 2 <div class="css_tr"> 3 <div class="css_td">1</div> 4 <div class="css_td">2</div> 5 <div class="css_td">3</div> 6 </div> 7 <div class="css_tr"> 8 <div class="css_td">4</div> 9 <div class="css_td">5</div>10 <div class="css_td">6</div>11 </div>12 </div>開始進行CSS+DIV畫表格

咱們以前面的table作為案例，用css+div進行排版：

1 <div id="css_table"> 2 <div class="css_tr"> 3 <div class="css_td">標(biāo)題</div> 4 <div class="css_td">回應(yīng)</div> 5 <div class="css_td">日期</div> 6 </div> 7 <div class="css_tr"> 8 <div class="css_td">如何停用WordPress內(nèi)建搜尋功能？</div> 9 <div class="css_td">5</div>10 <div class="css_td">2011-10-30</div>11 </div>12 </div>

接著套上css的語法：

1 #css_table {2 display:table;3 }4 .css_tr {5 display: table-row;6 }7 .css_td {8 display: table-cell;9 }

事實上，從上面的語法來看，要用table改成css的方式并不困難，所有的樣式定義需要全部透過CSS的id或是class全部獨立出來，其他部分寫起來是差不多的。上面的語法，并沒有對CSS畫出的表格做顏色、邊線、寬度作定義，可能看起來丑丑的，這部分就請大家自己摸索了。這篇文章主要是要告訴大家，利用CSS也是可以達到table的效果。下面列出一些display對應(yīng)table的屬性：

沒錯，這樣的CSS屬性很巧的，只有在IE8以上才有支援，如果是IE7以下的瀏覽器，必須做CSS的相容性校正了，這是小可惜的地方。但目前瀏覽器的使用量，IE7的比例也逐漸下降，因為大多XP使用者如果要升級瀏覽器，都會直接升級IE8。如果要校正，那就要善用幾個屬性：display:block、float:left，還有padding和margin進行校正了。