HTML 表格tablecaptionthtrtdtheadtbodytfootcolcolgroup
<table>標簽：
定義和用法：
<table>標簽定義HTML表格。
簡單的HTML表格由table元素以及一個或多個tr、th或td元素組成。
tr元素定義表格行，th元素定義表頭，td元素定義表格單元。
可選的屬性：
1.border
? ?值：pixels ? ? ? 規定表格邊框的寬度。
2.cellpadding
? ?值:pixels或% ? ? 規定單元邊沿與內容之間的空白。
3.cellspacing ??
? ?值：pixels或% ? 規定單元格之間的空白。
4. frame
? ? 值：void（不顯示外側邊框。） ? ? ? ? ? ? ? ? ? ? ? 規定外側邊框的哪個部分是可見的。
? ? ? ? ?above (顯示上部的外側邊框。）
? ? ? ? ?below (顯示下部的外側邊框。）
? ? ? ? ?hsides (顯示上部和下部的外側邊框。）
? ? ? ? ?vsides ?（顯示左邊和右邊的外側邊框。）
? ? ? ? ?lhs ?(顯示左邊的外側邊框。）
? ? ? ? ?rhs （顯示右邊的外側邊框。）
? ? ? ? ?box ?（在所有四個邊上顯示外側邊框。）
? ? ? ? ?border (在所有四個邊上顯示外側邊框。）?
5. rules? ? 值： ?none (沒有線條。） ? ? ? ? ? ? ? ? ? ? ? ? ? ? 規定內側邊框的哪個部分是可見的。
? ? ? ? ? ?groups （位于行組和列組之間的線條。）
? ? ? ? ? ?rows ? （位于行之間的線條。）
? ? ? ? ? ?cols ? ?（位于列之間的線條。）
? ? ? ? ? ?all ? ? ? （位于行和列之間的線條。）
6. summary
? ?值： text ? ? ? 規定表格的摘要。
7. width ?
? ?值：%或pixels ? ?規定表格的寬度。
<caption> 標簽
定義和用法
caption 元素定義表格標題。
caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。
所有瀏覽器都支持 <caption> 標簽。
<th> 標簽
定義和用法
定義表格內的表頭單元格。
HTML 表單中有兩種類型的單元格：
-
表頭單元格 - 包含表頭信息（由 th 元素創建）
-
標準單元格 - 包含數據（由 td 元素創建）
th 元素內部的文本通常會呈現為居中的粗體文本，而 td 元素內的文本通常是左對齊的普通文本。
提示和注釋
提示：如果需要將內容橫跨多個行或列，請使用 colspan 和 rowspan 屬性。
可選的屬性：
1.?align
? ?值：left （左對齊內容（默認值）。） ? ? ? ? ??規定表格的表頭單元格中內容的水平對齊方式。
? ? ? ? ?right ?（右對齊內容。）
? ? ? ? ?center ?（居中對齊內容。）
? ? ? ? ?justify ?（對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜志中）。
? ? ? ? ?char ? （將內容對準指定字符。）注釋：幾乎沒有瀏覽器能夠正確地處理 "char" 值。
2.?colspan
? ?值：number ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?規定表頭單元格可橫跨的列數。
? ? ? ? 注釋：沒有瀏覽器支持 colspan="0"，這個值有特殊的意義。
3.?rowspan
? ? 值：number ? ? ? ? ? ? ? ? ? ? ? ? ? ?規定表頭單元格可橫跨的行數。
? ? 注釋：沒有瀏覽器支持 rowspan="0"，這個值有特殊的意義。
4. ?valign
? ? ?值：top（對內容進行上對齊。） ? ? ? ? ? ? ? ? ? 規定單元格中內容的垂直排列的方式。
? ? ? ? ? ?middle ?（對內容進行居中對齊（默認值）。）
? ? ? ? ? bottom ?（對內容進行下對齊。）
? ? ? ? ? baseline ? （與基線對齊。）
? ? ? ? ?注釋：基線是一條虛構的線。在一行文本中，大多數字母以基線為基準。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文本的字號各不相同，那么 baseline 的效果會更好。
? ? ? ? ? 例如：?valign="bottom"
? ? ? ? ? ? ? ? ???valign="baseline"
<tr> 標簽
定義和用法：
<tr> 標簽定義 HTML 表格中的行。
tr 元素包含一個或多個?th?或?td?元素。
可選屬性：
1.?align
???值：left?（左對齊內容（默認值）。） ? ? ? ? ??規定表格行中內容的水平對齊方式。
? ? ? ? ?right ?（右對齊內容。）
? ? ? ? ?center ?（居中對齊內容。）
? ? ? ? ?justify ?（對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜志中）。
? ? ? ? ?char ? （將內容對準指定字符。）注釋：幾乎沒有瀏覽器能夠正確地處理 "char" 值。
2. ?valign
? ? ?值：top（對內容進行上對齊。） ? ? ? ? ? ? ? ? ? 規定表格行中內容的垂直排列的方式。
? ? ? ? ? ?middle ?（對內容進行居中對齊（默認值）。）
? ? ? ? ? bottom ?（對內容進行下對齊。）
? ? ? ? ? baseline ? （與基線對齊。）
? ? ? ? ?注釋：基線是一條虛構的線。在一行文本中，大多數字母以基線為基準。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文本的字號各不相同，那么 baseline 的效果會更好。
? ? ? ? ? 例如：?valign="bottom"
? ? ? ? ? ? ? ? ???valign="baseline"
<td> 標簽
定義和用法：
<td> 標簽定義 HTML 表格中的標準單元格。
HTML 表格有兩類單元格：
- 表頭單元 - 包含頭部信息（由 th 元素創建）
- 標準單元 - 包含數據（由 td 元素創建）
td 元素中的文本一般顯示為正常字體且左對齊。
可選屬性：
1.?align
???值：left?（左對齊內容（默認值）。） ? ? ? ? ??規定單元格中內容的水平對齊方式。
? ? ? ? ?right ?（右對齊內容。）
? ? ? ? ?center ?（居中對齊內容。）
? ? ? ? ?justify ?（對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜志中）。
? ? ? ? ?char ? （將內容對準指定字符。）注釋：幾乎沒有瀏覽器能夠正確地處理 "char" 值。
2.?colspan
? ?值：number ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?規定單元格可橫跨的列數。
? ? ? ??注釋：沒有瀏覽器支持 colspan="0"，這個值有特殊的意義。
3.?rowspan
? ??值：number ? ? ? ? ? ? ? ? ? ? ? ? ? ?規定單元格可橫跨的行數。
? ??注釋：沒有瀏覽器支持 rowspan="0"，這個值有特殊的意義。
4. ?valign
? ? ?值：top（對內容進行上對齊。） ? ? ? ? ? ? ? ? ? 規定單元格中內容的垂直排列的方式。
? ? ? ? ? ?middle ?（對內容進行居中對齊（默認值）。）
? ? ? ? ? bottom ?（對內容進行下對齊。）
? ? ? ? ? baseline ? （與基線對齊。）
? ? ? ? ?注釋：基線是一條虛構的線。在一行文本中，大多數字母以基線為基準。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文本的字號各不相同，那么 baseline 的效果會更好。
? ? ? ? ? 例如：?valign="bottom"
? ? ? ? ? ? ? ? ???valign="baseline"
<thead> 標簽
定義和用法
<thead> 標簽定義表格的表頭。該標簽用于組合 HTML 表格的表頭內容。
thead 元素應該與?tbody?和?tfoot?元素結合起來使用。
tbody 元素用于對 HTML 表格中的主體內容進行分組，而 tfoot 元素用于對 HTML 表格中的表注（頁腳）內容進行分組。
注釋：如果您使用 thead、tfoot 以及 tbody 元素，您就必須使用全部的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數據前呈現頁腳了。您必須在 table 元素內部使用這些標簽。
提示：在默認情況下這些元素不會影響到表格的布局。不過，您可以使用 CSS 使這些元素改變表格的外觀。
詳細描述
thead、tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。當您創建某個表格時，您也許希望擁有一個標題行，一些帶有數據的行，以及位于底部的一個總計行。這種劃分使瀏覽器有能力支持獨立于表格標題和頁腳的表格正文滾動。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。
可選屬性：
1.?align
???值：left?（左對齊內容（默認值）。） ? ? ? ? ??規定thead元素中內容的水平對齊方式。
? ? ? ? ?right ?（右對齊內容。）
? ? ? ? ?center ?（居中對齊內容。）
? ? ? ? ?justify ?（對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜志中）。
? ? ? ? ?char ? （將內容對準指定字符。）注釋：幾乎沒有瀏覽器能夠正確地處理 "char" 值。
2. ?valign
? ? ?值：top（對內容進行上對齊。） ? ? ? ? ? ? ? ? ? 規定thead元素中內容的垂直排列的方式。
? ? ? ? ? ?middle ?（對內容進行居中對齊（默認值）。）
? ? ? ? ? bottom ?（對內容進行下對齊。）
? ? ? ? ? baseline ? （與基線對齊。）
? ? ? ? ?注釋：基線是一條虛構的線。在一行文本中，大多數字母以基線為基準。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文本的字號各不相同，那么 baseline 的效果會更好。
? ? ? ? ? 例如：?valign="bottom"
? ? ? ? ? ? ? ? ???valign="baseline"
<tbody> 標簽
定義和用法
<tbody> 標簽表格主體（正文）。該標簽用于組合 HTML 表格的主體內容。
tbody 元素應該與?thead?和?tfoot?元素結合起來使用。
thead 元素用于對 HTML 表格中的表頭內容進行分組，而 tfoot 元素用于對 HTML 表格中的表注（頁腳）內容進行分組。
注釋：如果您使用 thead、tfoot 以及 tbody 元素，您就必須使用全部的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數據前呈現頁腳了。您必須在 table 元素內部使用這些標簽。
提示：在默認情況下這些元素不會影響到表格的布局。不過，您可以使用 CSS 使這些元素改變表格的外觀。
詳細描述
thead、tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。當您創建某個表格時，您也許希望擁有一個標題行，一些帶有數據的行，以及位于底部的一個總計行。這種劃分使瀏覽器有能力支持獨立于表格標題和頁腳的表格正文滾動。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。
可選屬性：
1.?align
???值：left?（左對齊內容（默認值）。） ? ? ? ? ??規定tbody元素中內容的水平對齊方式。
? ? ? ? ?right ?（右對齊內容。）
? ? ? ? ?center ?（居中對齊內容。）
? ? ? ? ?justify ?（對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜志中）。
? ? ? ? ?char ? （將內容對準指定字符。）注釋：幾乎沒有瀏覽器能夠正確地處理 "char" 值。
2. ?valign
? ? ?值：top（對內容進行上對齊。） ? ? ? ? ? ? ? ? ? 規定tbody元素中內容的垂直排列的方式。
? ? ? ? ? ?middle ?（對內容進行居中對齊（默認值）。）
? ? ? ? ? bottom ?（對內容進行下對齊。）
? ? ? ? ? baseline ? （與基線對齊。）
? ? ? ? ?注釋：基線是一條虛構的線。在一行文本中，大多數字母以基線為基準。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文本的字號各不相同，那么 baseline 的效果會更好。
? ? ? ? ? 例如：?valign="bottom"
? ? ? ? ? ? ? ? ???valign="baseline"
<tfoot> 標簽
定義和用法?
<tfoot> 標簽定義表格的頁腳（腳注或表注）。該標簽用于組合 HTML 表格中的表注內容。
tfoot 元素應該與?thead?和?tbody?元素結合起來使用。
thead 元素用于對 HTML 表格中的表頭內容進行分組，而 tbody 元素用于對 HTML 表格中的主體內容進行分組。
注釋：如果您使用 thead、tfoot 以及 tbody 元素，您就必須使用全部的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數據前呈現頁腳了。您必須在 table 元素內部使用這些標簽。
?提示：在默認情況下這些元素不會影響到表格的布局。不過，您可以使用 CSS 使這些元素改變表格的外觀。
詳細描述
thead、tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。當您創建某個表格時，您也許希望擁有一個標題行，一些帶有數據的行，以及位于底部的一個總計行。這種劃分使瀏覽器有能力支持獨立于表格標題和頁腳的表格正文滾動。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。
可選的屬性：
1.?align
???值：left?（左對齊內容（默認值）。） ? ? ? ? ??規定tfoot元素中內容的水平對齊方式。
? ? ? ? ?right ?（右對齊內容。）
? ? ? ? ?center ?（居中對齊內容。）
? ? ? ? ?justify ?（對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜志中）。
? ? ? ? ?char ? （將內容對準指定字符。）注釋：幾乎沒有瀏覽器能夠正確地處理 "char" 值。
2. ?valign
? ? ?值：top（對內容進行上對齊。） ? ? ? ? ? ? ? ? ? 規定tfoot元素中內容的垂直排列的方式。
? ? ? ? ? ?middle ?（對內容進行居中對齊（默認值）。）
? ? ? ? ? bottom ?（對內容進行下對齊。）
? ? ? ? ? baseline ? （與基線對齊。）
? ? ? ? ?注釋：基線是一條虛構的線。在一行文本中，大多數字母以基線為基準。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文本的字號各不相同，那么 baseline 的效果會更好。
? ? ? ? ? 例如：?valign="bottom"
? ? ? ? ? ? ? ? ???valign="baseline"
提示和注釋：
注釋：<thead> 內部必須擁有 <tr> 標簽！
注釋：<thead>、<tbody> 以及 <tfoot> 很少被使用，這是因為糟糕的瀏覽器支持。我們期望在 XHTML 的未來版本中這種情況會發生變化。
?<col> 標簽
定義和用法
<col> 標簽為表格中一個或多個列定義屬性值。
如需對全部列應用樣式，<col> 標簽很有用，這樣就不需要對各個單元和各行重復應用樣式了。
您只能在 table 或 colgroup 元素中使用 <col> 標簽。
提示和注釋：
提示：請為 <col> 標簽添加 class 屬性。這樣就可以使用 CSS 來負責對齊方式、寬度和顏色等等。
提示：如果您希望在 colgroup 內部為每個列規定不同的屬性值時，請使用此元素。如果沒有 col 元素，列會從 colgroup 那里繼承所有的屬性值。
注釋：col 元素是僅包含屬性的空元素。如需創建列，您就必須在 tr 元素內部規定 td 元素。
可選屬性：
1.span?
? ?值：number ? ? ? ? ? ?規定 col 元素應該橫跨的列數。
2.??valign
? ? ?值：top（對內容進行上對齊。） ? ? ? ? ? ? ? ? ? 規定col元素中內容的垂直排列的方式。
? ? ? ? ? ?middle ?（對內容進行居中對齊（默認值）。）
? ? ? ? ? bottom ?（對內容進行下對齊。）
? ? ? ? ? baseline ? （與基線對齊。）
? ? ? ? ?注釋：基線是一條虛構的線。在一行文本中，大多數字母以基線為基準。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文本的字號各不相同，那么 baseline 的效果會更好。
? ? ? ? ? 例如：?valign="bottom"
? ? ? ? ? ? ? ? ???valign="baseline"
3. width
? ?值：pixels或%或像素 ? ? ? 規定col元素的寬度。
通常，col 元素占用的空間就是它顯示內容需要的空間。width 屬性用于為 col 元素設置預定義的寬度。
注釋：該屬性會覆蓋 colgroup 元素中的任何寬度設置。
<colgroup> 標簽
定義與用法：
<colgroup> 標簽用于對表格中的列進行組合，以便對其進行格式化。
如需對全部列應用樣式，<colgroup> 標簽很有用，這樣就不需要對各個單元和各行重復應用樣式了。
?<colgroup> 標簽只能在 table 元素中使用。
提示和注釋：
提示：請為 <colgroup> 標簽添加 class 屬性。這樣就可以使用 CSS 來負責對齊方式、寬度和顏色等等。
注釋：col 元素是僅包含屬性的空元素。如需創建列，您就必須在 tr 元素內部規定 td 元素。
可選屬性：
1.span?
? ?值：number ? ? ? ? ? ?規定列組應該橫跨的列數
2.??valign
? ? ?值：top（對內容進行上對齊。） ? ? ? ? ? ? ? ? ??定義在列組合中內容的垂直對齊方式。
? ? ? ? ? ?middle ?（對內容進行居中對齊（默認值）。）
? ? ? ? ? bottom ?（對內容進行下對齊。）
? ? ? ? ? baseline ? （與基線對齊。）
? ? ? ? ?注釋：基線是一條虛構的線。在一行文本中，大多數字母以基線為基準。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文本的字號各不相同，那么 baseline 的效果會更好。
? ? ? ? ? 例如：?valign="bottom"
? ? ? ? ? ? ? ? ???valign="baseline"
3.?width
? ?值：pixels或%或像素 ? ? ? ? ? ? ? ? ??規定列組合的寬度。
通常，col 元素占用的空間就是它顯示內容需要的空間。width 屬性用于為 col 元素設置預定義的寬度。
注釋：該屬性會覆蓋 colgroup 元素中的任何寬度設置。
?
例子：
1.跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
橫跨兩列的單元格：
| Bill Gates | 555 77 854 | 555 77 855 |
?
橫跨兩行的單元格：
| Bill Gates |
| 555 77 854 |
| 555 77 855 |
?2.?單元格邊距(Cell padding)
?本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。
沒有 cellpadding：
| First | Row |
| Second | Row |
?
帶有 cellpadding：
| First | Row |
| Second | Row |
3.框架(frame)屬性
本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。
注釋：frame 屬性無法在 Internet Explorer 中正確地顯示。
Table with frame="box":
| January | $100 |
?
?
Table with frame="above":
| January | $100 |
?
?
Table with frame="below":
| January | $100 |
?
?
Table with frame="hsides":
| January | $100 |
?
?
Table with frame="vsides":
| January | $100 |
?
轉載于:https://www.cnblogs.com/zuihongyan/p/5649624.html
總結
以上是生活随笔為你收集整理的HTML 表格tablecaptionthtrtdtheadtbodytfootcolcolgroup的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 架构漫谈：我心中的架构
- 下一篇： 五个值得尝试的前端开发工具