深入解析HTML的table表格標(biāo)簽與相關(guān)的換行問題

何為table：
table者Html表格也，數(shù)據(jù)之載體。
下面是一個(gè)比較標(biāo)準(zhǔn)的table代碼寫法：

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

不得不說的table-layout:fixed屬性
table-layout: auto（默認(rèn)）|fixed。
參數(shù)：
auto：默認(rèn)的自動(dòng)算法。布局將基于各單元格的內(nèi)容。表格在每一單元格讀取計(jì)算之后才會(huì)顯示出來，速度很慢。
fixed：固定布局的算法。在這算法中，水平布局是僅僅基于表格的寬度，表格邊框的寬度，單元格間距，列的寬度，而和表格內(nèi)容無關(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)，無論怎么調(diào)整第一行每列的width，列寬還是會(huì)發(fā)生出乎于你意料之外的變動(dòng)（例如一長串英文文本，并且中間無空格分隔的情況你要這列限定寬度，使得過長文字強(qiáng)制換行且不撐破表格，而往往結(jié)果是怎么也調(diào)整不到合適的寬度），這個(gè)時(shí)候在萬般無奈之下，你可以使用table-layout:fixed。

常見而又生疏的幾個(gè)table標(biāo)簽
thead、tfoot以及tbody
這三個(gè)標(biāo)簽是所謂xhtml的產(chǎn)物，主要是使您有能力對表格中的行進(jìn)行分組。當(dāng)您創(chuàng)建某個(gè)表格時(shí)，您也許希望擁有一個(gè)標(biāo)題行，一些帶有數(shù)據(jù)的行，以及位于底部的一個(gè)總計(jì)行。這種劃分使瀏覽器有能力支持獨(dú)立于表格標(biāo)題和頁腳的表格正文滾動(dòng)。當(dāng)長的表格被打印時(shí)，表格的表頭和頁腳可被打印在包含表格數(shù)據(jù)的每張頁面上。個(gè)人認(rèn)為其主要用途適用于超長表格的顯示優(yōu)化。
thead標(biāo)簽表示HTML表頭
表格的頭部thead，可以使用單獨(dú)的樣式定義表頭，并且在打印時(shí)可以在分頁的上部打印表頭。
thead標(biāo)簽表示HTML頁腳
表格的頁腳tfoot，可以使用單獨(dú)的樣式定義頁腳（腳注或表注），并且在打印時(shí)可以在分頁的下部打印頁腳。
tbody標(biāo)簽表示HTML表體
瀏覽器顯示表格時(shí)，通常是完全下載表格后，再全部顯示，所以當(dāng)表格很長時(shí)，可以使用tbody分段顯示。
注釋：如果您使用 thead、tfoot以及tbody元素，您就必須使用全部的元素。它們的出現(xiàn)次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數(shù)據(jù)前就可呈現(xiàn)表頭和頁腳了。您必須在table元素內(nèi)部使用這些標(biāo)簽，且thead內(nèi)部必須擁有tr標(biāo)簽。所以書寫更為標(biāo)準(zhǔn)的table方式即如下代碼：

個(gè)人認(rèn)為這個(gè)東西挺雞肋，取之無用，棄之可惜。小項(xiàng)目可以增加些語義化，但因?yàn)樵?jīng)遇到過有多個(gè)不同表頭在同一表格顯示的窘境，限制了日后的開發(fā)，所以正式項(xiàng)目從可擴(kuò)展的角度來說情慎用這些標(biāo)簽。

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

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

