常用的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;}