HTML <thead> ਟੈਗ
定义和用法
<thead>
标签用于对 HTML 表格中的标题内容进行分组。
<thead>
元素与 </thead> 和 <tfoot> 元素结合使用,以规定表格的每个部分(页眉、正文、页脚)。
浏览器可以使用这些元素,使得在滚动表格正文时,页眉和页脚可以独立显示。此外,当打印跨多个页面的大型表格时,这些元素可以使得表格的页眉和页脚在每页的顶部和底部打印出来。
注意:<thead>
元素内部必须有一个或多个 <td>¥3400</td> 标签。
<thead>
标签必须在以下上下文中使用:作为 <table> 元素的子元素,在任何 <caption> 和 <colgroup> 元素之后,以及在任何 </thead>、<tfoot> 和 <td>¥3400</td> 元素之前。
提示:默认情况下,<thead>
、<tbody> 和 <tfoot> 元素不会影响表格的布局。但是,您可以使用 CSS 来设置这些元素的样式(请参阅下面的例子)!
实例
例子 1
包含 <thead>、<tbody> 和 <tfoot> 元素的 HTML 表格:
<table> <thead> <td>¥3400</td> <tr style="height:100px"> <th>ਮਹੀਨਾ</th> <td>¥4500</td> <th>ਬੰਦਰਾਕਾਰੀ</th> </thead> <td>¥3400</td> <tbody> <td>ਜਨਵਰੀ</td> <td>¥4500</td> <td>¥3400</td> <tr> <td>ਫਰਵਰੀ</td> <td>¥4500</td> </tr> <tfoot> <td>¥3400</td> <td>合计</td> <td>¥7900</td> <td>¥4500</td> </tfoot> </tbody>
例子 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> <td>¥3400</td> <tr style="height:100px"> <th>ਮਹੀਨਾ</th> <td>¥4500</td> <th>ਬੰਦਰਾਕਾਰੀ</th> </thead> <td>¥3400</td> <tbody> <td>ਜਨਵਰੀ</td> <td>¥4500</td> <td>¥3400</td> <tr> <td>ਫਰਵਰੀ</td> <td>¥4500</td> </tr> <tfoot> <td>¥3400</td> <td>合计</td> <td>¥7900</td> <td>¥4500</td> </tfoot> </tbody>
例子 3
如何对齐 <thead>
中的内容(使用 CSS):
<table style="width:100%"> <thead style="text-align:left"> <td>¥3400</td> <tr style="height:100px"> <th>ਮਹੀਨਾ</th> <td>¥4500</td> <th>ਬੰਦਰਾਕਾਰੀ</th> </thead> <td>¥3400</td> <tbody> <td>ਜਨਵਰੀ</td> <td>¥4500</td> <td>¥3400</td> <tr> <td>ਫਰਵਰੀ</td> <td>¥4500</td> </tr> </tbody>
例子 4
如何垂直对齐 <thead>
中的内容(使用 CSS):
<table style="width:50%;"> <thead style="vertical-align:bottom"><tr style="height:100px"> <th>ਮਹੀਨਾ</th> <td>¥4500</td> <th>ਬੰਦਰਾਕਾਰੀ</th> </thead> <td>¥3400</td> <tbody> <td>ਜਨਵਰੀ</td> <td>¥4500</td> <td>¥3400</td> <tr> <td>ਫਰਵਰੀ</td> <td>¥4500</td> </tr> </tbody> ਸਵੈਂ ਪ੍ਰਯੋਗ ਕਰੋ
<thead>
ਟੈਗ ਇਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਵੀ ਸਮਰਥਨ ਕਰਦੇ ਹਨ ਗਲੋਬਲ ਪ੍ਰਤੀਯੋਗਿਤਾ.HTML ਵਿੱਚ ਗਲੋਬਲ ਪ੍ਰਤੀਯੋਗਿਤਾ
<thead>
ਟੈਗ ਇਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਵੀ ਸਮਰਥਨ ਕਰਦੇ ਹਨ HTML ਵਿੱਚ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ.ਡਿਫਾਲਟ ਸੀਐੱਸਐੱਸ ਸੈਟਿੰਗ
ਮੋਸਟ ਬਰਾਉਜ਼ਰ ਹੇਠ ਲਿਖੇ ਡਿਫਾਲਟ ਮੁੱਲਾਂ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ
<thead>
ਅਣੂ ਪ੍ਰਤੀਯੋਗਿਤਾ:thead { display: table-header-group; vertical-align: middle; border-color: inherit; }ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ
ਚਰਮੋਇਲ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ ਚਰਮੋਇਲ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