表格式化
我們先來看看組裝表的基本方法，並瞭解表中的元素相互之間有什麼關係。這稱爲表格式化。
表的視覺編排
CSS對於表元素和內部表元素有很分明的界限。在CSS中，內部表元素生成矩形框，這些框有內容，內邊距和邊框，但是沒有外邊距。因此，不能通過指定外邊距來定義單元格之間的間隔。如果試圖對單元格、行或任何其他內部表元素應用外邊距，CSS兼容瀏覽器只會將其忽略（只有總標題例外）。
使用display的不同值來表示元素在表中不同的角色：
- table：這個值指定一個元素定義了一個塊級表。它定義了一個生成塊框的矩形塊。
- inline-table：這個值指定一個元素定義了一個行內級表。這說明，該元素定義了一個生成行內框的矩形塊，與之最接近的非表值是inline-block。最接近的HTML元素爲table。不過，默認情況下HTML表不是行內元素。
- table-row：這個值指定一個元素是一個單元格的行。相應的HTML元素是tr元素。
- table-row-group：這個值指定一個元素是一個或多個行的組。相應的HTML值是tbody。
- table-header-group：這個值與table-row-group非常相似，只是視覺格式化方面有所不同，標題行組總是在所有其他行和行組之前顯示。打印時，如果一個表需要多頁打印，用戶代理可以在各頁頂端重複標題行，規範沒有定義如果爲多個元素指定table-header-group值會發生什麼情況。標題組可以包含多個行。與之對應的HTML元素是thead。
- table-footer-group：這個值與table-header-group很類似，不過腳註行組總是在所有其他行之後顯示，如果最下面有頁腳標，要在該總標題之前顯示。打印時，如果一個表需要多頁打印，用戶代理可以在各頁底端重複頁腳行。規範沒有定義如果爲多個元素指定table-foo，ter-group值會有什麼結果。與之對應的HTML元素是tfoot。
- table-column：這個值聲明元素描述了一個單元格的列。按CSS的術語來說，有這個display值的元素並不顯示，就好像它的display值爲none—樣。之所以存在這個值，主要是爲了幫助定義列中單元格的表示。相應的HTML元素是col元素。
- table-column-group：這個值聲明一個元素是一個或多個列的組。類似於table-column元素，table-column-group元素也不顯示，不過這個值有助於定義列組中
元素的表示。相應的HTML元素是colgroup元素。 - table-cell：這個值指定一個元素表示表中的單個單元格。HTML元素th和td都屬於table-cell元素。
- table-caption：這個值定義一個表的總標題。CSS沒有定義如果多個元素的display值都爲caption時會發生什麼情況，不過CSS確實明確地警告,“……創作人員不要在一個表或行內表元素中放多個有display: caption的元素。”
所以，其實我們平時用的td啊tr啊其實都是因爲用戶代理裏面已經預先定義好了這些，所以我們纔沒有需要處理這些複雜的display值的。
table {display: table;}
tr {display: table-row;}
thead {display: table-header-group;}
tbody {display: table-row-group;}
tfoot {display: table-footer-group;}
col {display: table-column;}
colgroup {display: table-column-group;}
td, th {display: table-cell;}
caption {display: table-caption;}以行爲主
CSS將其表模型定義爲“以行爲主”。換句話說，這個模型假設創作人員創建的標記語言會顯式聲明行，而列是從單元格行的佈局推導出來的。因此，第一列由各行中的第一個單元格組成，第二列則由各行中第二個單元格組成,依此類推。
匿名錶對象
標記語言中可能未包含足夠的元素，以至於無法按CSS的定義充分表示表，也可能創作人員沒有加入所有必要的元素。比如tbody一般我們都不寫，由用戶代理幫忙插入。
表層
爲了完成表的顯示，CSS定義了6個不同的層，分別用來放置表的不同方面。有底至頂分別是：table、column groups、columns、row groups、rows、cells。每一層的元素都繪製在上一層之上。
表單元格邊框
在表格中有兩種截然不同的邊框模型。如果單元格相互之間是分隔的，就是分隔邊框模型在起作用。另一種是合併邊框模型，採用這種模型，單元格之間沒有可見的間隔，單元格邊框會相互合併。
border-collapse：collapse | separate | inherit
分隔單元格邊框
採用這種模型，表中的每個單元格都與其他單元格分開一定距離，而且單元格的邊框彼此不會合並。
如果能定義分隔邊框,就應該有辦法使用CSS改變單元格之間的間隔。幸運的是，確實有這樣的辦法。
border-spacing：（length）（length）? | inherit
<table>
<tr>
<td>cell one</td>
<td>cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
table {
border-collapse: separate;
border-spacing: 10px 5px;
td {
border: 3px double black;
padding: 3px;
}
}處理空單元格
對於沒有內容的單元格，使用這個屬性來控制。
empty-cells：show | hide | inherit
合併單元格邊框
在這種情況下，table元素是不能有內邊距的，也就是說，表的外圍邊框與其最外單元格的邊界之間不會有間隔。單元格之間也不會有間隔，相鄰的邊框會合併爲一個。至於怎麼合併，並不是左邊的畫一半右邊的畫一半。而是哪邊勝出畫那邊，勝出的規則：
- 如果某個合併邊框的border-style爲hidden，它會優先於所有其他合併邊框。這個位置上的所有邊框都隱藏。
- 如果某個合併邊框的border-style爲none，它的優先級最低。這個位置上不會畫出該邊框，除非所有其他合併邊框的border-style值都是none。
- 如果至少有一個合併邊框的border-style值不是none，而且所有合併邊框的border-style值都不是hidden，則窄邊框不敵更寬的邊框。
- 如果多個合併邊框有相同的寬度，則會考慮邊框樣式，並採用以下順序(從最優先到最不優先)：double、solid、dashed、dotted、ridge、outset、groove、inset。
- 如果合併邊框的樣式和寬度都一樣，但是顏色不同，則按下表煩序使用元素的顏色(從最優先到最不優先)：cell、row、row group、column、column group, table。
- 如果合併邊框來自相同類型的元素，如兩個有相同樣式和寬度但不同顏色的行邊框，則顏色取最上最左邊框的顏色。
表大小
下面需要了解如何確定表及其內部元素的大小。關於確定表的寬度，有兩種不同的方
法：固定寬度佈局和自動寬度佈局。不論使用何種寬度算法，高度都會自動計算。
寬度
兩種不同的方法：
table-layout：auto | fixed | inherit
儘管這兩個模型針對一個特定表佈局可能有不同的結果，但二者之間最顯着的差異是速度。使用固定寬度表佈局時，相對於自動寬度模型,用戶代理可以更快地計算出表的佈局。
固定佈局
- width屬性值不是auto的所有列元素會根據width值設置該列的寬度。
- 如果一個列的寬度爲auto，不過表首行中位於該列的單元格width不是auto，則根據該單元格寬度設置此列的寬度。如果這個單元格跨多列，則寬度在這些列上平均分配。
- 在以上兩步之後，如果列的寬度仍爲auto，會自動確定其大小，使其寬度儘可能相等。
- 此時，表的寬度設置爲表的width值或列寬度之和(取其中較大者)。如果表寬度大於其列寬總和，將二者之差除以列數，再把得到的這個寬度增加到每一列上。
這種方法的速度很快，因爲所有列寬度都由表的第一行定義。首行後所有行中的單元格都根據首行所定義的列寬確定大小。後面這些行中的單元格不會改變列寬，這意味着爲這些單元格指定的width值都會被忽略。如果一個單元格的內容無法放下，該單元格的overflow值將決定單元格內容是剪裁。可見還是生成一個滾動條。
自動佈局
爲什麼自動佈局比較慢，因爲在用戶代理査看完表的所有內容之前無法確定表的佈局。也就是說，自動佈局要求用戶代理毎得到一個新單元格時都完成整個表的佈局。
步驟：
- 對於一列中的各個單元格，計算最小和最大單元格寬度。
a. 確定顯示內容所需的最小寬度。要記住，內容可以流入多行，不過不能超出單元格框。如果單元格的width值大於最小可能寬度，則把最小單元格寬度設置爲該width值。如果單元格的width值爲auto，最小單元格寬度則設置爲最小內容寬度。
b. 對於最大寬度，要確定完全顯示內容而且不包括換行符所需的寬度（除非明確要求，例如指出可以有br元素），這個值就是最
大單元格寬度。 - 對於各一列，計算最小和最大列寬。
a. 列的最小寬度由該列中所有單元格的最小單元格寬度的最大值確定。如果爲該列指定的width值大於列中所有最小單元格寬度，最小列寬則設置爲這個width 值。
b. 要計算最大寬度，取該列中所有單元格的最大單元格寬度的最大值。如果已經爲列指定了一個width值，而且大於該列中的所有最大單元格寬度，最大列寬則設置爲該width值。這兩種行爲改寫了傳統的HTML錶行爲，對於HTML 表，會強制列擴展爲與其最寬的單元格同寬。 - 如果一個單元格跨多列，最小列寬之和必須等於這個跨列單元格的最小單元格寬度。類似地，最大列寬之和必須等於跨列單元格的最大寬度。如果列寬之和與單元格寬度有差距，用戶代理會把這個差距在所跨的列上平均分配。
此時，用戶代理已經確定了各列可能是多寬或多窄。有了這個信息，可以再真正得出表的寬度。這個過程如下:
- 如果表的計算寬度值不是auto，將這個計算表寬度值與所有列寬再加上所有邊框和單元格間隔之和相比較（設置爲百分數寬度的列往往在此時計算具體寬度）。二者中較大的一個就是表的最終寬度。如果表的計算寬度值大於列寬、邊框和單元格間隔之和，所有列的寬度都會增加一個相等的量，使得剛好將表完全填充。
- 如果表的計算寬度值爲auto，通過將列寬、邊框和單元格間隔相加來確定表的最終寬度。這說明表的寬度只能恰好顯示其容，而不能有多餘，這類似於傳統的HTML表。設置爲百分數寬度的列會以這個百分數作爲一個限制，不過用戶代理有可能並不滿足這個限制。
高度
如果表的高度是auto，其高度則是表中所有行的行高再加上所有邊框和單元格間隔的總和。
顯式設置高度的時候，行爲在CSS中並沒有一個標準。貌似是可以相對於auto時的值更大，用戶代理會把增加出的高度分到各行。更小的話就不行了。
對齊
水平：text-align
垂直：vertical-align
