HTML `<thead>` 表ヘッダー要素

Baseline Widely available *

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

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

<thead> は HTML の要素で、表の一連の行（<tr> 要素）をカプセル化し、それらが表の列に関する情報を含む表のフッターを構成していることを示します。これは通常、列見出し（<th> 要素）の形を採ります。

試してみましょう

<table>
  <caption>
    2018 年の議会の予算 (£)
  </caption>
  <thead>
    <tr>
      <th scope="col">商品</th>
      <th scope="col">支出</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">ドーナッツ</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">文具</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">合計</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

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 値を指定すると、テキストコンテンツは char 属性で定義された文字と、charoff 属性で定義されたオフセットに基づいて配置されます。この属性は非推奨となっているため、代わりに CSS の text-align プロパティを使用してください。
bgcolor: ヘッダー内の各セルの背景色を定義します。この値は HTML 色であり、6 桁の 16 進数の RGB コードの前に # が付いた形、または色キーワードのどちらかです。それ以外の CSS の <color> 値には対応していません。この属性は非推奨ですので、代わりに CSS の background-color プロパティを使用してください。
char: 何もしません。もともとは、ヘッダーの各セルのコンテンツをある文字へ整列することを指定するためのものでした。align が char に設定されていない場合、この属性は無視されます。
charoff: 何もしません。ヘッダー内のセルのコンテンツを、char 属性で指定された配置文字からオフセットする文字数を指定するためのものでした。
valign: ヘッダーの各セルの垂直方向の配置を指定します。指定可能な列挙値は、baseline、bottom、middle、top です。この属性は非推奨となっているため、代わりに CSS の vertical-align プロパティを使用してください。

使用上のメモ

<thead> は、<caption> および <colgroup> の各要素の後、<thead>、<tbody>、<tr> の各要素の前に配置されます。
関連する <tbody> および <tfoot> 要素と共に、<thead> 要素は有用な意味的情報を提供し、画面表示と印刷のどちらの場合にも使用できます。このような表のコンテンツグループを指定することは、スクリーンリーダーや検索エンジンを含む支援技術に対して、貴重な文脈情報を提供することに同時になります。
文書を印刷する際、複数ページにわたる表の場合、表のヘッダーは通常、それぞれのページで変わらない情報を指定します。

例

一般的な標準や最善の手法を紹介する完全な表の例については、<table> をご覧ください。

基本的なヘッダー構造

この例では、列見出しを含むヘッダー部分、表の主要なデータを含む本体部分、および 1 つの列のデータを要約したフッター部分に分かれた表を示しています。

HTML

<thead> および <tbody> 要素は、表の行の構造を意味的なセクションに分割します。<thead> 要素は、表のヘッダーセクションを表しており、そこには列の見出しセル (<th>) の行 (<tr>) が含まれています。

html

<table>
  <thead>
    <tr>
      <th>学生 ID</th>
      <th>名前</th>
      <th>専攻</th>
      <th>クレジット</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>コンピューター科学</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>ロシア文学</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>天体物理学</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: white;
}

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

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

tbody > tr > td:last-of-type {
  text-align: center;
}

結果

複数のヘッダー行

This example demonstrates a table head section with two rows.

HTML

We extend the markup the table from the basic example in this example by including two table rows (<tr>) within the <thead> element creating a multi-row table head. We included an additional column, splitting the student names into first and last names.

html

<table>
  <thead>
    <tr>
      <th rowspan="2">学生 ID</th>
      <th colspan="2">学生</th>
      <th rowspan="2">専攻</th>
      <th rowspan="2">クレジット</th>
    </tr>
    <tr>
      <th>名前</th>
      <th>苗字</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Martha</td>
      <td>Jones</td>
      <td>コンピューター科学</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Victor</td>
      <td>Nim</td>
      <td>ロシア文学</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Alexandra</td>
      <td>Petrov</td>
      <td>天体物理学</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

セルをまたがらせる

見出しセルを正しい列や行に関連付け配置するために、colspan および rowspan 属性を <th> 要素に対して使用しています。この属性に設定された値は、それぞれの見出しセル (<th>) がいくつ分のセルにまたがるかを指定します。これらの属性の設定方法により、2 行目の 2 つの見出しセルは、それらが先頭にある列と揃えられています。これらはそれぞれ 1 行と 1 列にまたがっており、これは colspan および rowspan 属性のデフォルト値がどちらも 1 であるためです。

この例で示した列および行の結合は、次の図に示されています。

表のセルの列および行にわたる配置を示す図。セル 1、3、4 は 2行にわたって配置され、セル 2 は 2 列にわたって配置され、セル 5 と 6 は 2 行目の 2 列目と 3 列目にあたる利用できる空きセルに収まっています

CSS

CSS は前回の例と変わりません。

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

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

tbody {
  background-color: #e4f0f5;
}

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

tbody > tr > td:last-of-type {
  text-align: center;
}

結果

技術的概要

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

仕様書

Specification
HTML # the-thead-element

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on 2026年5月18日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTML <thead> 表ヘッダー要素

HTML

CSS

結果

HTML

セルをまたがらせる

CSS

結果

Help improve MDN

HTML `<thead>` 表ヘッダー要素