用CSS+DIV畫表格(table)進行網頁排版

用CSS+DIV畫表格(table)進行網頁排版:
以下文章來自「香腸炒魷魚」(請注意此方式在 IE7 以下不支援,還需要做調整喔!)
-------------------------------------------------------------------------------------------------------------
以往傳統網頁設計都喜歡使用table(表格)來建構網頁,這樣的建構方式對於網頁整體排版來講並沒有太大的問題,可以完美相容於各個瀏覽器。但是時代在進步,還在用table排網頁感覺就有點過時了。會這樣說並不是想引起table和div之戰,而是想要說對於網頁的維護,table表格是比較麻煩一點的,再加上程式碼不太乾淨、過多的巢狀,對於搜尋引擎來講,也比較難發現其中重要的部分。
那如果用CSS+DIV進行網頁排版,就會比較好嗎?基本上是可以這樣講,但是大家又會遇到網頁校正的問題,一口氣要調整四、五種版本的瀏覽器,這樣很可能讓網頁設計者又跑回去用table表格排版。但其實在CSS中,已經有語法是支援表格的了,並不是對表格進行樣簡單的樣式定義,而是透過CSS的表格屬性,完美畫出表格,排除瀏覽器相容的問題,讓傳統的table排版的設計師,也可以快速轉換。
在香腸之前的imXD佈景版本中,就已經將分類文章改採清單的排版方式,目的主要是不讓搜尋引擎收錄過多的重複內容,另一方面也不希望大家找文章不好找,所以改用清單的方式。本來想說使用table來產生清單排版,免除瀏覽器校正問題,但礙於搜尋引擎對表格式的網頁不好解析其內容,所以還是使用DIV排版,並默默的校正一堆瀏覽器。
但是這回imXD5因為網頁HTML5化,因此所有的CSS與DIV幾乎是重構的狀態,所以在本來的分類文章清單中,樣式也順便進行重構,可是問題來了?「重構=花時間」,因為要用CSS+DIV模擬成table的樣式,如果一直使用float來排版,校正上其實很麻煩,當然在瀏覽器的校正上,更是頭大。後來找了一下發現有有不錯的好東西,在diplay的屬性上,有table相關的屬性值可以使用!

傳統的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-group:對應
  • 標籤,以表格方式顯示。

  • table-row:對應
  • 標籤。

  • table-cell:對應
  • 標籤。

  • table-caption:對應
  • 標籤。


  • table-column:對應

  • 標籤

  • table-column-group:對應

  • 標籤。

  • table-header-group:對應 標籤。


  • table-footer-group:對應 標籤。


  • IE7以下不相容

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

這個網誌中的熱門文章

原來Google雲端硬碟也能開放「匿名上傳」,做為學生作業、比賽稿件上傳就不用再傷腦筋了!(Google Apps Script應用服務指令碼)

「Google 語音輸入法」、「訊飛中文語音輸入法」APP ,讓智慧型裝置也能輕鬆「離線」進行語音輸入!

OnlineVideoConverter 雲端影片擷取服務,讓您不只下載 youtube 影片,更能直接下載指定範圍的影片內容,幫您省下影片下載後再剪輯轉檔的時間!(也有瀏覽器擴充工具,讓使用率較高的人更方便!)