【HTML教程】HTML的tfoot標(biāo)簽|html入門知識(shí)
時(shí)間: 2025-03-31 22:51:43 瀏覽次數(shù)：21
常用的html標(biāo)簽匯總、以及操作過程中的一些bug問題解決方法，以下龍騰飛網(wǎng)絡(luò)科技-小吳在建站實(shí)操中筆記記錄，一路走來，一步步學(xué)習(xí)、總結(jié)、整理的一些資料，不用死記硬背，保存使用非常方便，實(shí)操過程中遇到了就查詢搜索一下，實(shí)踐出真章，做多了自然就熟悉了： 【定義和用法】 tfoot標(biāo)簽
常用的html標(biāo)簽匯總、以及操作過程中的一些bug問題解決方法，以下龍騰飛網(wǎng)絡(luò)科技-小吳在建站實(shí)操中筆記記錄，一路走來，一步步學(xué)習(xí)、總結(jié)、整理的一些資料，不用死記硬背，保存使用非常方便，實(shí)操過程中遇到了就查詢搜索一下，實(shí)踐出真章，做多了自然就熟悉了：
【定義和用法】
tfoot標(biāo)簽用于對(duì) HTML 表格中的頁腳內(nèi)容進(jìn)行分組。
tfoot元素與 thead和 tbody元素結(jié)合使用，以指定表格的每個(gè)部分(頁腳、頁眉、正文)。
瀏覽器可以使用這些元素，使得在滾動(dòng)表格正文時(shí)，頁眉和頁腳可以獨(dú)立顯示。此外，當(dāng)打印跨多個(gè)頁面的大型表格時(shí)，這些元素可以使得表格的頁眉和頁腳在每頁的頂部和底部打印出來。
注意： tfoot元素內(nèi)必須包含一個(gè)或多個(gè) tr標(biāo)簽。
tfoot標(biāo)簽必須在以下上下文中使用：作為 table元素的子元素，在任何 caption、colgroup、thead和 tbody元素之后。
提示：默認(rèn)情況下，thead、tbody和 tfoot元素不會(huì)影響表格的布局。但是，您可以使用 CSS 來設(shè)置這些元素的樣式(請(qǐng)參閱下面的例子)!
【實(shí)例】
例子 1
包含 thead、tbody和 tfoot元素的 HTML 表格：
<table> <thead> <tr> <th>月份</th> <th>儲(chǔ)蓄</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>￥3400</td> </tr> <tr> <td>二月</td> <td>￥4500</td> </tr> </tbody> <tfoot> <tr> <td>合計(jì)</td> <td>￥7900</td> </tr> </tfoot></table>
例子 2
使用 CSS 設(shè)置 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>儲(chǔ)蓄</th>
</tr>
</thead>
<tbody>
<tr>
<td>一月</td>
<td>￥3400</td>
</tr>
<tr>
<td>二月</td>
<td>￥4500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計(jì)</td>
<td>￥7900</td>
</tr>
</tfoot></table>例子 3
如何對(duì)齊 tfoot中的內(nèi)容(使用 CSS)：
<table style="width:100%"> <tr> <th>月份</th> <th>儲(chǔ)蓄</th> </tr> <tr> <td>一月</td> <td>￥3400</td> </tr> <tr> <td>二月</td> <td>￥4500</td> </tr> <tfoot style="text-align:center"> <tr> <td>合計(jì)</td> <td>￥7900</td> </tr> </tfoot></table>
例子 4
如何垂直對(duì)齊 tfoot中的內(nèi)容(使用 CSS)：
<table style="width:100%"> <tr> <th>月份</th> <th>儲(chǔ)蓄</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>合計(jì)</td> <td>￥7900</td> </tr> </tfoot></table>
【默認(rèn)的 CSS 設(shè)置】
大多數(shù)瀏覽器將使用以下默認(rèn)值顯示 tfoot元素：
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;}
友情鏈接：
知識(shí)付費(fèi) |
EDU指南導(dǎo)航 |
小程序開發(fā) |
上網(wǎng)行為管理 |
小程序開發(fā)公司 |
企業(yè)財(cái)務(wù)服務(wù) |
Copyright?2011 Guangzhou Longtengfei Network Technology Co., Ltd. 廣州龍騰飛網(wǎng)絡(luò)科技有限公司 粵ICP備18029205號(hào) XML地圖 | 系統(tǒng)開發(fā)專題地圖