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

列印頁面