<thead>：表格頭部元素

基線 廣泛可用

此功能已得到很好的確立，並且可在許多裝置和瀏覽器版本上執行。它自以下日期起在各瀏覽器中可用： 2015 年 7 月.

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

試一試

屬性

此元素包含 全域性屬性。

已棄用屬性

以下屬性已棄用，不應使用。在更新現有程式碼和出於歷史參考的目的，我們會在下面記錄它們。

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>元素之前。
  • 與相關的<tbody>和<tfoot>元素一起，<thead>元素提供了有用的語義資訊，並且可以在螢幕或列印渲染時使用。指定此類表格內容組還可以為輔助技術（包括螢幕閱讀器和搜尋引擎）提供有價值的上下文資訊。
  • 列印文件時，如果表格跨多個頁面，則表頭通常會指定在每個頁面上保持不變的資訊。

示例

有關完整的表格示例，介紹常見標準和最佳實踐，請參閱<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: #fff;
}

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>

單元格跨度

為了將表頭單元格與正確的列和行關聯並對齊，colspan和rowspan屬性用於<th>元素。這些屬性中設定的值指定每個表頭單元格（<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 與上一個示例中的 CSS 相同。

結果

技術摘要

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

規範

規範
HTML 標準
# the-thead-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