什麼時候會用到表格
現在，表格<table>一般不再用於網頁整體的佈局。不過，在面對某些特定的設計，如表單輸入、數據呈現時，表格則可能是最恰當的選擇。
關於表格的直觀印象，就是由多個單元格（cell）整齊排列而成的元素，可以明確看出行（row）和列（column）。這可以聯想到Excel，由Excel在數據處理和統計上的地位，就可以理解網頁中表格的意義。
簡單來說，能直觀感受到多個元素是以行和列的概念排列時，用表格會讓你輕鬆很多。如caniuse.com中應用表格的例子：
表格佈局計算使用表格很簡單，但有時候表格最終為每一個格子呈現的狀態，可能不是你想要的。比如說某些格子出現了換行，然後整個表格就因為換行看起來十分不美觀。尤其是用於數據呈現的表格，寬度分配是一個很重要的話題，你可能需要為每一列格子可能呈現的數據情況，對錶格的總寬度做精打細算。
這是因為，表格在佈局上有自己的特性，它會遵循一定的原理，通過計算，確定出它的實際佈局。接下來，本文以實際的表格測試示例，探討表格是如何計算自己的佈局的。
初始聲明本文只針對應用表格最常見的方法，而不會列出所有的情況。不同瀏覽器對錶格的部分概念的解析有差異，但佈局計算是基本一致的（如果有差異，會單獨提及）。
接下來用的測試表格都會以這樣的外觀呈現（內容取自零之軌跡）：
同時，表格都會設置border-collapse:collapse;和border-spacing:0;。這也是應用表格的最常用做法，Normalize.css把這部分用作了初始化定義。
兩種算法定義在<table>元素上的css屬性table-layout，將決定表格在佈局計算時應用的算法。它有兩種值，auto和fixed。在通常情況下，都使用默認值auto。
這兩種算法的差異在於表格的寬度佈局是否與表格中的數據內容有關。本文會分別討論在這兩種取值時，表格的佈局計算原理。
自動表格佈局-auto
自動表格佈局的特點是，表格的寬度佈局與表格中的所有數據內容有關，它需要在獲取所有表格內容後才能確定最終的寬度佈局，然後再一起顯示出來。
如此看來，要點就是內容相關了。如果表格定義了固定寬度（這裡是500px），而所有的單元格都不定義寬度（只討論css定義寬度），會如何呢？來看結果：
上面這個表格中，空白的部分是寫了 空格。經過比較，可以發現以下幾點：
第2列和第3列寬度相同。
第1列的寬度和後面任意一列的寬度比似乎是2:1。
加上邊框和內邊距，所有列的寬度總合，等於表格定義的寬度。
每個單元格都沒有定義寬度，所以寬度佈局完全由具體的內容數據（文本信息）決定的。如何解釋這樣的結果呢？可以先直觀地推測這樣的邏輯：
第1步，從每一列中選取文字內容最多（理解為不換行的情況下，文本所佔據的寬度最寬）的，作為代表。
第2步，比較各列的代表的寬度，然後按照它們的寬度比例關係，為它們分配表格的總寬度，包括邊框和內邊距。
參照上面的邏輯，再來反觀一下前面的表格，是不是挺有一些道理？注意，前面說寬度比似乎是2:1，這個會是？來看看去掉內邊距的版本：
用前端調試工具具體看一下上面的單元格的寬度，你會發現這個表格和之前不同，比例已經非常接近2:1（是的，還有的這一小點是因為邊框，但是沒有邊框就沒法區分列了）。
可見，在分析寬度比例關係的時候，是會把內容寬度和內邊距，以及邊框都考慮在內的。這也說明，不是衡量文字的數目，而是衡量文字在不換行狀態所能佔據的寬度（這裡的2:1來源於中文漢字是等寬的）。使用內邊距自然只是為了做出更美觀的表格:) 。
有寬度定義的時候，又會怎樣呢？下面是一個部分單元格有寬度定義的表格：
它的對應html代碼是：
XML/HTML Code複製內容到剪貼板