table疑難雜癥之換行
用table顯示數(shù)據(jù)有時(shí)候會(huì)有一個(gè)頭疼的地方，即不換行顯示某段文字，尤其在表頭th中用到地方最多。其實(shí)你所頭疼的并非換行，而是其背后的瀏覽器兼容加性使得換行的困難程度大大增。
總體來說在table中換行個(gè)人比較推薦的方式為：先為table設(shè)定table-layout:fixed，基本上設(shè)定完這個(gè)屬性后基本的換行問題都能夠解決而不會(huì)出現(xiàn)table中td,th因?yàn)槔锩娓鱾€(gè)內(nèi)容的多寡發(fā)生搶奪其他td,th寬度的情形發(fā)生。這時(shí)如果你依舊有強(qiáng)制換行問題，那么在此td中內(nèi)部加一層div，再利用word-wrap:break-word; word-break:break-all;這倆個(gè)CSS方法可以解決換行的問題。

攻略強(qiáng)制換行與強(qiáng)制不換行
強(qiáng)制換行與強(qiáng)制不換行問題曾經(jīng)一度困擾著我，每當(dāng)遇到換行問題時(shí)候那就是痛苦回憶的開始，現(xiàn)在終于痛定思痛，一鼓作氣把這個(gè)長期頑固問題給解決。
強(qiáng)制換行與強(qiáng)制不換行用到的屬性
我們一般控制換行所用到的CSS屬性一共有三個(gè)：word-wrap; word-break; white-space。這三個(gè)屬性可以說是專為了文字?jǐn)嘈卸鴦?chuàng)造出來的。首先我們得知道這三個(gè)屬性到底是做什么用地：

word-wrap語法
word-wrap: normal(默認(rèn)) | break-word
各個(gè)瀏覽器均能識別
參數(shù)：
normal: 允許內(nèi)容頂開指定的容器邊界。
break-word: 內(nèi)容將在邊界內(nèi)換行。必要時(shí)會(huì)觸發(fā)word-break（注意：請分辨清楚word-break和break-word這倆個(gè)是不同的東西，一為屬性另為參數(shù)）。
說明：
word-wrap是控制是否“為詞斷行”的，設(shè)置或檢索當(dāng)前行超過指定容器的邊界時(shí)是否斷開轉(zhuǎn)行。中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。
范例：
congratulation這個(gè)單詞屬于長串英文，word-wrap:break-word整個(gè)單詞看成一個(gè)整體，如果該行末端寬度不夠顯示整個(gè)單詞，它會(huì)自動(dòng)把整個(gè)單詞放到下一行，而不會(huì)把單詞截?cái)?，這就是對于長串文字不起作用的解釋。word-wrap:normal是默認(rèn)情況，英文單詞不被拆開。
結(jié)論：
作用范圍僅為div這類標(biāo)準(zhǔn)塊級元素，th,td這類table元素雖然識別但是沒有效果（如果為td,th加上寬度word-wrap在IE下是能夠發(fā)揮效果的，但根據(jù)完全兼容性方便記憶角度上來說還是以前面的結(jié)論為準(zhǔn)）。

word-break語法
word-break: normal(默認(rèn)) | break-all | keep-all
參數(shù)：
normal: 依照亞洲語言和非亞洲語言的文本規(guī)則，允許在字內(nèi)換行。
break-all: 該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本。
keep-all: 與所有非亞洲語言的normal相同。對于中文，韓文，日文，不允許字?jǐn)嚅_。適合包含少量亞洲文本的非亞洲文本。
說明：
word-break:break-all，是斷開單詞。在單詞到邊界時(shí)，下個(gè)字母自動(dòng)到下一行。主要解決了長串英文的問題（恰恰彌補(bǔ)了上面word-wrap:break-word對于長串文字不起作用的缺陷）。
范例：
繼續(xù)以上面congratulation這個(gè)單詞屬于長串英文，word-break:break-all它會(huì)把單詞截?cái)?，該行末端就?huì)變成類似conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。
word-break:keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時(shí)，不用word-wrap，中文就不會(huì)換行了。（英文語句正常。）
結(jié)論：
作用范圍僅為div這類標(biāo)準(zhǔn)塊級元素，th,td這類table元素雖然識別但是沒有效果（經(jīng)測試Chrome下word-break:break-all是有效果的，但根據(jù)完全兼容性方便記憶角度上來說還是以前面的結(jié)論為準(zhǔn)）。Firefox,Opera是無法識別word-break的，更不用提Firefox下的th,td中使用word-break的效果了。

