表格(Table)

繼承屬性，設定表格框線是分離模式(separated borders model)還是結合模式(collapsing border model)。

屬性	適用元素	屬性值	說明
border-collapse	表格元素 (table元素)	collapse separate(Default值) inherit	→ 指定外框和內框結合 → 指定外框和內框分離 → 強制繼承上層元素的屬性值

table,td	{ border:1px gray solid; }

.collapse	{ border-collapse:collapse; }

.separate	{ border-collapse:separate; }

繼承屬性，在border-collapse屬性為分離模式(separated borders model)時，指定間隔空白的寬度。寬度可以設定1個值(代表水平和垂直相同)或2個值(代表水平寬度和垂直寬度)，中間以半形空白做區隔。

屬性	適用元素	屬性值	說明
border-spacing	表格元素 (table元素)	長度長度長度 inherit	→ 指定一樣的水平和垂直的寬度 → 指定不同的水平和垂直的寬度 → 強制繼承上層元素的屬性值

table,td	{ border:1px gray solid; }

.spacing	{ border-collapse:separate;border-spacing:5px 10px; }

繼承屬性，指定表的標題位置。window IE6、7沒有對應，可以利用text-align的屬性來設定水平方向的位置，caption元素的valign屬性設定垂直方向的位置。

屬性	適用元素	屬性值	說明
caption-side	表格元素 (caption元素)	top(Default值) bottom left right inherit	→ 指定表格的上方，利用text-align來設定水平方向位置 → 指定表格的下方，利用text-align來設定水平方向位置 → 指定表格的左方(多數不對應) → 指定表格的右方(多數不對應) → 強制繼承上層元素的屬性值

table,td	{ border:1px gray solid; }

.side		{ caption-side:bottom; text-align:center; }

繼承屬性，在border-collapse屬性為分離模式(separated borders model)時，指定是否顯示空儲存格的框線。window IE沒有對應，要讓空儲存格顯示框線的話，要加入( )。

屬性	適用元素	屬性值	說明
empty-cells	表格元素 (th元素、td元素)	show(default值) hide inherit	→ 顯示空儲存格的框線 → 不顯示空儲存格的框線 → 強制繼承上層元素的屬性值

table,td	{ border:1px gray solid; }

.empty		{ empty-cells:hide; }

非繼承屬性，指定表格是否為固定的layout。指定為自動時，UA端會先讀取儲存格內容後，才去計算每的儲存格應有的寬度，因非常沒有效率，不建議使用。指定為固定時，根據各元素width屬性值配置(順序為先看col元素、colgroup元素，再看第一行的th、td元素的設定，都沒有設定時，均等分割)

屬性	適用元素	屬性值	說明
table-layout	表格元素 (table元素)	auto(default值) fixed inherit	→自動算出儲存格應有的寬度 →寬度固定(各元素width屬性指定的寬度)。 → 強制繼承上層元素的屬性值

table,td	{ border:1px gray solid; }

.auto		{ table-layout:auto; }

.fixed		{ table-layout:fixed; }

auto	自動算出儲存格應有的寬度
fixed	寬度固定(各元素width屬性指定的寬度)

	有內容
有內容	有內容