HTML <th>タグ
例
2つのヘッダーセルと2つのデータセルを持つ単純なHTMLテーブル:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
試してみる »
(その他の例はページ下部を参照)
ブラウザサポート
![]()
![]()
![]()
![]()
![]()
すべての主要ブラウザは <th> タグをサポートしています。
タグの定義と使用説明
<th> タグはHTMLテーブル内のヘッダーセルを定義します。
HTMLテーブルには2種類のセルタイプがあります:
- ヘッダーセル - ヘッダー情報を含む(<th> 要素で作成)
- 標準セル - データを含む(<td>要素で作成)
<th> 要素内のテキストは通常、太字で中央揃えで表示されます。
<td> 要素内のテキストは通常、標準の左揃えテキストです。
ヒントと注釈
ヒント:コンテンツを複数の行や列にまたがらせる場合は、colspan 属性と rowspan 属性を使用してください!
HTML 4.01 と HTML5 の違い
HTML 5 では、HTML 4.01 の一部の属性はサポートされなくなりました。
属性
| 属性 | 值 | 説明 |
|---|---|---|
| abbr | text | HTML5 ではサポートされていません。ヘッダーセル内のコンテンツの省略バージョンを指定します。 |
| align | left right center justify char |
HTML5 ではサポートされていません。ヘッダーセルコンテンツの水平方向の配置を指定します。 |
| axis | category_name | HTML5 ではサポートされていません。ヘッダーセルを分類します。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
HTML5 ではサポートされていません。HTML 4.01 では非推奨です。ヘッダーセルの背景色を指定します。 |
| char | character | HTML5 ではサポートされていません。どの文字に基づいてコンテンツを配置するかを指定します。 |
| charoff | number | HTML5 ではサポートされていません。配置文字のオフセットを指定します。 |
| colspan | number | ヘッダーセルがまたがる列数を指定します。 |
| headers | header_id | ヘッダーセルに関連付けられた1つ以上のヘッダーセルを指定します。 |
| height | pixels % |
HTML5 ではサポートされていません。HTML 4.01 では非推奨です。ヘッダーセルの高さを指定します。 |
| nowrap | nowrap | HTML5 ではサポートされていません。HTML 4.01 では非推奨です。ヘッダーセル内のコンテンツを折り返すかどうかを指定します。 |
| rowspan | number | ヘッダーセルが縦にまたがる行数を指定します。 |
| scope | col colgroup row rowgroup |
ヘッダーセルが行、列、行グループ、または列グループのヘッダーであるかどうかを指定します。 |
| valign | top middle bottom baseline |
HTML5 ではサポートされていません。ヘッダーセルコンテンツの垂直方向の配置を指定します。 |
| width | pixels % |
HTML5 ではサポートされていません。HTML 4.01 では非推奨です。ヘッダーセルの幅を指定します。 |
グローバル属性
<th> タグはHTML のグローバル属性をサポートしています。
イベント属性
<th> タグはすべてのHTML のイベント属性をサポートしています。
試してみる - 例
この例では、テーブルの見出しを表示する方法を示します。
この例では、" " を使用してコンテンツのないセルを処理する方法を示します。
この例では、キャプション付きのテーブルを示します。
この例では、他の要素内で要素を表示する方法を示します。
この例では、行または列にまたがるテーブルセルを定義する方法を示します。
関連記事
HTML チュートリアル:HTML テーブル
HTML DOM リファレンス:Th オブジェクト
その他の拡張