<tbody>: 表格主體元素

基線 廣泛可用

此功能非常成熟，並且可以在許多裝置和瀏覽器版本上正常工作。它已在瀏覽器中可用，自 2015 年 7 月.

<tbody> HTML 元素封裝了一組表格行 (<tr> 元素)，表明它們構成了表格的 (主要) 資料主體。

試一試

屬性

此元素包括 全域性屬性。

已棄用屬性

以下屬性已棄用，不應使用。它們在下面記錄是為了在更新現有程式碼時參考，以及為了歷史記錄。

align

指定每個主體單元格的水平對齊方式。可能的 列舉 值為 left、center、right、justify 和 char。如果支援，char 值會根據 char 屬性中定義的字元和 charoff 屬性中定義的偏移量對齊文字內容。請改用 text-align CSS 屬性，因為此屬性已棄用。

bgcolor

定義每個主體單元格的背景顏色。該值為 HTML 顏色；可以是 6 位十六進位制 RGB 程式碼（以 '#' 為字首）或 顏色關鍵字。不支援其他 CSS <color> 值。請改用 background-color CSS 屬性，因為此屬性已棄用。

char

指定每個主體單元格的內容對齊到字元的位置。此屬性的典型值包括句點 (.)，當嘗試對齊數字或貨幣值時使用。如果 align 未設定為 char，則忽略此屬性。

charoff

指定主體單元格內容從 char 屬性指定的對齊字元偏移的字元數。

valign

指定每個主體單元格的垂直對齊方式。可能的 列舉 值為 baseline、bottom、middle 和 top。請改用 vertical-align CSS 屬性，因為此屬性已棄用。

使用說明

  • <tbody> 放在任何 <caption>、<colgroup> 和 <thead> 元素之後。
  • 如果 <tr> 元素指定為 <table> 的直接子元素（有關何時有效，請參閱 技術摘要 中的“標記省略”），則瀏覽器生成的標記將包含一個 <tbody> 元素來封裝它們。因此，諸如 table > tr 之類的 CSS 選擇器將不會選擇這些元素。另請參閱 未指定主體 示例。
  • 允許每個表格使用多個 <tbody>，只要它們都是連續的。這允許將大型表格中的行 (<tr> 元素) 分成幾部分，每個部分都可以根據需要單獨格式化。如果未標記為連續元素，瀏覽器將更正此作者錯誤，確保任何 <thead> 和 <tfoot> 元素分別被渲染為表格的第一個和最後一個元素。
  • 與相關的 <thead> 和 <tfoot> 元素一起，<tbody> 元素提供了有用的 語義 資訊，可用於螢幕或列印渲染。指定這樣的表格內容組還為輔助技術（包括螢幕閱讀器和搜尋引擎）提供了有價值的上下文資訊。
  • 列印文件時，對於跨頁表格，<thead> 和 <tfoot> 元素通常指定在每頁保持不變或至少非常相似的資訊，而 <tbody> 元素的內容通常會在各頁之間有所不同。
  • 當表格在螢幕環境（如視窗）中呈現，而螢幕環境不足以顯示整個表格時，使用者代理 可以讓使用者分別滾動 <thead>、<tbody>、<tfoot> 和 <caption> 塊的內容，而這些塊屬於同一個父級 <table>。

示例

有關完整表格示例，介紹常見標準和最佳實踐，請參閱 <table>。

不指定主體

此示例演示瞭如果行未巢狀在表格分組元素（<tbody>、<tfoot> 或 <thead>）內，而是像此示例一樣，是 <table> 元素的直接子元素，則瀏覽器會自動將 <tr> 元素封裝在 <tbody> 元素中。

HTML

在此，建立了一個非常基本的表格，其中包含一些包含資料的表格行 (<tr> 元素) (<td> 元素)，這些資料與學生有關。

html
<table>
  <tr>
    <td>3741255</td>
    <td>Jones, Martha</td>
    <td>Computer Science</td>
    <td>240</td>
  </tr>
  <tr>
    <td>3971244</td>
    <td>Nim, Victor</td>
    <td>Russian Literature</td>
    <td>220</td>
  </tr>
  <tr>
    <td>4100332</td>
    <td>Petrov, Alexandra</td>
    <td>Astrophysics</td>
    <td>260</td>
  </tr>
