HTML表格布局實(shí)際使用詳解

什么時(shí)候會(huì)用到表格

現(xiàn)在，表格<table>一般不再用于網(wǎng)頁(yè)整體的布局。不過(guò)，在面對(duì)某些特定的設(shè)計(jì)，如表單輸入、數(shù)據(jù)呈現(xiàn)時(shí)，表格則可能是最恰當(dāng)?shù)倪x擇。

關(guān)于表格的直觀印象，就是由多個(gè)單元格（cell）整齊排列而成的元素，可以明確看出行（row）和列（column）。這可以聯(lián)想到Excel，由Excel在數(shù)據(jù)處理和統(tǒng)計(jì)上的地位，就可以理解網(wǎng)頁(yè)中表格的意義。

簡(jiǎn)單來(lái)說(shuō)，能直觀感受到多個(gè)元素是以行和列的概念排列時(shí)，用表格會(huì)讓你輕松很多。如caniuse.com中應(yīng)用表格的例子：

表格布局計(jì)算

使用表格很簡(jiǎn)單，但有時(shí)候表格最終為每一個(gè)格子呈現(xiàn)的狀態(tài)，可能不是你想要的。比如說(shuō)某些格子出現(xiàn)了換行，然后整個(gè)表格就因?yàn)閾Q行看起來(lái)十分不美觀。尤其是用于數(shù)據(jù)呈現(xiàn)的表格，寬度分配是一個(gè)很重要的話題，你可能需要為每一列格子可能呈現(xiàn)的數(shù)據(jù)情況，對(duì)表格的總寬度做精打細(xì)算。

這是因?yàn)?，表格在布局上有自己的特性，它?huì)遵循一定的原理，通過(guò)計(jì)算，確定出它的實(shí)際布局。接下來(lái)，本文以實(shí)際的表格測(cè)試示例，探討表格是如何計(jì)算自己的布局的。
初始聲明

本文只針對(duì)應(yīng)用表格最常見(jiàn)的方法，而不會(huì)列出所有的情況。不同瀏覽器對(duì)表格的部分概念的解析有差異，但布局計(jì)算是基本一致的（如果有差異，會(huì)單獨(dú)提及）。

接下來(lái)用的測(cè)試表格都會(huì)以這樣的外觀呈現(xiàn)（內(nèi)容取自零之軌跡）：

同時(shí)，表格都會(huì)設(shè)置border-collapse:collapse;和border-spacing:0;。這也是應(yīng)用表格的最常用做法，Normalize.css把這部分用作了初始化定義。
兩種算法

定義在<table>元素上的css屬性table-layout，將決定表格在布局計(jì)算時(shí)應(yīng)用的算法。它有兩種值，auto和fixed。在通常情況下，都使用默認(rèn)值auto。

這兩種算法的差異在于表格的寬度布局是否與表格中的數(shù)據(jù)內(nèi)容有關(guān)。本文會(huì)分別討論在這兩種取值時(shí)，表格的布局計(jì)算原理。
自動(dòng)表格布局-auto

自動(dòng)表格布局的特點(diǎn)是，表格的寬度布局與表格中的所有數(shù)據(jù)內(nèi)容有關(guān)，它需要在獲取所有表格內(nèi)容后才能確定最終的寬度布局，然后再一起顯示出來(lái)。

如此看來(lái)，要點(diǎn)就是“內(nèi)容相關(guān)”了。如果表格定義了固定寬度（這里是500px），而所有的單元格都不定義寬度（只討論css定義寬度），會(huì)如何呢？來(lái)看結(jié)果：

上面這個(gè)表格中，空白的部分是寫(xiě)了&nbsp;空格。經(jīng)過(guò)比較，可以發(fā)現(xiàn)以下幾點(diǎn)：

    第2列和第3列寬度相同。
    第1列的寬度和后面任意一列的寬度比似乎是2:1。
    加上邊框和內(nèi)邊距，所有列的寬度總合，等于表格定義的寬度。

每個(gè)單元格都沒(méi)有定義寬度，所以寬度布局完全由具體的內(nèi)容數(shù)據(jù)（文本信息）決定的。如何解釋這樣的結(jié)果呢？可以先直觀地推測(cè)這樣的邏輯：

    第1步，從每一列中選取文字內(nèi)容最多（理解為不換行的情況下，文本所占據(jù)的寬度最寬）的，作為“代表”。
    第2步，比較各列的“代表”的寬度，然后按照它們的寬度比例關(guān)系，為它們分配表格的總寬度，包括邊框和內(nèi)邊距。

參照上面的邏輯，再來(lái)反觀一下前面的表格，是不是挺有一些道理？注意，前面說(shuō)寬度比“似乎”是2:1，這個(gè)會(huì)是？來(lái)看看去掉內(nèi)邊距的版本：

用前端調(diào)試工具具體看一下上面的單元格的寬度，你會(huì)發(fā)現(xiàn)這個(gè)表格和之前不同，比例已經(jīng)非常接近2:1（是的，還有的這一小點(diǎn)是因?yàn)檫吙颍菦](méi)有邊框就沒(méi)法區(qū)分列了）。

可見(jiàn)，在分析寬度比例關(guān)系的時(shí)候，是會(huì)把內(nèi)容寬度和內(nèi)邊距，以及邊框都考慮在內(nèi)的。這也說(shuō)明，不是衡量文字的數(shù)目，而是衡量文字在不換行狀態(tài)所能占據(jù)的寬度（這里的2:1來(lái)源于中文漢字是等寬的）。使用內(nèi)邊距自然只是為了做出更美觀的表格 :) 。

有寬度定義的時(shí)候，又會(huì)怎樣呢？下面是一個(gè)部分單元格有寬度定義的表格：

