常用的html標(biāo)簽匯總、以及操作過程中的一些bug問題解決方法,以下龍騰飛網(wǎng)絡(luò)科技-小吳在建站實(shí)操中筆記記錄,一路走來,一步步學(xué)習(xí)、總結(jié)、整理的一些資料,不用死記硬背,保存使用非常方便,實(shí)操過程中遇到了就查詢搜索一下,實(shí)踐出真章,做多了自然就熟悉了:
【定義和用法】
thead標(biāo)簽用于對 HTML 表格中的標(biāo)題內(nèi)容進(jìn)行分組。
thead元素與 tbody和 tfoot元素結(jié)合使用,以規(guī)定表格的每個(gè)部分(頁眉、正文、頁腳)。
瀏覽器可以使用這些元素,使得在滾動(dòng)表格正文時(shí),頁眉和頁腳可以獨(dú)立顯示。此外,當(dāng)打印跨多個(gè)頁面的大型表格時(shí),這些元素可以使得表格的頁眉和頁腳在每頁的頂部和底部打印出來。
注意:thead元素內(nèi)部必須有一個(gè)或多個(gè) tr標(biāo)簽。
thead標(biāo)簽必須在以下上下文中使用:作為 table元素的子元素,在任何 caption和 colgroup元素之后,以及在任何 tbody、tfoot和 tr元素之前。
提示:默認(rèn)情況下,thead、tbody和 tfoot元素不會影響表格的布局。但是,您可以使用 CSS 來設(shè)置這些元素的樣式(請參閱下面的例子)!
【實(shí)例】
例子 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>合計(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>儲蓄</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
如何對齊 thead中的內(nèi)容(使用 CSS):
<table style="width:100%"> <thead style="text-align:left"> <tr> <th>月份</th> <th>儲蓄</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>¥3400</td> </tr> <tr> <td>二月</td> <td>¥4500</td> </tr> </tbody></table>
例子 4
如何垂直對齊 thead中的內(nèi)容(使用 CSS):
<table style="width:50%;"> <thead style="vertical-align:bottom"> <tr style="height:100px"> <th>月份</th> <th>儲蓄</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>¥3400</td> </tr> <tr> <td>二月</td> <td>¥4500</td> </tr> </tbody></table>
【默認(rèn)的 CSS 設(shè)置】
大多數(shù)瀏覽器將使用以下默認(rèn)值顯示 thead元素:
thead { display: table-header-group; vertical-align: middle; border-color: inherit;}