HTML <tbody> 标签
定义和用法
<tbody>
标签用于对 HTML 表格中的正文内容进行分组。
<tbody>
元素与 <thead> 和 <tfoot> 元素结合使用,以指定表格的每个部分(正文、页眉、页脚)。
浏览器可以使用这些元素,使得在滚动表格正文时,页眉和页脚可以独立显示。此外,当打印跨多个页面的大型表格时,这些元素可以使得表格的页眉和页脚在每页的顶部和底部打印出来。
注意:<tbody>
元素内部必须有一个或多个 <tr> 标签。
<tbody>
标记必须在以下上下文中使用:作为 <table> 元素的子元素,在任何 <caption>、<colgroup> 和 <thead> 元素之后。
提示:默认情况下,<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
如何对齐 <tbody>
中的内容(使用 CSS):
<table style="width:100%"> <thead> <tr> <th>月份</th> <th>储蓄</th> </tr> </thead> <tbody style="text-align:right"> <tr> <td>一月</td> <td>¥3400</td> </tr> <tr> <td>二月</td> <td>¥4500</td> </tr> </tbody> </table>
例子 4
如何垂直对齐 <tbody>
中的内容(使用 CSS):
<table style="width:50%;"> <tr> <th>月份</th> <th>储蓄</th> </tr> <tbody style="vertical-align:bottom"> <tr style="height:100px"> <td>一月</td> <td>¥3400</td> </tr> <tr style="height:100px"> <td>二月</td> <td>¥4500</td> </tr> </tbody> </table>
全局属性
<tbody>
标签还支持 HTML 中的全局属性。
事件属性
<tbody>
标签还支持 HTML 中的事件属性。
默认的 CSS 设置
大多数浏览器将使用以下默认值显示 <tbody>
元素:
tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }
浏览器支持
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
支持 | 支持 | 支持 | 支持 | 支持 |