用CSS+DIV畫表格(table)進行網頁排版 - 香腸炒魷魚

基本上是可以這樣講，但是大家又會遇到網頁校正的問題，一口氣要調整四、五種版本的瀏覽器，這樣很可能讓網頁設計者又跑回去用table表格排版。

但其實在CSS ... 淘寶教學 蝦皮教學 免費軟體 iPhone/iOS Android 技巧應用 Google Windows 網路賺錢 好站推薦 網站架設 WordPress 網頁設計 虛擬主機 免費版型 網域應用 產品開箱 評測邀約 關於本站 誰是香腸? 誰是魷魚絲? 網誌聯播 意見反饋 合作邀約 首頁 技巧應用 網站架設 用CSS+DIV畫表格(table)進行網頁排版 以往傳統網頁設計都喜歡使用table(表格)來建構網頁，這樣的建構方式對於網頁整體排版來講並沒有太大的問題，可以完美相容於各個瀏覽器。

但是時代在進步，還在用table排網頁感覺就有點過時了。

會這樣說並不是想引起table和div之戰，而是想要說對於網頁的維護，table表格是比較麻煩一點的，再加上程式碼不太乾淨、過多的巢狀，對於搜尋引擎來講，也比較難發現其中重要的部分。

那如果用CSS+DIV進行網頁排版，就會比較好嗎？基本上是可以這樣講，但是大家又會遇到網頁校正的問題，一口氣要調整四、五種版本的瀏覽器，這樣很可能讓網頁設計者又跑回去用table表格排版。

但其實在CSS中，已經有語法是支援表格的了，並不是對表格進行樣簡單的樣式定義，而是透過CSS的表格屬性，完美畫出表格，排除瀏覽器相容的問題，讓傳統的table排版的設計師，也可以快速轉換。

在香腸之前的imXD佈景版本中，就已經將分類文章改採清單的排版方式，目的主要是不讓搜尋引擎收錄過多的重複內容，另一方面也不希望大家找文章不好找，所以改用清單的方式。

本來想說使用table來產生清單排版，免除瀏覽器校正問題，但礙於搜尋引擎對表格式的網頁不好解析其內容，所以還是使用DIV排版，並默默的校正一堆瀏覽器。

但是這回imXD5因為網頁HTML5化，因此所有的CSS與DIV幾乎是重構的狀態，所以在本來的分類文章清單中，樣式也順便進行重構，可是問題來了？「重構=花時間」，因為要用CSS+DIV模擬成table的樣式，如果一直使用float來排版，校正上其實很麻煩，當然在瀏覽器的校正上，更是頭大。

後來找了一下發現有有不錯的好東西，在diplay的屬性上，有table相關的屬性值可以使用！ 文章目錄導覽1傳統的table構版的問題2使用CSS構版的優點3開始進行CSS+DIV畫表格4CSS語法與table比對5IE7以下不相容 傳統的table構版的問題 一般來講，table打好語法就可以呈現效果了，而且語法很簡單，就單純的table、tr、td，這三個語法就可以畫出表格，在各個瀏覽器下也都可以正常的顯示。

如果覺得排版不漂亮，就直接在語法內加上width、color等等的屬性值，效果很容易就達到了，可是這樣會讓程式碼雜亂。

對於搜尋引擎來講，他們抓網站內容通常不會一次抓完，會先抓到一定的網頁大小，之後再來，如果你把樣式調整的程式碼都放進去，很快的，搜尋引擎可能光收錄你的表格樣式，還沒抓到重點就已經達到抓取額度了，重要的資料沒被收錄，倒是收錄了一些不重要的樣式設定。

使用CSS構版的優點 既然表格不推薦，那我們可以考慮改用CSS+DIV來構版。

CSS+DIV構版的好處就是將網頁樣式設定和主要內容分離，透過style.css檔案來控制樣式，而且可以很方便的改，只要網站架構不變，可以隨你開心設計好幾個版本的樣式表，哪天心情好，換一下style.css的檔案，網頁就整個大不同。

這也就是為什麼那一些BSP部落格(例如無名、痞客邦)，會有這麼多不同的套版，他們網頁架構都相同，就只是CSS檔案的不同，透過CSS的變換，可以營造出不一樣的效果。

