<thead>: 表ヘッダー要素

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.

<thead> は HTML の要素で、表の列の見出しを定義する行のセットを定義します。

試してみましょう

<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: #fff;
}

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 属性および charoff 属性で定義します。

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

警告: この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。

値の配置を指定するには、CSS の text-align プロパティを使用してください。

bgcolor 非推奨;

この属性は、列の各セルの背景色を定義します。6 桁の 16 進による色または名前付きの色を受け付けます。アルファ透過には対応していません。

メモ: この属性は標準外であるため、使用しないでください。thead 要素はCSS の background-color プロパティを、適用可能な要素、たとえば thead, <tr>, <td>, <th> のいずれかの要素で使用してください。

char 非推奨;

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

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

charoff 非推奨;

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

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

valign 非推奨;

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

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

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

例

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

技術的概要

コンテンツカテゴリー	なし
許可されている内容	0 個以上の `<tr>` 要素
タグの省略	開始タグは必須。 `<thead>` 要素の直後に `<tbody>` 要素または `<tfoot>` 要素がある場合は終了タグを省略可能。
許可されている親要素	`<table>` 要素。 `<thead>` は（暗黙的に定義されるものであっても） `<caption>` 要素や `<colgroup>` 要素の後方かつ `<tbody>`, `<tfoot>`, `<tr>` の各要素の前方に配置しなければなりません。
暗黙の ARIA ロール	`rowgroup`
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLTableSectionElement`

仕様書

Specification
HTML # the-thead-element

ブラウザーの互換性

BCD tables only load in the browser