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

<thead>：表格頭部元素

Baseline 廣泛可用 *

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

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

<thead> HTML 元素用於封裝一組表格行（<tr> 元素），表示它們構成表格的頭部，包含有關表格列的資訊。這通常以列標題（<th> 元素）的形式出現。

試一試

<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 屬性，因為此屬性已棄用。

用法說明

  • <thead> 位於任何 <caption> 和 <colgroup> 元素之後，但在任何 <tbody>、<tfoot> 和 <tr> 元素之前。
  • <thead> 元素及其相關的 <tbody> 和 <tfoot> 元素提供了有用的語義資訊，可用於螢幕或列印渲染。指定此類表格內容組也為輔助技術（包括螢幕閱讀器和搜尋引擎）提供了寶貴的上下文資訊。
  • 列印文件時，如果表格跨越多頁，表格頭部通常會指定每頁都相同的資訊。

示例

請參閱 <table> 以獲取一個完整的表格示例，其中介紹了常見的標準和最佳實踐。

基本表頭結構

此示例演示了一個表格，該表格分為帶列標題的頭部部分和帶表格主要資料的正文部分。

HTML

<thead> 和 <tbody> 元素用於將表格行結構化為語義部分。<thead> 元素表示表格的頭部部分，其中包含一行（<tr>）列標題單元格（<th>）。

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 來設定表格頭部的樣式和突出顯示，以便列標題在表格正文資料中脫穎而出。

css
thead {
  border-bottom: 2px solid rgb(160 160 160);
  text-align: center;
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

結果

多行表頭

此示例演示了一個具有兩行的表格頭部部分。

HTML

在此示例中，我們透過在 <thead> 元素中包含兩行表格行（<tr>），從而建立了一個多行表格頭部，擴充套件了基本示例中的表格標記。我們添加了一個額外的列，將學生姓名分為姓氏和名字。

html
<table>
  <thead>
    <tr>
      <th rowspan="2">Student ID</th>
      <th colspan="2">Student</th>
      <th rowspan="2">Major</th>
      <th rowspan="2">Credits</th>
    </tr>
    <tr>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Martha</td>
      <td>Jones</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Victor</td>
      <td>Nim</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Alexandra</td>
      <td>Petrov</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

單元格跨度

為了將標題單元格與正確的列和行關聯和對齊，在 <th> 元素上使用了 colspan 和 rowspan 屬性。這些屬性中設定的值指定了每個標題單元格（<th>）跨越多少個單元格。由於這些屬性的設定方式，第二行的兩個標題單元格與它們所對應的列對齊。它們各自跨越一行和一列，因為 colspan 和 rowspan 屬性的預設值都為 1。

此示例演示的列和行跨度如下圖所示

Illustration demonstrating column and row spanning of table cells: cells 1, 3, and 4 spanning one column and two rows each; cell 2 spanning two columns and one row; cells 5 and 6 span a single row and column each, fitting into the available cells that are the second and third columns in the second row

CSS

CSS 與上一個示例保持不變。

結果

技術摘要

內容類別 無。
允許內容 零個或多個 <tr> 元素。
標籤省略 開始標籤是強制性的。如果 <thead> 元素緊跟在 <tbody> 或 <tfoot> 元素之後，則結束標籤可以省略。
允許父級 一個 <table> 元素。<thead> 必須出現在任何 <caption> 和 <colgroup> 元素之後（即使是隱式定義的），但在任何 <tbody>、<tfoot> 和 <tr> 元素之前。
隱式 ARIA 角色 rowgroup
允許的 ARIA 角色 任意
DOM 介面 HTMLTableSectionElement

規範

規範
HTML
# 表頭元素

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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