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> 标签的表格示例。

<!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 vertical-align 属性使 <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>

支持的浏览器

标签
tbody	是	是	是	是	是

html_tags_reference.htm

打印页面