html基礎知識點系列1--表格及其相關元素

 

thead

• 定義表格的表頭。該標籤用於組合 HTML 表格的表頭內容。

tbody

• 用於對 HTML 表格中的主體內容進行分組

tfoot

• 元素用於對 HTML 表格中的表注（頁腳）內容進行分組。

 

thead 元素應該與 tbody 和 tfoot 元素結合起來使用。

註釋：如果您使用 thead、tfoot 以及 tbody 元素，您就必須使用全部的元素。

它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數據前呈現頁腳了。

您必須在 table 元素內部使用這些標籤。

提示：在默認情況下這些元素不會影響到表格的佈局。

不過，您可以使用 CSS 使這些元素改變表格的外觀。

 

 

 

head、tfoot 以及 tbody 元素使您有能力對錶格中的行進行分組。當您創建某個表格時，

您也許希望擁有一個標題行，一些帶有數據的行，以及位於底部的一個總計行。

這種劃分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。

當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

 

實例

帶有 thead、tbody 以及 tfoot 元素的 HTML 表格：

<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> 

col

• 標籤爲表格中一個或多個列定義屬性值。

如需對全部列應用樣式，<col> 標籤很有用，這樣就不需要對各個單元和各行重複應用樣式了。
您只能在 table 或 colgroup 元素中使用 <col> 標籤。
實例
col 元素爲表格中的三個列規定了不同的對齊方式：

<table width="100%" border="1"> <col align="left" /> <col align="left" /> <col align="right" /> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table>

 

 

colgroup

• 標籤用於對錶格中的列進行組合，以便對其進行格式化。

 

如需對全部列應用樣式，<colgroup> 標籤很有用，這樣就不需要對各個單元和各行重複應用樣式了。

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

實例

兩個 colgroup 元素爲表格中的三列規定了不同的對齊方式和樣式（注意第一個 colgroup 元素橫跨兩列）：

<table width="100%" border="1"> <colgroup span="2" align="left"></colgroup> <colgroup align="right" style="color:#0000ff;" mce_style="color:#0000ff;"></colgroup> <tr> <th>isbn</th> <th>title</th> <th>price</th> </tr> <tr> <td>3476896</td> <td>my first html</td> <td>$53</td> </tr> </table> 

 

 

caption

• 元素定義表格標題。

 

caption 標籤必須緊隨 table 標籤之後。您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。

<table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> 

 

tr

•  定義行

td

• 定義列

th

• 定義表格內的表頭單元格。此 th 元素內部的文本通常會呈現爲粗體