</table>

CSS

請注意示例中的 CSS，其中為 <tbody> 元素指定了 background-color，並且 tbody 用作附加 CSS 選擇器 的一部分。或者，可以使用 瀏覽器開發者工具 檢查 DOM 中是否存在 <tbody> 元素。

css
tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  width: 60px;
  text-align: center;
}

結果

基本主體結構

此示例擴充套件並增強了 上一個示例 中的基本表格。

HTML

我們引入了表格頭部 (<thead> 元素)，並明確使用 <tbody> 元素將表格結構化為 語義 部分。表格頭部包含列標題 (<th> 元素)。<tbody> 元素代表表格的正文部分，其中包含若干行 (<tr> 元素)，這些行包含表格的主要資料，即每個學生的資料。

使用這樣的表格內容組和 語義 標記不僅對視覺呈現（透過 CSS 樣式）和輔助技術的上下文資訊有用；此外，明確使用 <tbody> 元素有助於瀏覽器建立預期的表格結構，避免出現不希望的結果。

html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

CSS 與 上一個示例 幾乎相同，除了對錶格頭部進行了一些基本樣式設定，以便表格頭部中的列標題與表格正文中的資料區分開來。與 上例 一樣，tbody 型別選擇器 用於設定主體單元格的樣式。

css
tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: #fff;
}

結果

多個主體

此示例透過引入多個正文部分，進一步擴充套件和增強了 上一個示例 中的表格。

使用多個 <tbody> 元素可以在表格中建立行分組。每個表格主體都可能擁有自己的頭部行或多行；但是，每個表格只能有一個 <thead> 元素！ 因此，可以使用包含 <th> 元素的 <tr> 在每個 <tbody> 中建立標題。

HTML

基於 上一個基本示例 中的表格，添加了更多學生，並且沒有在每行上列出每個學生的專業，而是按專業對學生進行了分組。請注意，每個專業都包含在其自己的 <tbody> 塊中，第一行 (<tr> 元素) 充當塊的頭部，在 <th> 元素中顯示專業標題，該元素使用 colspan 屬性將標題跨越表格的全部三列。每個專業 <tbody> 中的其餘行代表一個學生。

html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">Computer Science</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>240</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
      <td>200</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
      <td>230</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Russian Literature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>220</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Astrophysics</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>260</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
      <td>240</td>
    </tr>
  </tbody>
</table>

CSS

大多數 CSS 保持不變。但是，為直接包含在 <tbody> 中的頭部單元格（與位於 <thead> 中的頭部單元格相對）添加了稍微更細微的樣式。這用於指示每個表格部分對應專業的標題。

css
tbody > tr > th {
  border-top: 2px solid rgb(160 160 160);
  border-bottom: 1px solid rgb(140 140 140);
  background-color: #e4f0f5;
  font-weight: normal;
}

tbody {
  background-color: whitesmoke;
}

thead {
  background-color: #2c5e77;
  color: #fff;
}

結果

技術摘要

內容類別 無。
允許內容 零個或多個 <tr> 元素。
標記省略 如果 <tbody> 元素內的第一個內容是 <tr> 元素，並且該元素沒有緊接在 <tbody>、<thead> 或 <tfoot> 元素（其結束標記已省略）之前，則可以省略 <tbody> 元素的開始標記。（如果元素為空，則不能省略。）如果 <tbody> 元素緊接在 <tbody> 或 <tfoot> 元素之後，或者父元素中沒有更多內容，則可以省略 <tbody> 元素的結束標記。
允許的父元素 在必需的父級 <table> 元素中，可以將 <tbody> 元素新增到任何 <caption>、<colgroup> 和 <thead> 元素之後。
隱式 ARIA 角色 rowgroup
允許的 ARIA 角色 任何
DOM 介面 HTMLTableSectionElement

規範

規範
HTML 標準
# the-tbody-element

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