<thead>: 表ヘッダー要素

試してみましょう

<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> を参照してください。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• 他の表関連 HTML 要素: <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <tr>
• <thead> 要素のスタイル設定に役立つであろう CSS プロパティと擬似クラス:
  • :nth-child 擬似クラス: 列内のセルの配置を設定するため
  • text-align プロパティ: すべてのセル内コンテンツを '.' などの同一文字で揃えるための