表格

2024-04-27 15:09:41

字體：大中小

來源：轉載

供稿：網友

信息: 表格

表格是一個矩形網格中的信息安排。一些表格相當復雜，不同的瀏覽器對復雜的表格將會有不同的展示結果。

當你設計你的文檔時，使用一個表格來表示一系列信息的關系。因為信息的意義依然清晰，所以不同瀏覽器用稍微不同的方式來展示表格是沒有關系的。

創建表格的時候，不要用一些非常規的方式構造特殊的可視化布局，本教程的前一頁（布局）使用的技術可以更好的達成目的。

表格結構

在表格中，信息顯示在一個個的單元格（cell）中.

在頁面橫向上一條直線的單元格構成了行（row）。

在一些表格中，行可能被分組。表格開始的特定的行組是表頭（header）。表格最后的特定行組是表尾（footer）。表格中主要的行就是表體（body），這些表體也可能被分組。

在頁面縱向上一條直線的單元格構成了列（column），但是在CSS表格中，列的使用是受限的。

示例

在選擇器那章的基于關系的選擇器就是一個五行十個單元格的表格。

第一行是表頭，其余四行是表體，沒有表尾。

表中有兩列。

本教程僅僅涵蓋簡單表格，其呈現結果完全可以預測。在一個簡單表格里，每個單元格僅占用一行一列。你可以用CSS將一個單元格擴展到多行或者多列來構造復雜表格，但是這樣的表格已超出了這個基本教程所講述的范圍。

邊框

單元格沒有外邊距。

但是單元格有邊框和內邊距。默認情況下，邊框被表格的border-spacing屬性值間隔。你也可以通過設置表格的border-collapse屬性值為collapse來完全移除間隔。

示例

這有三個表格。

左邊的表格有0.5 em的邊框間隔，中間的表格是0邊框間隔，右邊的表格是擁有collapse的邊框。

Clubs	Hearts
Diamonds	Spades

Clubs	Hearts
Diamonds	Spades

Clubs	Hearts
Diamonds	Spades

標題

<caption>元素是用在整個表格的一個標簽。默認下，它顯示在表格的頂部。

可以設置<caption>的caption-side屬性值為bottom來將標簽移到表格的底部。

想要樣式化caption的文本，可以使用任何常規的文本屬性。

示例

這個表格有一個在底部的標題。

#demo-table > caption { caption-side: bottom; font-style: italic; text-align: right;}

Suits

Clubs	Hearts
Diamonds	Spades

空單元格

你可以通過為表格元素指定empty-cells屬性值show來顯示空單元格（就是其邊框和背景）。

你也可以指定empty-cells: hide;來隱藏邊框和背景，那么如果一個單元格的父元素設置了背景，背景將通過空單元格顯示出來。

實例

這些表格有蒼綠色的背景，其單元格有蒼灰色的背景和深灰色的邊框。

左邊的表格，空單元格是顯示的。在右邊，空單元格是隱藏的。

Hearts
Diamonds

Hearts
Diamonds

細節

請查看CSS規范中的表格來獲得更多關于表格的細節信息。

規范中有比該教程更進一步的信息，但它不包括瀏覽器可能會影響復雜表格之間的差異。

實例: 設計表格樣式

創建一個新的HTML文檔, doc3.html。 復制粘貼以下內容，請確保通過滾動獲取全部內容：

<!DOCTYPE html><html> <head> <title>Sample document 3</title> <link rel="stylesheet" href="style3.css"> </head> <body> <table id="demo-table"> <caption>Oceans</caption> <thead> <tr> <th></th> <th>Area</th> <th>Mean depth</th> </tr> <tr> <th></th> <th>million km<sup>2</sup></th> <th>m</th> </tr> </thead> <tbody> <tr> <th>Arctic</th> <td>13,000</td> <td>1,200</td> </tr> <tr> <th>Atlantic</th> <td>87,000</td> <td>3,900</td> </tr> <tr> <th>Pacific</th> <td>180,000</td> <td>4,000</td> </tr> <tr> <th>Indian</th> <td>75,000</td> <td>3,900</td> </tr> <tr> <th>Southern</th> <td>20,000</td> <td>4,500</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <td>361,000</td> <td></td> </tr> <tr> <th>Mean</th> <td>72,000</td> <td>3,800</td> </tr> </tfoot> </table> </body></html>

創建一個新的樣式表 style3.css。復制粘貼一些內容，通過滾動獲取全部內容：

/*** Style for doc3.html (Tables) ***/#demo-table { font: 100% sans-serif; background-color: #efe; border-collapse: collapse; empty-cells: show; border: 1px solid #7a7;}#demo-table > caption { text-align: left; font-weight: bold; font-size: 200%; border-bottom: .2em solid #4ca; margin-bottom: .5em;}

/* basic shared rules */