在網(wǎng)頁設計時，自動布局模型盡管沒有固定布局那么快，不過對你來說可能更熟悉，因為這正是HTML 表使用多年的模型。在大多數(shù)當前用戶代理中，只要表的width為auto就會觸發(fā)使用這個模型，而不論table-layout的值是什么，不過這一點不能保證。

為什么自動布局比較慢，因為在用戶代理査看完表的所有內容之前無法確定表的布局。也就是說，自動布局要求用戶代理毎得到一個新單元格時都完成整個表的布局。這通常需要用戶代理完成一些計算，然后再返回頭來對表完成第二組計算。必須充分分析單元格的內容，因為與HTML表類似，表布局完全取決于單元格的內容。如果最后一行一個單元格中有一個400像素寬的圖像，就會要求它上面的所有單元格（同列中的單元格）都是400像素寬，因此，必須計算每個單元格的寬度，而且在確定表的布局之前還必須做一些調整（可能觸發(fā)另一輪內容寬度計算）。

這個模型的詳細過程見以下步驟：

1、對于一列中的各個單元格，計算最小和最大單元格寬度。

a. 確定顯示內容所需的最小寬度。要記住，內容可以流入多行，不過不能超出單元格框。如果單元格的width值大于最小可能寬度，則把最小單元格寬度設豎為該width值。如果單元格的width值為auto，最小單元格寬度則設置為最小內容寬度。

b. 對于最大寬度，要確定完全顯示內容而且不包括換行符所需的寬；度（除非明確要求，例如指出可以有<br>元素），這個值就是最大單元格寬度

2、對于各一列，計算最小和最大列寬。

a. 列的最小寬度由該列中所有單元格的最小單元格寬度的最大值確定。如果為該列指定的width值大于列中所有最小單元格寬度，最小列寬則設置為這個width 值。

b. 要計算最大寬度，取該列中所有單元格的最大單元格寬度的最大值。如果已經(jīng)為列指定了一個width值，而且大于該列中的所有最大單元格寬度，最大列寬則設置為該width值。這兩種行為改寫了傳統(tǒng)的HTML表行為，對于HTML 表，會強制列擴展為與其最寬的單元格同寬。

3、如果一個單元格跨多列，最小列寬之和必須等于這個跨列單元格的最小單元格寬度。類似地，最大列寬之和必須等于跨列單元格的最大寬度。如果列寬之和與單元格寬度有差距，用戶代理會把這個差距在所跨的列上平均分配。

另外，用戶代理必須考慮到這樣一個問題：如果一個列的Width值為百分數(shù)值，這個百分數(shù)要相對于表的寬度計算，即便它還不知道這個寬度是多少！它必須把這個百分數(shù)保存起來，在算法的下一部分使用。

此時，用戶代理已經(jīng)確定了各列可能是多寬或多窄。有了這個信息，可以再真正得出表的寬度。這個過程如下：

1、如果表的計算寬度值不是auto，將這個計算表寬度值與所有列寬再加上所有邊框和單元格間隔之和相比較（設置為百分數(shù)寬度的列往往在此時計算具體寬度）。二者中較大的一個就是表的最終寬度。如果表的計算寬度值大于列寬、邊框和單元格間隔之和，所有列的寬度都會增加一個相等的量，使得剛好將表完全填充。

2、如果表的計算寬度值為auto，通過將列寬、邊框和單元格間隔相加來確定表的最終寬度。這說明表的寬度只能恰好顯示其內容，而不能有多余，這類似于傳統(tǒng)的HTML表。設置為百分數(shù)寬度的列會以這個百分數(shù)作為一個限制，不過用戶代理有可能并不滿足這個限制。

只有在完成了最后一步之后，用戶代理才算真正建立了表的布局。

以下樣式和標記有助于說明這個過程：

table{table-layout: auto; width: auto;

border-collapse: collapse;}

td {border: 1px solid;}

col#c3 {width: 25%;}

#r1c1 {width: 40%;}

#r2c2 {width: 50px;}

#r2c3 {width: 35px;}

#r4cl {width: 100px;}

#r4c4 {width: 1px;}

<table>

<colgroup>

<col id="cl"><col id="c2"><col id="c3"><col id="c4">

</colgroup>

<td id=" r1c1">1-1</td><td id="r1c2 ">l-2</td>

<ta id="r1c3">1-3</td><td id="r1c4">l-4</td>

</tr>

<tr>

<td id="r2c1">5-1</td><td id="r2c2">2-2</td>

<td id="r2c3">2-3</td><td id="r2c4">2-4</td>

</tr>

<tr>

<td id=" r3c1">3-1</td><td id="r3c2">3-2</td>

<td id="r3c3">3-3</td><td id="r3c4">3-4</td>

</tr>

<tr>

<td id="r4c1">4-1</td><td id="r4c2">4-2</td>

<td id="r4c3">4-3</td><td id="r4c4">4-4</td>

</tr>

</table>

下面依次在網(wǎng)頁設計時考慮對各個列會發(fā)生什么：

對于第一列，唯一明確的單元格或列的寬度是單元格4-1的寬度，其width指定為100px。由于它的內容太短，所以最小和最大列寬都是100px （如果列中一個單元格的文本有很多句，則要把最大列寬增加到足以不換行顯示所有文本所需的寬度值）。

第二列中聲明了兩個寬度：單元格1-2的width指定為40%，單元格2-2的width 指定為50px。這一列的最小寬度為50px，最大寬度為最終表寬度的40%。

對于第三列，只是單元格3-3有明確的寬度（35px），不過該列本身也指定了寬度，width為25%。因此，最小列寬為35px，最大寬度為最終表寬度的25%。

對于第四列，只為單元格4-4指定了寬度為1pxs這比最小內容寬度小，所以最小和最大列寬都等于單元格的最小內容寬度，計算為25像素。

用戶代理現(xiàn)在知道了，這4個列的最小和最大列寬如下：

最小100px /最大100px

最小50px /最大40%

最小35px /最大25%

最小25px /最大25px

因此，在網(wǎng)頁設計中，表的最小寬度就是所有這些列的最小寬度再加上邊框之和，總共是215像素。表的最大寬度是130px +65%，最后得出371.42857143像素（假設130px表示總表寬度的35%）。將這個小數(shù)取整為371像素后，假設用戶代理實際使用的就是這個寬度。因此，第二列將是148像素寬，第三列將是93像素寬。用戶代理不必真正使用最大值，完全可以選擇其他方案。

當然，這是一個相當簡單直接的例子（不過看上去可能并非如此）：所有內容基本上都有相同的寬度，聲明的大多數(shù)寬度都使用像素數(shù)指定。如果表中包含間隔GIF、文本段落。表單元素等，要得出表的布局，過程可能要麻煩得多。