1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <tbody>

<tbody>: 表格主體元素

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

<tbody> HTML 元素封裝了一組表格行（<tr> 元素），表示它們構成了表格主體（主要）資料。

試一試

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

屬性

此元素包含全域性屬性。

已棄用屬性

以下屬性已棄用，不應使用。它們僅在更新現有程式碼時作為參考和出於歷史興趣而在此處記錄。

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> 元素的內容通常會逐頁不同。
  • 當表格呈現在一個無法顯示整個表格的螢幕上下文（例如視窗）中時，使用者代理可以允許使用者在同一個父 <table> 元素中獨立滾動 <thead>、<tbody>、<tfoot> 和 <caption> 塊的內容。

示例

請參閱 <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: white;
}

結果

多個主體

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

使用多個 <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: white;
}

結果

技術摘要

內容類別 無。
允許內容 零個或多個 <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

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由MDN 貢獻者於修改。

在 GitHub 上檢視此頁面 • 報告此內容問題
© . Content available under a Creative Commons license.