它的對(duì)應(yīng)html代碼是：

上面這個(gè)表格可以發(fā)現(xiàn)以下幾點(diǎn)：

    寬度定為5px的單元格，實(shí)際呈現(xiàn)寬度是13px，這正好是單個(gè)漢字的寬度，同一列的有漢字的單元格則以最小單元格寬度的形式排列文字（所以，換行了）。
    寬度定為200px的單元格，實(shí)際呈現(xiàn)寬度是200px，盡管同列還有一個(gè)寬度70px的定義。
    沒(méi)有確切寬度定義的第3列，最后得到了表格在分配完第1列和第2列后全部的剩余寬度。

對(duì)此的推斷是，存在寬度定義和不存在寬度定義的列都有的情況時(shí)：

    如果單元格定義寬度小于其內(nèi)容的最小排列寬度（和不換行排列方式相反，盡可能多行排列在單元格內(nèi)時(shí)，單元格所需的寬度），則該單元格所在的列，都會(huì)以最小排列方式呈現(xiàn)內(nèi)容。
    如果同一列中，單元格的內(nèi)容寬度（不換行形式，后文這個(gè)詞都是這個(gè)意思）小于該列中最大的寬度定義，則該列的實(shí)際寬度等于該寬度定義。
    不存在寬度定義的列，會(huì)先由表格分配寬度給有寬度定義的列之后，再分配給它們（同樣，它們之間的比例取決于內(nèi)容寬度）。

最前邊的沒(méi)有寬度定義的可以看做情況1，這里有的列有寬度定義，有的又沒(méi)有，可以看做情況2。下面是情況3，即所有的列都有寬度定義時(shí)：

對(duì)應(yīng)html代碼：

上面的表格中，去掉了內(nèi)邊距，因此可以清晰地由寬度定義值，得到這3列的寬度比例是2:1:1。這里還有一個(gè)條件，就是單元格內(nèi)的內(nèi)容寬度不超過(guò)寬度定義值。經(jīng)過(guò)測(cè)試，IE7及以下在內(nèi)容超過(guò)寬度定義值和其他瀏覽器表現(xiàn)不同。

從這個(gè)表格例子可以知道，如果所有的列都有寬度定義，而這些寬度定義的值的和小于表格的寬度，則表格會(huì)在分配完它們寬度定義值所對(duì)應(yīng)的寬度后，繼續(xù)把剩余寬度，按照它們的寬度比例，也分配給它們。

以上即是對(duì)自動(dòng)表格布局，且表格本身是定義了固定寬度時(shí)，3種情況的分析。如果表格本身不定義寬度，還會(huì)有更多情況，而且會(huì)和表格的包含塊（containing block，詳情）有關(guān)，如果以后有合適機(jī)會(huì)，再做討論（所謂文章篇幅有限...）。
固定表格布局-fixed

固定表格布局的特點(diǎn)是，表格的寬度布局和表格中的數(shù)據(jù)內(nèi)容無(wú)關(guān)，只需要接收到表格第一行的信息，就可以確定最終的寬度布局，并開(kāi)始顯示。

固定表格布局是“內(nèi)容無(wú)關(guān)”的，而且它強(qiáng)調(diào)“第一行”。請(qǐng)看下面這個(gè)表格示例：

對(duì)應(yīng)html代碼：

固定表格布局的邏輯要簡(jiǎn)單很多，表述如下：

    只取第一行的信息，無(wú)視第一行之后的所有單元格的內(nèi)容，及寬度定義
    在第一行中，如果單元格有寬度定義，則先分配它們所需的寬度，然后剩余的寬度平均分配給沒(méi)有寬度定義的單元格
    第一行的單元格的寬度分配將決定表格的寬度布局，第一行之后的內(nèi)容不會(huì)再改變布局。

還需要注意的時(shí)候，使用固定表格布局，則一定要給表格元素定義寬度，如果它的寬度沒(méi)有定義（也就是auto默認(rèn)值），瀏覽器會(huì)改用自動(dòng)表格布局。
結(jié)尾聲明

與表格有關(guān)的其實(shí)還有<colgroup>、<thead>、<tfoot>、<caption>等元素，只是在最常見(jiàn)的用法中，并不需要用到它們。實(shí)際上，它們也在表格的布局計(jì)算的考慮之內(nèi)。再加上還有單元格合并的情況，你大概可以想象到表格布局計(jì)算其實(shí)是多么復(fù)雜的東西。

W3C的文檔提到，表格的布局計(jì)算（自動(dòng)表格布局）尚沒(méi)有成為規(guī)范。關(guān)于W3C對(duì)表格布局計(jì)算的說(shuō)明，請(qǐng)參照Table width algorithms。
結(jié)語(yǔ)

其實(shí)就表格布局計(jì)算原理這一點(diǎn)，做這樣細(xì)致的推斷，并沒(méi)有多少實(shí)用性。只是說(shuō)，在需要解決細(xì)節(jié)問(wèn)題的時(shí)候，有這些信息做參考的話，會(huì)有所幫助，盡管這樣的機(jī)會(huì)不多。

不過(guò)，可以就本文的內(nèi)容，得到一個(gè)比較有意義的結(jié)論：表格定義寬度，且所有單元格都不定義寬度，那么自動(dòng)布局的表格會(huì)盡可能讓你的所有數(shù)據(jù)都不換行，而如果碰到換行影響美觀的情況，說(shuō)明必須要精簡(jiǎn)數(shù)據(jù)或者減小邊距，而不是再自行嘗試重做寬度分配。

這一次做這種實(shí)測(cè)和推斷，感到針對(duì)具體情況細(xì)分后再說(shuō)明，會(huì)比一次性系統(tǒng)地完整表述，更容易理解，也許算是語(yǔ)文練習(xí)？