拿什么來(lái)拯救你，我的table(海玉博客)

table曾經(jīng)在網(wǎng)頁(yè)開(kāi)發(fā)中占據(jù)著舉重若輕的地位——布局，即使到了Web2.0我們依舊可以看到其布局的身影。然而技術(shù)是不斷進(jìn)步的Div+Css組合方式終究敲開(kāi)了老式布局的大門刮起了新的一輪布局浪潮。之后而來(lái)的就是新仇舊恨，許許多多無(wú)論是對(duì)table有意見(jiàn)亦或沒(méi)意見(jiàn)的人也開(kāi)始了對(duì)table筆誅口伐——臃腫的代碼、無(wú)語(yǔ)義標(biāo)簽、繁雜的書(shū)寫(xiě)方式等等。記住，table被創(chuàng)造之初并非是用于布局，而是顯示數(shù)據(jù)。舍棄table布局，并非舍棄table本身。拿什么來(lái)拯救你，我的table。

何為table：

table者Html表格也，數(shù)據(jù)之載體。

下面是一個(gè)比較標(biāo)準(zhǔn)的table代碼寫(xiě)法：

不得不說(shuō)的table-layout:fixed屬性

table-layout: auto（默認(rèn)）|fixed。

參數(shù)：

auto：默認(rèn)的自動(dòng)算法。布局將基于各單元格的內(nèi)容。表格在每一單元格讀取計(jì)算之后才會(huì)顯示出來(lái)，速度很慢。
fixed：固定布局的算法。在這算法中，水平布局是僅僅基于表格的寬度，表格邊框的寬度，單元格間距，列的寬度，而和表格內(nèi)容無(wú)關(guān)。 解析速度快。

fixed布局模型的工作步驟：
1.width屬性值不是auto的所有列元素會(huì)根據(jù)width值設(shè)置該列的寬度。
2.表首行中位于該列的單元格width，根據(jù)該單元格寬度設(shè)置此列的寬度。如果這個(gè)單元格跨多列，則寬度在這些列上平均分配。
3.在以上兩步之后，如果列的寬度仍為auto，會(huì)自動(dòng)確定其大小，使其寬度盡可能相等。此時(shí)，表的寬度設(shè)置為表的width值或列寬度之和(取其中較大者)。如果表度度大于其列寬總和，將二者之差除以列數(shù)，再把得到的這個(gè)寬度增加到每一列上。
這種方法的速度很快，因?yàn)樗辛袑挾加杀淼牡谝恍卸x。首行后所有行中的單元格都根據(jù)首行所定義的列寬確定大小。后面這些行中的單元格不會(huì)改變列寬。這意味著為這些單元格指定的width值都會(huì)被忽略。

一般在做復(fù)雜表格html的時(shí)候，有時(shí)候你會(huì)發(fā)現(xiàn)，無(wú)論怎么調(diào)整第一行每列的width，列寬還是會(huì)發(fā)生出乎于你意料之外的變動(dòng)（例如一長(zhǎng)串英文文本，并且中間無(wú)空格分隔的情況你要這列限定寬度，使得過(guò)長(zhǎng)文字強(qiáng)制換行且不撐破表格，而往往結(jié)果是怎么也調(diào)整不到合適的寬度），這個(gè)時(shí)候在萬(wàn)般無(wú)奈之下，你可以使用table-layout:fixed。

table疑難雜癥之換行

用table顯示數(shù)據(jù)有時(shí)候會(huì)有一個(gè)頭疼的地方，即不換行顯示某段文字，尤其在表頭th中用到地方最多。其實(shí)你所頭疼的并非換行，而是其背后的瀏覽器兼容加性使得換行的困難程度大大增。這里，你可以查看攻略強(qiáng)制換行與強(qiáng)制不換行這篇文章得到啟示，文中詳細(xì)討論了在不同情況下攻略換行的方法。

總體來(lái)說(shuō)在table中換行個(gè)人比較推薦的方式為：先為table設(shè)定table-layout:fixed，基本上設(shè)定完這個(gè)屬性后基本的換行問(wèn)題都能夠解決而不會(huì)出現(xiàn)table中td,th因?yàn)槔锩娓鱾€(gè)內(nèi)容的多寡發(fā)生搶奪其他td,th寬度的情形發(fā)生。這時(shí)如果你依舊有強(qiáng)制換行問(wèn)題，那么在此td中內(nèi)部加一層div，再利用word-wrap:break-word; word-break:break-all;這倆個(gè)CSS方法可以解決換行的問(wèn)題。

