<th>：表格標題元素

此元素包含 全域性屬性。

abbr

標題單元格內容的簡短縮寫描述，作為在其他上下文中引用單元格時使用的標題單元格的替代標籤。某些使用者代理（例如語音閱讀器）可能會在內容本身之前呈現此描述。

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 以指定每個行標題所關聯的單元格，在下面的示例中，這些單元格是每行中的所有資料單元格（<td> 元素）。

<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>）。

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

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

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

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

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> 元素）被新增到每個後續行中。

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

<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 與 上一個示例 中的 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: #fff;
}

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

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

結果

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

HTML

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

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

結果

視覺結果 與 上一個示例表格 中的視覺結果一致。

• 學習：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 偽類，用於選擇所需的表頭單元格