CSS屬性之表格(Table)

標籤：table   表格   表格樣式   css table   

CSS屬性之表格(Table)

HTML為表格定義了3個元素用於對行進行分組，它們是 thead (表頭)、tbody (表格主體)、tfoot (腳註)。

在HTML4中文檔結構中的 tfoot 必須出現在 tbody之前，HTML5去掉了這個限制。

如果在原始碼中沒有寫分組元素時，瀏覽器會自動建立 tbody ，所以選取器 table > tr 總是無效，因為中間有 tbody。

如果表格主體中的每一行都是以 td 元素開頭，那這些 th 就是列名。

colgroup 與 col

<colgroup> 標籤只能在 table 元素中使用。

<col> 標籤只能在 table 或 colgroup 元素中使用。

col 可以在 colgroup 之外使用。

colgroup 中的 col 會覆蓋 colgroup 樣式。

table-layout：auto | fixed

auto： 預設的自動演算法。布局將基於各單元格的內容，換言之，可能你給某個單元格定義寬度為100px，但結果可能並不是100px。表格在每一單元格讀取計算之後才會顯示出來，速度很慢。

fixed： 固定式配置的演算法。在這演算法中，水平布局是僅僅基於表格的寬度，表格邊框的寬度，單元格間距，列的寬度，而和表格內容無關。也就是說，內容可能被裁切。

border-collapse：separate | collapse

separate： 邊框獨立。

collapse： 相鄰邊被合并。

只有當表格邊框獨立（即border-collapse屬性等於separate時），border-spacing和empty-cells才起作用。

border-spacing：<length>{1,2}

用長度值來定義行和單元格的邊框在橫向和縱向上的間距。不允許負值。

如果提供全部兩個length值時，第一個作用於橫向間距，第二個作用於縱向間距。 

如果只提供一個length值時，這個值將作用於橫向和縱向上的間距。 

caption-side：top | bottom

top： 指定caption在表格上邊。

bottom： 指定caption在表格下邊。

empty-cells：hide | show

設定或檢索當表格的單元格無內容時，是否顯示該單元格的邊框。

hide： 指定當表格的單元格無內容時，隱藏該單元格的邊框。 

show： 指定當表格的單元格無內容時，顯示該單元格的邊框。

CSS屬性之表格(Table)