<th>: 表頭元素

Baseline 廣泛可用 *

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

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

<th> HTML 元素將一個單元格定義為一組表格單元格的標題，並且可以用作 <tr> 元素的子元素。這組單元格的具體性質由 scope 和 headers 屬性定義。

試一試

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

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

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

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;
}

屬性

此元素包含全域性屬性。

縮寫

表頭單元格內容的簡短縮寫描述，作為在其他上下文中引用該單元格時使用的替代標籤。一些使用者代理（例如螢幕閱讀器）可能會在內容本身之前顯示此描述。

colspan

一個非負整數值，表示表頭單元格跨越或擴充套件的列數。預設值為 1。使用者代理會將大於 1000 的值視為不正確，並將其預設設定為 1。

headers

一個由空格分隔的字串列表，對應於為該表頭單元格提供標題的 <th> 元素的 id 屬性。

rowspan

一個非負整數值，表示表頭單元格跨越或擴充套件的行數。預設值為 1；如果其值設定為 0，表頭單元格將擴充套件到 <th> 所屬的表格分組部分的末尾（<thead>、<tbody>、<tfoot>，即使是隱式定義的）。大於 65534 的值將被截斷為 65534。

scope

定義標題（在 <th> 中定義）元素所關聯的單元格。可能的列舉值為

row: 標題與其所屬行的所有單元格相關聯；
col: 標題與其所屬列的所有單元格相關聯；
rowgroup: 標題屬於一個行組，並與其所有單元格相關聯；
colgroup: 標題屬於一個列組，並與其所有單元格相關聯。

如果未指定 scope 屬性，或者其值不是 row、col、rowgroup 或 colgroup，則瀏覽器會自動選擇表頭單元格適用的單元格集。

已棄用屬性

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

align 已棄用: 指定表頭單元格的水平對齊方式。可能的列舉值為 left、center、right、justify 和 char。當支援時，char 值將文字內容對齊到 char 屬性中定義的字元以及 charoff 屬性定義的偏移量。請改用 text-align CSS 屬性，因為此屬性已棄用。
axis 已棄用: 包含一個由空格分隔的字串列表，每個字串對應於表頭單元格所適用的單元格組的 id 屬性。請改用 scope 屬性，因為此屬性已棄用。
bgcolor 已棄用: 定義表頭單元格的背景顏色。該值是 HTML 顏色；可以是字首為 # 的 6 位十六進位制 RGB 程式碼，也可以是顏色關鍵字。不支援其他 CSS <color> 值。請改用 background-color CSS 屬性，因為此屬性已棄用。
char 已棄用: 不執行任何操作。它最初旨在指定內容對齊到表頭單元格的字元。典型的包括句點 (.)，當嘗試對齊數字或貨幣值時。如果 align 未設定為 char，則忽略此屬性。
charoff 已棄用: 不執行任何操作。它最初旨在指定表頭單元格內容與 char 屬性指定的對齊字元之間的偏移字元數。
height 已棄用: 定義建議的表頭單元格高度。請改用 height CSS 屬性，因為此屬性已棄用。
valign 已棄用: 指定表頭單元格的垂直對齊方式。可能的列舉值為 baseline、bottom、middle 和 top。請改用 vertical-align CSS 屬性，因為此屬性已棄用。
width 已棄用: 定義建議的表頭單元格寬度。請改用 width CSS 屬性，因為此屬性已棄用。

用法說明

<th> 只能在 <tr> 元素中使用。
在簡單的上下文中，在表頭單元格（<th> 元素）上使用 scope 屬性是多餘的，因為 scope 是可以推斷的。然而，某些輔助技術可能無法正確推斷，因此指定表頭範圍可能會改善使用者體驗。
當使用 colspan 和 rowspan 屬性使表頭單元格跨越多列和多行時，未定義這些屬性（預設值為 1）的單元格將自動填充到表格結構中跨越 1x1 單元格的可用空白空間中，如下圖所示

注意： 這些屬性不得用於重疊單元格。

示例

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

基本的列標題和行標題

本示例使用 <th> 元素在基本表格結構中引入列標題和行標題。

HTML

第一行（<tr> 元素）包含列標題（<th> 元素），它們充當列的“標題”，以使其更容易理解列中的資訊並識別資料。為了表示每個列標題與相應列中的所有單元格相關聯，scope 屬性設定為 col（列）。

其餘行包含表格的主要資料。這些行中的每一行都有一個行標題（<th> 元素）作為第一個單元格引入。這建立了一個以行標題為表格第一列的列。與列標題類似，scope 屬性設定為 row，以指定每個行標題所關聯的單元格，在下面的示例中是每個 row 中的所有資料單元格（<td> 元素）。

