【HTML教程】HTML的tbody标签|html入门知识
时间: 2025-03-26 22:38:46 浏览次数：10
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了： 【定义和用法】 tbody标签
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：
【定义和用法】
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>
【默认的 CSS 设置】
大多数浏览器将使用以下默认值显示 tbody元素：
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;}