white-space語法
white-space: normal(默認(rèn)) | pre | nowrap
參數(shù)：
normal: 默認(rèn)?？瞻讜?huì)被瀏覽器忽略。
pre: 空白會(huì)被瀏覽器保留。其行為方式類似HTML中的pre標(biāo)簽。
nowrap: 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到br標(biāo)簽為止。
說明：
對于pre屬性，其實(shí)就是HTML中連續(xù)的多個(gè)空白符會(huì)被合并，然后為了不讓他合并（最常用的場合就是表示代碼文字縮進(jìn)）讓其中的空白符繼續(xù)保留而不需要我們增加額外的樣式和標(biāo)簽來控制它的縮進(jìn)和換行。pre標(biāo)簽的原理也是一樣的內(nèi)部默認(rèn)有了個(gè)white-space:pre。
對于nowrap屬性，這個(gè)是強(qiáng)制不換行核心，一般強(qiáng)制不換行就是利用這個(gè)屬性。Firefox的div和td中，以及IE的div中，均沒有問題。唯一的瑕疵就是在IE的td中會(huì)有一個(gè)問題，如果td沒有指定寬度，則nowrap仍然有效，如果td有寬度，并且文字中無標(biāo)點(diǎn)、無空格（例如中文長串文字），nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問題。
 

總結(jié)強(qiáng)制換行：
如果在div這類標(biāo)準(zhǔn)塊級元素中需要強(qiáng)制換行，最普遍的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺點(diǎn)就是會(huì)導(dǎo)致如果恰巧該行末端寬為一個(gè)長串英文單詞，那么該單詞會(huì)被撕開的尷尬樣式(而且FF不識別word-break，反而不會(huì)撕開這個(gè)單詞)。個(gè)人認(rèn)為如果你這個(gè)div里面放的類似于URL這個(gè)長串地址，那么用此方案是非常不錯(cuò)的選擇（注意：由于FF不識別word-break，所以無法保證每行末端會(huì)整齊的斷開URL單詞，但這也是無奈的選擇）。如果不是放置URL這類可以斷開的長串英文，而是英文句子的話，那么使用word-wrap:break-word;即可。至于網(wǎng)上看到有word-wrap:break-word; overflow:hidden;這么個(gè)寫法，據(jù)說可以兼容IE和FF，但經(jīng)過親自測試似乎沒有什么特別效果。

總結(jié)強(qiáng)制不換行：
強(qiáng)制不換行的問題到是比較容易分析的，就如上面所討論的那樣使用white-space:nowrap，F(xiàn)irefox的div和td中，以及IE的div中，均沒有問題。唯一的瑕疵就是在IE的td中會(huì)有一個(gè)問題，如果td沒有指定寬度，則nowrap仍然有效，如果td有寬度，并且文字中無標(biāo)點(diǎn)、無空格（例如中文長串文字），nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問題。綜合下來，比較穩(wěn)妥的方式是在文字與td之間再套一層div，然后使用nowrap，那么就是強(qiáng)制不換行。注意這時(shí)候很有可能文字會(huì)過多導(dǎo)致溢出容器，所以你還得加一個(gè)overflow:hidden，防止溢出容器，這樣子就可以兼容各個(gè)瀏覽器了。
總結(jié)了那么多，發(fā)覺似乎也就那幾個(gè)屬性在瀏覽器里面的各種兼容性的平衡，現(xiàn)在似乎尚未有一個(gè)完美的方案可以全部兼容各個(gè)瀏覽器，我們所能做的最多的就是盡可能的保持個(gè)瀏覽器顯示一致。如果你還是覺得一定要兼容所有的瀏覽器，那么最后的方案那么就是動(dòng)用JS了，以后的文章中我會(huì)考慮從以最小的JS代價(jià)來滿足此要求，但這暫不在本文所討論的范圍內(nèi)。