拿什麼來拯救你，我的table(海玉博客)_HTML/Xhtml_網頁製作

table曾經在網頁開發中佔據著舉重若輕的地位－佈局，即使到了Web2.0我們依舊可以看到其版面的身影。然而技術是不斷進步的Div Css組合方式終究敲開了老式佈局的大門刮起了新的一輪佈局浪潮。之後而來的就是新仇舊恨，許許多多無論是對table有意見亦或沒意見的人也開始了對table筆誅口伐——臃腫的代碼、無語義標籤、繁雜的書寫方式等等。記住，table被創造之初並非用於佈局，而是顯示資料。捨棄table佈局，並非捨棄table本身。拿什麼來拯救你，我的table。

何為table：

table者Html表格也，資料之載體。

以下是比較標準的table程式碼寫法：

複製程式碼

複製程式碼

程式碼如下:

Month	Date
AUG	18

簡單的HTML表格由table元素以及一個或多個tr、th或td元素組成。 tr元素定義表格行，th元素定義表頭的單元格，td元素定義表格單元格。 border屬性規定表格邊框的寬度，cellpadding規定單元邊緣與其內容之間的空白，cellspacing規定單元格之間的空白，這三個屬性我們一般手動設定為0避免瀏覽器差異。 width屬性規定表格的寬度，因為table寬度是隨內部元素的寬度撐起多少而變化，而常用情況下我們希望table是同外部容器等寬，所以常常默認設置100%寬度使之撐滿容器。

不得不說的table-layout:fixed屬性

table-layout: auto（預設）|fixed。

參數：

auto：預設的自動演算法。佈局將基於各單元格的內容。表格在每一單元格讀取計算之後才會顯示出來，速度很慢。
fixed：固定佈局的演算法。在這個演算法中，水平佈局是僅基於表格的寬度，表格邊框的寬度，單元格間距，列的寬度，而和表格內容無關。 解析速度快。

fixed佈局模型的工作步驟：
1.width屬性值不是auto的所有列元素會根據width值設定該列的寬度。
2.表首行中位於該列的單元格width，根據該單元格寬度設定此列的寬度。如果這個儲存格跨多個列，則寬度在這些列上平均分配。
3.在以上兩步驟之後，若列的寬度仍為auto，會自動決定其大小，使其寬度盡可能相等。此時，表的寬度設定為表的width值或列寬度總和(取其中較大者)。如果表度度大於其列寬總和，將二者差除以列數，再把得到的這個寬度增加到每一列上。
這種方法的速度很快，因為所有列寬都由表格的第一行定義。首行後所有行中的儲存格都根據首行所定義的列寬來決定大小。後面這些行中的儲存格不會改變列寬。這意味著為這些單元格指定的width值都會被忽略。

一般在做複雜表格html的時候，有時候你會發現，無論怎麼調整第一行每列的width，列寬還是會發生出乎於你意料之外的變動（例如一長串英文文本，並且中間無空格分隔的情況你要這列限定寬度，使得過長文字強制換行且不撐破表格，而往往結果是怎麼也調整不到合適的寬度），這個時候在萬般無奈之下，你可以使用table-layout:fixed。

table疑難雜症之換行

用table顯示資料有時候會有一個頭痛的地方，即不換行顯示某段文字，尤其在表頭th中用到地方最多。其實你所頭痛的並非換行，而是其背後的瀏覽器相容加性使得換行的困難程度大大增加。這裡，你可以查看攻略強制換行與強制不換行這篇文章得到啟示，文中詳細討論了在不同情況下攻略換行的方法。

整體來說在table中換行個人比較推薦的方式為：先為table設定table-layout:fixed，基本上設定完這個屬性後基本的換行問題都能夠解決而不會出現table中td ,th因為裡面各個內容的多寡發生搶奪其他td,th寬度的情形發生。這時如果你依舊有強制換行問題，那麼在此td中內部加一層div，再利用word-wrap:break-word; word-break:break-all;這兩個CSS方法可以解決換行的問題。

常見又生疏的幾個table標籤

thead、tfoot以及tbody

這三個標籤是所謂xhtml的產物，主要是讓您有能力將表格中的行分組。當您建立某個表格時，您也許希望擁有一個標題行，一些帶有資料的行，以及位於底部的一個總計行。這種劃分使瀏覽器有能力支援獨立於表格標題和頁腳的表格正文滾動。當長的表格被列印時，表格的表頭和頁腳可列印在包含表格資料的每張頁面上。個人認為其主要用途適用於超長表格的顯示優化。

thead標籤表示HTML表頭
表格的頭部thead，可以使用單獨的樣式定義表頭，並且在打印時可以在分頁的上部打印表頭。

thead標籤表示HTML頁腳
表格的頁腳tfoot，可以使用單獨的樣式定義頁腳（腳註或表註），並且在打印時可以在分頁的下部打印頁腳。

tbody標籤表示HTML表體
瀏覽器顯示表格時，通常是完全下載表格後，再全部顯示，所以當表格很長時，可以使用tbody分段顯示。

註解：如果您使用 thead、tfoot以及tbody元素，您就必須使用全部的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有資料前就可呈現表頭和頁腳了。您必須在table元素內部使用這些標籤，且thead內部必須擁有tr標籤。所以書寫比較標準的table方式即如下程式碼：

複製程式碼

程式碼如下:

Month	Date
Month Lists th>	Date Lists
AUG	18

個人認為這個東西挺雞肋，取之無用，棄之可惜。小專案可以增加些語意化，但因為曾經遇到有多個不同表頭在同一表格顯示的窘境，限制了日後的開發，所以正式專案從可擴展的角度來說情慎用這些標籤。

col和colgroup

這兩個標籤也是xhtml的產物，功能強大，相容於奇差。

col標籤為表格中一個或多個欄位定義屬性值。

colgroup標籤用於對表格中的欄位進行組合，以便對其進行格式化。

它們的作用主要就是來控制單元格的寬度了，這樣省去單獨定義每個單元格的麻煩，過去我們往往是在第一行中的th或者td上定義寬度來規定每列的寬度，而col不但可以定義寬度還能同時定義其他的屬性，例如可以透過col來控制幾列寬度的總和，還可以控制這列的背景色。但理想是豐滿的，現實是骨幹的，正如前面所說，功能越大不代表其兼容性也越強，根據現有的測試下來，col和colgroup能發揮作用還能保證兼容的應用就只有倆：width和background。對於width，個人寧願使用常規方式，第一行設定寬度，保證列寬。對於bacground，一般實際中表格大面積使用不同背景的情況也很少見。故個人認為：能不用盡量不用。

何處用table

個人認為，在一個放置資料非常密集且又非常序列化的一個容器裡，用table準沒錯。最常見的例子就是我們常見的購物訂單結算頁面，上面列有你訂單詳情：商品名稱、單價、購買數量、金額小計、運費等等，最後最下方還會有一個最終訂單金額的結果，table這裡可謂如魚得水，達到了數據之載體的神效。

以上是對常見的table知識點進行了一次梳理，對常用到得幾個地方進行了分析整理。期待看到這篇文章的你能夠以正確的態度看待table，使用table。希望這篇文章可以稍稍的挽救你吧，我的table。謝謝。