HTML - tbody 标签

HTML <tbody> 标签用于在 HTML 表中创建一个单独的语义块，用于定义表的正文内容。

<tbody> 标签与 <thead> 和 <tfoot> 标记结合使用，它们分别指定表的页眉和页脚。<tbody> 标签必须用作 <table> 元素的子元素，位于 <thead>、<caption> 和 <colgroup> 元素之后。HTML5 <tfoot> 元素可以在 <tbody> 元素之前或之后找到。

浏览器可以使用这些元素来启用与页眉和页脚滚动分开的表正文滚动。这些功能还可以使在发布跨多个页面的大型表格时，将表格页眉和页脚打印在每页的顶部和底部。

语法


<tbody>
	 ...
</tbody>

属性

HTML tbody 标签支持 HTML 的全局属性和事件属性。下面提到的属性已被弃用，因此请使用 CSS 属性，而不是使用这些属性。

属性	值	描述
align	left right center justify	指定文本内容的对齐方式（已弃用）。
bgcolor	color	指定每个列单元格的背景色（已弃用）。
char	character	指定内容与每个列单元格的字符的对齐方式（已弃用）。
charoff	number	指定用于偏移列单元格内容与 char 属性指定的对齐字符的字符数（已弃用）。
valign	baseline bottom middle top	指定每个列单元格的垂直对齐方式（已弃用）。

HTML <tbody>标签示例

下面的例子将说明 tbody 标签的用法。在何处、何时以及如何使用 tbody 标签，以及如何设置表格正文部分的样式。

使用 tbody 标签创建语义块

以下示例，我们将在表中使用 <tbody> 标签。


<!DOCTYPE html>
<html>
<body>
	 	<table border="1">
	 	 	 <thead>
	 	 	 	 	<tr>
	 	 	 	 	 	 <th>ID</th>
	 	 	 	 	 	 <th>NAME</th>
	 	 	 	 	</tr>
	 	 	 </thead>
	 	 	 <tbody>
	 	 	 	 	<tr>
	 	 	 	 	 	 <td>1567</td>
	 	 	 	 	 	 <td>Maya</td>
	 	 	 	 	</tr>
	 	 	 	 	<tr>
	 	 	 	 	 	 <td>1566</td>
	 	 	 	 	 	 <td>Ram </td>
	 	 	 	 	</tr>
	 	 	 	 	<tr>
	 	 	 	 	 	 <td>1564</td>
	 	 	 	 	 	 <td>Rahul</td>
	 	 	 	 	</tr>
	 	 	 </tbody>
	 	</table>
</body>
</html>

样式表的正文部分

考虑另一种情况，我们将使用 CSS 设置 <tbody> 标签的样式。CSS 应用于 <tbody> 标签下的内容，并显示在网页上。


<!DOCTYPE html>
<html>
	 	<style>
	 	 	 th,
	 	 	 td {
	 	 	 	 	padding: 9px;
	 	 	 	 	border: 1.5px solid #DE3163;
	 	 	 }
	 	</style>
<body>
	 	<table style="width:50%; 	border-collapse:collapse;">
	 	 	 <thead>
	 	 	 	 	<tr>
	 	 	 	 	 	 <th>Items</th>
	 	 	 	 	 	 <th>Price</th>
	 	 	 	 	</tr>
	 	 	 </thead>
	 	 	 <tfoot>
	 	 	 	 	<tr>
	 	 	 	 	 	 <td>Total</td>
	 	 	 	 	 	 <td>1100</td>
	 	 	 	 	</tr>
	 	 	 </tfoot>
	 	 	 <tbody style="background-color:#ABEBC6;">
	 	 	 	 	<tr>
	 	 	 	 	 	 <td>Chocolates</td>
	 	 	 	 	 	 <td>200</td>
	 	 	 	 	</tr>
	 	 	 	 	<tr>
	 	 	 	 	 	 <td>Grocessary</td>
	 	 	 	 	 	 <td>900</td>
	 	 	 	 	</tr>
	 	 	 </tbody>
	 	</table>
</body>
</html>

对齐正文内容

让我们看另一个例子，我们将使用 CSS 将 <tbody> 标签内的内容对齐居中。


<!DOCTYPE html>
<html>
	 	<style>
	 	 	 table,
	 	 	 th,
	 	 	 td {
	 	 	 	 	border: 1.5px solid #A569BD;
	 	 	 }
	 	</style>
<body>
	 	<table style="width:50%">
	 	 	 <thead>
	 	 	 	 	<tr>
	 	 	 	 	 	 <th>Students</th>
	 	 	 	 	 	 <th>Marks</th>
	 	 	 	 	</tr>
	 	 	 </thead>
	 	 	 <tbody style="text-align:center">
	 	 	 	 	<tr>
	 	 	 	 	 	 <td>Maya</td>
	 	 	 	 	 	 <td>75</td>
	 	 	 	 	</tr>
	 	 	 	 	<tr>
	 	 	 	 	 	 <td>Raj</td>
	 	 	 	 	 	 <td>76</td>
	 	 	 	 	</tr>
	 	 	 	 	<tr>
	 	 	 	 	 	 <td>Suresh</td>
	 	 	 	 	 	 <td>77</td>
	 	 	 	 	</tr>
	 	 	 </tbody>
	 	</table>
</body>
</html>

主体元素的垂直对齐

在以下示例中，我们将使用 CSS 垂直对齐属性使 <tbody> 标签内的内容与中心对齐。


<!DOCTYPE html>
<html>
	 	<style>
	 	 	 table,
	 	 	 th,
	 	 	 td {
	 	 	 	 	border: 1.5px solid #2ECC71;
	 	 	 }
	 	</style>
<body>
	 	<table style="width:50%;">
	 	 	 <tr>
	 	 	 	 	<th>Employee</th>
	 	 	 	 	<th>Department</th>
	 	 	 </tr>
	 	 	 <tbody style="vertical-align:middle">
	 	 	 	 	<tr style="height:100px">
	 	 	 	 	 	 <td>Maya</td>
	 	 	 	 	 	 <td>InformationTechnology</td>
	 	 	 	 	</tr>
	 	 	 	 	<tr style="height:100px">
	 	 	 	 	 	 <td>Ram</td>
	 	 	 	 	 	 <td>Analyst</td>
	 	 	 	 	</tr>
	 	 	 	 	<tr style="height:100px">
	 	 	 	 	 	 <td>Suresh</td>
	 	 	 	 	 	 <td>Associate</td>
	 	 	 	 	</tr>
	 	 	 </tbody>
	 	 	 </table>
	 	</body>
</html>

支持的浏览器

Tag
tbody	Yes	Yes	Yes	Yes	Yes

打印本页