常見(jiàn)而又生疏的幾個(gè)table標(biāo)簽

thead、tfoot以及tbody

這三個(gè)標(biāo)簽是所謂xhtml的產(chǎn)物，主要是使您有能力對(duì)表格中的行進(jìn)行分組。當(dāng)您創(chuàng)建某個(gè)表格時(shí)，您也許希望擁有一個(gè)標(biāo)題行，一些帶有數(shù)據(jù)的行，以及位于底部的一個(gè)總計(jì)行。這種劃分使瀏覽器有能力支持獨(dú)立于表格標(biāo)題和頁(yè)腳的表格正文滾動(dòng)。當(dāng)長(zhǎng)的表格被打印時(shí)，表格的表頭和頁(yè)腳可被打印在包含表格數(shù)據(jù)的每張頁(yè)面上。個(gè)人認(rèn)為其主要用途適用于超長(zhǎng)表格的顯示優(yōu)化。

thead標(biāo)簽表示HTML表頭
表格的頭部thead，可以使用單獨(dú)的樣式定義表頭，并且在打印時(shí)可以在分頁(yè)的上部打印表頭。

thead標(biāo)簽表示HTML頁(yè)腳
表格的頁(yè)腳tfoot，可以使用單獨(dú)的樣式定義頁(yè)腳（腳注或表注），并且在打印時(shí)可以在分頁(yè)的下部打印頁(yè)腳。

tbody標(biāo)簽表示HTML表體
瀏覽器顯示表格時(shí)，通常是完全下載表格后，再全部顯示，所以當(dāng)表格很長(zhǎng)時(shí)，可以使用tbody分段顯示。

注釋：如果您使用 thead、tfoot以及tbody元素，您就必須使用全部的元素。它們的出現(xiàn)次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數(shù)據(jù)前就可呈現(xiàn)表頭和頁(yè)腳了。您必須在table元素內(nèi)部使用這些標(biāo)簽，且thead內(nèi)部必須擁有tr標(biāo)簽。所以書(shū)寫(xiě)更為標(biāo)準(zhǔn)的table方式即如下代碼：

col和colgroup

這倆標(biāo)簽也是xhtml的產(chǎn)物，功能強(qiáng)大，兼容奇差。

col標(biāo)簽為表格中一個(gè)或多個(gè)列定義屬性值。

colgroup標(biāo)簽用于對(duì)表格中的列進(jìn)行組合，以便對(duì)其進(jìn)行格式化。

它們的作用主要就是來(lái)控制單元格的寬度了，這樣省去單獨(dú)定義每個(gè)單元格的麻煩，過(guò)去我們往往是在第一行中的th或者td上定義寬度來(lái)規(guī)定每列的寬度，而col不但可以定義寬度還能同時(shí)定義其他的屬性，例如可以通過(guò)col來(lái)控制幾列寬度的總和，還可以控制這列的背景色。但理想是豐滿的，現(xiàn)實(shí)是骨干的，正如前面所說(shuō)，功能越大不代表其兼容性也越強(qiáng)，據(jù)現(xiàn)有的測(cè)試下來(lái)，col和colgroup能發(fā)揮作用還能保證兼容的應(yīng)用就只有倆：width和background。對(duì)于width，個(gè)人寧愿使用常規(guī)方式，第一行設(shè)置寬度，保證列寬。對(duì)于bacground，一般實(shí)際中表格大面積使用不同背景的情況也很少見(jiàn)。故個(gè)人認(rèn)為：能不用盡量不用。

何處用table

個(gè)人認(rèn)為，在一個(gè)放置數(shù)據(jù)非常密集且又非常序列化的一個(gè)容器里，用table準(zhǔn)沒(méi)錯(cuò)。最常見(jiàn)的例子就是我們常見(jiàn)的購(gòu)物訂單結(jié)算頁(yè)面，上面列有你訂單詳情：商品名稱、單價(jià)、購(gòu)買數(shù)量、金額小計(jì)、運(yùn)費(fèi)等等，最后最下方還會(huì)有一個(gè)最終訂單金額的結(jié)果，table在這里可謂是如魚(yú)得水，達(dá)到了數(shù)據(jù)之載體的神效。

以上是對(duì)常見(jiàn)的table知識(shí)點(diǎn)進(jìn)行了一次梳理，對(duì)常用到得幾個(gè)地方進(jìn)行了分析整理。期待看到這篇文章的你能夠以正確的態(tài)度看待table，使用table。希望本文可以稍稍的挽救你吧，我的table。謝謝。