【HTML教程】HTML的tfoot標簽|html入門知識
時間: 2025-03-31 22:51:43 瀏覽次數：8
常用的html標簽匯總、以及操作過程中的一些bug問題解決方法，以下龍騰飛網絡科技-小吳在建站實操中筆記記錄，一路走來，一步步學習、總結、整理的一些資料，不用死記硬背，保存使用非常方便，實操過程中遇到了就查詢搜索一下，實踐出真章，做多了自然就熟悉了： 【定義和用法】 tfoot標簽
常用的html標簽匯總、以及操作過程中的一些bug問題解決方法，以下龍騰飛網絡科技-小吳在建站實操中筆記記錄，一路走來，一步步學習、總結、整理的一些資料，不用死記硬背，保存使用非常方便，實操過程中遇到了就查詢搜索一下，實踐出真章，做多了自然就熟悉了：
【定義和用法】
tfoot標簽用于對 HTML 表格中的頁腳內容進行分組。
tfoot元素與 thead和 tbody元素結合使用，以指定表格的每個部分(頁腳、頁眉、正文)。
瀏覽器可以使用這些元素，使得在滾動表格正文時，頁眉和頁腳可以獨立顯示。此外，當打印跨多個頁面的大型表格時，這些元素可以使得表格的頁眉和頁腳在每頁的頂部和底部打印出來。
注意： tfoot元素內必須包含一個或多個 tr標簽。
tfoot標簽必須在以下上下文中使用：作為 table元素的子元素，在任何 caption、colgroup、thead和 tbody元素之后。
提示：默認情況下，thead、tbody和 tfoot元素不會影響表格的布局。但是，您可以使用 CSS 來設置這些元素的樣式(請參閱下面的例子)!
【實例】
例子 1
包含 thead、tbody和 tfoot元素的 HTML 表格：
<table> <thead> <tr> <th>月份</th> <th>儲蓄</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>￥3400</td> </tr> <tr> <td>二月</td> <td>￥4500</td> </tr> </tbody> <tfoot> <tr> <td>合計</td> <td>￥7900</td> </tr> </tfoot></table>
例子 2
使用 CSS 設置 thead、tbody和 tfoot的樣式：
<html><head><style>thead {color: green;}tbody {color: blue;}tfoot {color: red;}table, th, td {
border: 1px solid black;}</style></head><body><table>
<thead>
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
</thead>
<tbody>
<tr>
<td>一月</td>
<td>￥3400</td>
</tr>
<tr>
<td>二月</td>
<td>￥4500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計</td>
<td>￥7900</td>
</tr>
</tfoot></table>例子 3
如何對齊 tfoot中的內容(使用 CSS)：
<table style="width:100%"> <tr> <th>月份</th> <th>儲蓄</th> </tr> <tr> <td>一月</td> <td>￥3400</td> </tr> <tr> <td>二月</td> <td>￥4500</td> </tr> <tfoot style="text-align:center"> <tr> <td>合計</td> <td>￥7900</td> </tr> </tfoot></table>
例子 4
如何垂直對齊 tfoot中的內容(使用 CSS)：
<table style="width:100%"> <tr> <th>月份</th> <th>儲蓄</th> </tr> <tr> <td>一月</td> <td>￥3400</td> </tr> <tr> <td>二月</td> <td>￥4500</td> </tr> <tfoot style="vertical-align:bottom"> <tr style="height:100px"> <td>合計</td> <td>￥7900</td> </tr> </tfoot></table>
【默認的 CSS 設置】
大多數瀏覽器將使用以下默認值顯示 tfoot元素：
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;}