table曾經在網頁開發中占據著舉重若輕的地位——布局，即使到了Web2.0我們依舊可以看到其布局的身影。然而技術是不斷進步的Div+Css組合方式終究敲開了老式布局的大門刮起了新的一輪布局浪潮。之后而來的就是新仇舊恨，許許多多無論是對table有意見亦或沒意見的人也開始了對table筆誅口伐——臃腫的代碼、無語義標簽、繁雜的書寫方式等等。記住，table被創造之初并非是用于布局，而是顯示數據。舍棄table布局，并非舍棄table本身。拿什么來拯救你，我的table。
何為table：
table者Html表格也，數據之載體。
下面是一個比較標準的table代碼寫法：
代碼如下:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>AUG</td>
<td>18</td>
</tr>
</table>
簡單的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方式即如下代碼：
代碼如下:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<thead>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Month Lists</th>
<th>Date Lists</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>AUG</td>
<td>18</td>
</tr>
</tbody>
</table>
個人認為這個東西挺雞肋，取之無用，棄之可惜。小項目可以增加些語義化，但因為曾經遇到過有多個不同表頭在同一表格顯示的窘境，限制了日后的開發，所以正式項目從可擴展的角度來說情慎用這些標簽。
col和colgroup
這倆標簽也是xhtml的產物，功能強大，兼容奇差。
col標簽為表格中一個或多個列定義屬性值。
colgroup標簽用于對表格中的列進行組合，以便對其進行格式化。
它們的作用主要就是來控制單元格的寬度了，這樣省去單獨定義每個單元格的麻煩，過去我們往往是在第一行中的th或者td上定義寬度來規定每列的寬度，而col不但可以定義寬度還能同時定義其他的屬性，例如可以通過col來控制幾列寬度的總和，還可以控制這列的背景色。但理想是豐滿的，現實是骨干的，正如前面所說，功能越大不代表其兼容性也越強，據現有的測試下來，col和colgroup能發揮作用還能保證兼容的應用就只有倆：width和background。對于width，個人寧愿使用常規方式，第一行設置寬度，保證列寬。對于bacground，一般實際中表格大面積使用不同背景的情況也很少見。故個人認為：能不用盡量不用。
何處用table
個人認為，在一個放置數據非常密集且又非常序列化的一個容器里，用table準沒錯。最常見的例子就是我們常見的購物訂單結算頁面，上面列有你訂單詳情：商品名稱、單價、購買數量、金額小計、運費等等，最后最下方還會有一個最終訂單金額的結果，table在這里可謂是如魚得水，達到了數據之載體的神效。
以上是對常見的table知識點進行了一次梳理，對常用到得幾個地方進行了分析整理。期待看到這篇文章的你能夠以正確的態度看待table，使用table。希望本文可以稍稍的挽救你吧，我的table。謝謝。
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