開始進行CSS+DIV畫表格 為了讓大家方便在DIV和table之間的轉換，所以在CSS的命名上主要就是使用「css_」作為開頭，方便做一個對照。

首先，以前面的範例table範例語法：

                                                               

標題	回應	日期
如何停用WordPress內建搜尋功能？	5	2011-10-30

接著，我們將以上語法改成CSS+DIV的切板模式，如同前面所說，為了方便對照，所以CSS的定名開頭採用「css_」。

           標題        回應        日期                如何停用WordPress內建搜尋功能？        5        2011-10-30     接下來，我們套上CSS的語法，效果就會出現了！ #css_table{    display:table; } .css_tr{    display:table-row; } .css_td{    display:table-cell; } CSS語法與table比對 事實上，從上面的語法來看，要用table改成css的方式並不困難，所有的樣式定義需要全部透過CSS的id或是class全部獨立出來，其他部分寫起來是差不多的。

上面的語法，並沒有對CSS畫出的表個做顏色、邊線、寬度作定義，可能看起來醜醜的，這部分就請大家自己摸索了。

這篇文章主要是要告訴大家，利用CSS也是可以達到table的效果。

下面列出一些display對應table的屬性： inline-table：顯示成前後沒有換行的表格 table：對應標籤，以表格方式顯示。

table-row：對應標籤。

table-row-group：對應標籤。

table-cell：對應標籤 table-column-group：對應標籤。

table-header-group：對應標籤。

table-footer-group：對應標籤。

IE7以下不相容 沒錯，這樣的CSS屬性很巧的，只有在IE8以上才有支援，如果是IE7以下的瀏覽器，必須做CSS的相容性校正了，這是小可惜的地方。

但目前瀏覽器的使用量，IE7的比例也逐漸下降，因為大多XP使用者如果要升級瀏覽器，都會直接升級IE8。

如果要校正，那就要善用幾個屬性：display:block、float:left，還有padding和margin進行校正了。

相關文章如何做好網站內頁的SEO？(On-Page-SEO)如何讓搜尋引擎替你增加人氣與知名度？(SEO)SimilarPageChecker檢查網頁相似度，讓網站更有獨創性！[CSS]如何去除圖片超連結的藍色外框？SEO優化：不要使用MetaKeywords關鍵字BingSEO搜尋引擎優化的五大重點 台灣一日遊行程懶人包，連假景點，老街必吃必買逛透透，親子旅遊行程，約會打卡好去處Google資料螢光筆工具：幫網站結構畫重點讓搜尋引擎更懂你！ChromeDevTools檢查SSL沒有通過瀏覽器HTTP驗證的原因 站內搜尋 Sponsored 訂閱最新文章 輸入你的電子郵件地址訂閱網站的新文章，使用電子郵件接收新通知。

電子郵件位址 訂閱 最新文章 [教學]如何申請教召請假核免、隔離確診補請假流程？ [教學]如何取消Twitter隱私敏感內容？iOS設定也通用 [教學]富邦產險保單理賠怎麼寄送最快受理？進度如何查詢？ [教學]如何填寫富邦產險理賠防疫險/疫苗險申請書(範本)？ GMail學校信箱要回收了怎辦？改微軟Live信箱繼續擁有學術信箱！ [教學]如何線上申請「接觸者隔離證明」的居隔單？ [教學]富邦防疫險理賠怎麼申請？隔離確診需要準備哪些文件？ [教學]如何解決蝦皮註冊電話驗證無法接到電話問題？ 網站分類 Blog Google iPhone/iOS Windows WordPress 免費軟體 好站推薦 好笑好玩 技巧應用 時勢新訊 樂活旅遊 淘寶教學 生活紀錄 產品開箱 網域應用 網站架設 網路評論 網路賺錢 蝦皮教學 評測邀約 訂閱最新文章 輸入你的電子郵件地址訂閱網站的新文章，使用電子郵件接收新通知。

電子郵件位址 訂閱 友站連結 阿腸網頁設計 省錢柑仔店 趣旅行 簡單生活Easylife Yuki’sLife Funtory設計生活 瑞媽咪の樂活人生～RayFamily

標籤。

table-column：對應

標籤。 table-caption：對應