CSS 表格

表格通常用於表示表格資料。

使用 CSS 設定表格

當你構建沒有任何樣式或屬性的 HTML 表時，瀏覽器會顯示它們而沒有任何邊框。使用 CSS 設定表格可以大大改善其外觀。

以下部分將向你展示如何使用 CSS 控制表元素的佈局和表示，以建立優雅且一致的表。

向表中新增邊框

CSS 屬性 border 是定義表格邊框的最佳方式。

下面的例子將為 <table> 、<th> 和 <td> 元素設定黑色邊框。

table, th, td {
    border: 1px solid black;
}

摺疊表邊框

如果你已經看到上一個示例的輸出，你已經注意到每個表格單元格都有單獨的邊框，並且相鄰表格單元格的邊框之間存在一些空間。這是因為表格單元格邊框預設是分開的。但是，你可以使用 CSS border-collapse 屬性將單獨的表格邊框摺疊為一個。

border-collapse CSS 屬性選擇表格的邊框模型。

它可以接受兩個值中的一個：摺疊或分離。

• 分離的模型是預設的 HTML 表格邊框模型，其中每個相鄰單元格都有自己獨特的邊框。
• 在摺疊邊框模型中，相鄰的表格單元格共享邊框。

以下示例中的樣式規則將摺疊表格單元格邊框，並在表格和表格單元格元素上應用一個畫素黑色邊框。

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

你還可以通過將 border-spacing 屬性的值設定為 0 來刪除表格單元格邊框之間的空格。但是，它只會刪除空格但不會像當設定 border-collapse 為 collapse 時那樣合併邊框。

注意： 如果未在 HTML 文件中指定 <!DOCTYPE>，則 CSS 屬性 border-collapse 可能會產生意外結果。

控制表格佈局

預設情況下，表會擴充套件和收縮以容納其中包含的資料。當資料填入表格內部時，只要有空間，它就會繼續擴充套件。但是，有時需要為表格設定固定寬度以便管理佈局。

你可以在 CSS table-layout 屬性的幫助下完成此操作。此屬性定義用於佈置表格單元格，行和列的演算法。提供兩種表格佈局演算法：自動和固定。

• auto - 使用自動錶格佈局演算法。使用此演算法，表及其單元格的寬度取決於單元格的內容。
• fixed - 使用固定表格佈局演算法。使用該演算法，表格的水平佈局不依賴於單元格的內容; 它只取決於表格的寬度，列的寬度，邊框或單元格間距。

以下示例中的樣式規則表示該表使用固定佈局演算法佈局，並具有 300 畫素的固定寬度。

table {
    width: 300px;
    table-layout: fixed;
}

如果沒有固定的 table-layout 屬性值，在大型表上，在瀏覽器呈現整個表之前，使用者將看不到表的任何部分。

提示： 你可以通過指定 table-layout 屬性來優化表呈現效能。此屬性的固定值使表格一次呈現一行，從而以更快的速度為使用者提供資訊。

處理空單元格

empty-cells CSS 屬性控制表中有沒有可見的內容是一個使用分離的邊框模型計算細胞的邊框和背景的渲染。

此屬性可以採用以下三個值之一： show ， hide 或 inherit。

以下樣式規則隱藏表元素中的空單元格。

table {
    border-collapse: separate;
    empty-cells: hide;
}

控制表格的位置

caption-side CSS 屬性設定表格標題框的垂直位置。

以下樣式規則將表標題定位在其父表下方。但是，要更改標題文字的水平對齊方式，可以使用 text-align 屬性。

caption {
    caption-side: bottom;
}

警告： 最多 7 個 Internet Explorer 不支援標題側屬性。僅當指定了 <!DOCTYPE> 時，IE8 才支援。