注意： 通常，分組元素 <thead> 和 <tbody> 用於將帶有標題的行分組到相應的表格頭部和主體部分。此示例中省略了這些元素，以降低複雜性並專注於標題單元格的使用。

html

<table>
  <tr>
    <th scope="col">Symbol</th>
    <th scope="col">Code word</th>
    <th scope="col">Pronunciation</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

一些基本的 CSS 用於樣式化表格及其單元格。我們使用 CSS 屬性選擇器根據其 scope 屬性值定位標題單元格，突出顯示列標題和行標題（<th> 元素），並將它們彼此以及與資料單元格（<td>）區分開來。

css

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

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

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

結果

列和行跨越

此示例透過新增第二行以提供額外的列標題，擴充套件和增強了前一個示例中的基本表格。

HTML

一個額外的表格行（<tr> 元素）作為表格的第二行標題新增，其中包含兩個額外的列標題（<th> 元素）。透過這種方式，“發音”列被分成兩列，一列用於 IPA（國際音標）符號，一列用於重拼（原始發音列）。相應的資料單元格（<td> 元素）被新增到每個後續行。

如使用說明所示，colspan 和 rowspan 屬性可用於 <th> 元素，將標題單元格分配到正確的列和行。為了在表格結構中實現“兩行”標題，第一個 <tr> 元素中的前兩個標題單元格跨越兩行。第三個標題單元格跨越兩列寬（保留在第一行）。這種設定在第二行的第三和第四列中留下兩個可用區域，其中第二個 <tr> 元素中的兩個標題自動放置，colspan 和 rowspan 屬性的預設值為 1。

注意： 通常，<thead> 和 <tbody> 元素用於將帶有標題的行分組到相應的表格頭部和主體部分。此示例中未實現這一點，以專注於標題和跨越，並降低示例的複雜性。

html

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col">IPA</th>
    <th scope="col">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

CSS 與前一個示例相比沒有變化。

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

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

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

結果

將表頭單元格與其他表頭單元格關聯

對於表頭單元格之間更復雜的關係，僅使用帶有 scope 屬性的 th 元素可能不足以用於輔助技術，尤其是螢幕閱讀器。

HTML

為了提高前一個示例的可訪問性，並允許螢幕閱讀器（例如）讀出與每個表頭單元格關聯的標題，可以引入 headers 屬性以及 id 屬性。由於“發音”列在示例中被分成兩列，引入了“兩行”標題，輔助技術（例如螢幕閱讀器）可能無法識別“發音”表頭單元格與哪些額外的表頭單元格（th 元素）相關，反之亦然。因此，在“發音”、“IPA”和“重拼”表頭單元格上使用 headers 屬性，根據新增的 id 屬性的唯一識別符號值（以空格分隔的列表形式）關聯相關的表頭單元格。

注意： 建議為 id 屬性使用更具描述性和有用的值。文件中的每個 id 都必須在該文件中是唯一的。在此示例中，id 值是單個字元，以保持對 headers 屬性概念的關注。

html

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2" id="p" headers="i r">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col" id="i" headers="p">IPA</th>
    <th scope="col" id="r" headers="p">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

結果

視覺結果與前一個示例表格相比沒有變化。

技術摘要

內容類別	無。
允許內容	流式內容，但沒有頁首、頁尾、分段內容或標題內容後代。
標籤省略	開始標籤是強制性的。如果緊隨其後的是 `<th>` 或 `<td>` 元素，或者其父元素中沒有更多資料，則可以省略結束標籤。
允許父級	一個 `<tr>` 元素。
隱式 ARIA 角色	`columnheader` 或 `rowheader`
允許的 ARIA 角色	任意
DOM 介面	`HTMLTableCellElement`

規範

規範
HTML # the-th-element

瀏覽器相容性

另見

學習：HTML 表格基礎
<caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <thead>, <tr>: 其他與表格相關的元素
background-color: 設定每個表頭單元格背景色的 CSS 屬性
border: 控制表頭單元格邊框的 CSS 屬性
height: 控制建議的表頭單元格高度的 CSS 屬性
text-align: 水平對齊每個表頭單元格內容的 CSS 屬性
vertical-align: 垂直對齊每個表頭單元格內容的 CSS 屬性
width: 控制建議的表頭單元格寬度的 CSS 屬性
:nth-of-type, :first-of-type, :last-of-type: 選擇所需表頭單元格的 CSS 偽類

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 8 月 13 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題