<th>: 表見出し要素

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

<th> は HTML の要素で、表のセルのグループ用の見出しであるセルを定義します。このグループの正確な性質は、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: #fff;
}

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

td {
  text-align: center;
}

tr:nth-of-type(even) {
  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;
}

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

属性

この要素にはグローバル属性があります。

abbr

この属性は、セルの内容の簡潔な説明を持ちます。読み上げソフトなど一部のユーザーエージェントは、内容自体の前にこの説明を提供することがあります。

colspan

この属性はセルをいくつの列に広げるかを示す、負でない整数を持ちます。既定値は 1 です。1000 を超える値は正しくないとみなされ、既定値 (1) が設定されるでしょう。

headers

この属性は、空白文字で区切られた文字列のリストを持ちます。各々の文字列は、この要素に当てはめる <th> 要素の id 属性と対応します。

rowspan

この属性はセルをいくつの行に広げるかを示す、負でない整数を持ちます。既定値は 1 です。0 を設定した場合は、セルが属する表セクション (<thead>, <tbody>, <tfoot>, 暗黙的に定義されたものも含む) の終端まで拡張します。 65534 より大きな値は、 65534 に切り詰めます。

scope

これは列挙型の属性で、この (<th> で定義されている) 見出し要素が関連するセルを定義します。次の値を取ることができます。

  • row: この見出しはその行に属するすべてのセルに関連します。
  • col: この見出しはその列に属するすべてのセルに関連します。
  • rowgroup: この見出しは行グループに属し、その中のすべてのセルに関連します。
  • colgroup: この見出しは列グループに属し、その中のすべてのセルに関連します。

もし scope 属性が指定されていないか、その値が row, col, rowgroup, colgroup でない場合は、ブラウザーは自動的に見出しセルが適用されるセルの集合を選択します。

非推奨の属性

align

この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値を指定可能です。

  • left: 中身をセルの左側に揃えます。
  • center: 中身をセル内で中央揃えにします。
  • right: 中身をセルの右側に揃えます。
  • justify（テキストのみ）: セルの中で幅が全体にわたるように、中身が引き延ばされます。
  • char（テキストのみ）: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は char 属性および charoff 属性で定義します。

この属性を設定しない場合は、値が left であるとみなされます。

メモ: この属性は最新の標準仕様で廃止されたため、使用しないでください。

  • left, center, right, justify の値と同様の効果を得るには、 CSS の text-align プロパティを使用してください。
  • char の値と同様の効果を得るには、 text-align プロパティに char で使用する値と同じものを指定してください。
axis

この属性は、空白文字で区切られた文字列のリストを持ちます。各文字列は、このヘッダーを適用するセルグループの id です。

メモ: この属性は最新の標準で廃止されているため、使用しないでください。代わりに scope 属性を使用してください。

bgcolor

この属性は、列の各セルの背景色を定義します。値は sRGB で定義された 6 桁の 16 進数値のいずれかで、先頭に '#' を付加します。

char

この属性は、列内のセルで揃える文字を設定します。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。 align 属性を char に設定していない場合は、この属性を無視します。

メモ: この属性は最新の標準で廃止されているため、使用しないでください。 CSS3 で同じ効果を得るには、 text-align プロパティの最初の値としてその文字を設定することができます。

charoff

この属性は、 char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。この値は、このシフトの長さを指定します。

メモ: この属性は最新の標準で廃止されているため、使用しないでください。

height

この属性はセルの高さの推奨値を定義するために使用されます。

メモ: この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の height プロパティを使用してください。

valign

この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

  • baseline: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字のベースラインに揃えます。文字がサイズ全体に渡る場合は、 bottom と同じ効果になります。
  • bottom: テキストを可能な限りセルの下端に近づけて配置します。
  • middle: テキストをセル内の中央に置きます。
  • top: テキストを可能な限りセルの上端に近づけて配置します。

メモ: この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の vertical-align プロパティを使用してください。

width

この属性は、セルの推奨する幅を定義します。 cellspacing および cellpadding プロパティで追加のスペースを追加し、また <col> の幅も影響を与えます。通常、列の幅が特定のセルを正常に表示できないほど狭く、またそのようなセルが存在する場合は、表示する際に幅を広げるでしょう。

メモ: この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の width プロパティを使用してください。

例

<th> 要素の例については、<table> を参照してください。

技術的概要

コンテンツカテゴリー なし。
許可されている内容 フローコンテンツ、ただしヘッダー、フッター、区分コンテンツ、見出しコンテンツを除く。
タグの省略 開始タグは必須です。
直後に <th> 要素または <td> 要素がある場合、または親要素内で以降のデータがない場合は終了タグを省略可能。
許可されている親要素 <tr> 要素
暗黙の ARIA ロール columnheader または rowheader
許可されている ARIA ロール すべて
DOM インターフェイス HTMLTableCellElement

仕様書

Specification
HTML
# the-th-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報