<th> 表(テーブル)の見出しとなるセルを作成
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | <tr> |
子にできる要素 | フロー・コンテンツ。ただし、セクショニング・コンテンツ、ヘッディング・コンテンツを除く。 |
対応ブラウザ | caniuseで確認 |
<th>タグの説明
<th>
は、表(テーブル)の見出しとなるヘッダーセルを作成する場合に使用します。ヘッダーはデータの集合体である表の列あるいは行を代表する項目を表します。通常のセルを作る場合は、<td>
を採用して下さい。
テーブルの作成は、以下の流れで行います。
<th>タグの特徴
- テーブルの見出しに該当するセルを作成します。必ず
<tr>
の中に配置しなければなりません。 - CSSの
display
は、既定値でtable-cell
が適用されます。 - 視覚的な効果としてセルにボーダー(枠線)が付きます。結果としてセルの集合体であるテーブルは、格子状の表を映します。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<th>に指定できる主な属性
- abbr
- セルの内容に関する簡単な説明を指定できます。
- colspan
- 表を構成するセルの横何行個分に相当するのかを整数で指定します。
- rowspan
- 表を構成するセルの縦何列個分に相当するのかを整数で指定します。
- scope
- 見出しの対象となるセルを定義します。
auto
:既定値です。省略した場合はこの値が採用されます。row
:見出しは、同じ行に属するセルを対象にします。col
:見出しは、同じ列に属するセルを対象にします。rowgroup
:見出しは、行のグループに属するセルを対象にします。colgroup
:見出しは、列のグループに属するセルを対象にします。
- headers
- このセルに当てはめる
<th>
のid
属性を指定します。 - align(非推奨)
- セル内容の水平方向の表示位置を指定します。スタイルシートを使って下さい。
- valign(非推奨)
- セル内容の垂直方向に対する表示位置を指定します。スタイルシートを使って下さい。
- width(非推奨)
- テーブルセルの幅を指定します。スタイルシートを使って下さい。
- height(非推奨)
- テーブルセルの高さを指定します。スタイルシートを使って下さい。
- border(非推奨)
- 枠線(ボーダー)の太さを指定します。0を指定すると枠線が非表示になります。
- bordercolor(非推奨)
- 枠線(ボーダー)の色を指定します。スタイルシートを使って下さい。
- bgcolor(非推奨)
- 背景色を指定します。スタイルシートを使って下さい。
- background(非推奨)
- 背景画像を指定します。スタイルシートを使って下さい。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<th>の使い方とサンプル
<th>
を使う場合の最も基本的な例です。以下の例では、見出しの方向を明示せずにブラウザの自動的な解釈に任せます。この場合、scope
属性の値はauto
の扱いになります。
表示確認
HTML
<table>
<caption>列に対する見出し</caption>
<tr>
<th>項目A</th>
<th>項目B</th>
<th>項目C</th>
</tr>
<tr>
<td>A-1</td>
<td>B-1</td>
<td>C-1</td>
</tr>
<tr>
<td>A-2</td>
<td>B-2</td>
<td>C-2</td>
</tr>
</table>
列方向の見出しであることを明示する
続いて、見出しに対応するセルの方向を明確にする方法です。scope
属性の値にcol
を指定すると、その見出しは列方向つまり垂直に並ぶセルの見出しを表すことになります。
表示確認
HTML
<table>
<caption>列に対する見出し</caption>
<tr>
<th scope="col">項目A</th>
<th scope="col">項目B</th>
<th scope="col">項目C</th>
</tr>
<tr>
<td>A-1</td>
<td>B-1</td>
<td>C-1</td>
</tr>
<tr>
<td>A-2</td>
<td>B-2</td>
<td>C-2</td>
</tr>
</table>
行方向の見出しであることを明示する
次の内容では、行方向つまり水平に並ぶセルに対して見出しを与えています。この場合、<th>
と<td>
の配置が変化する点に注意して下さい。
表示確認
HTML
<table>
<caption>行に対する見出し</caption>
<tr>
<th scope="row">項目A</th>
<td>A-1</td>
<td>A-2</td>
</tr>
<tr>
<th scope="row">項目B</th>
<td>B-1</td>
<td>B-2</td>
</tr>
<tr>
<th scope="row">項目C</th>
<td>C-1</td>
<td>C-2</td>
</tr>
</table>
複数のセルを結合する方法
複数のセルを結合する場合は、colspan
属性やrowspan
属性を使います。この値に指定した整数が結合するセルの数を表します。セルを結合する場合、その後に続くセルの数を合わせる必要があります。
以下の例では、セルを結合した箇所が分かるように背景色を変えています。加えて、除外したセルの箇所が分かるようにコメントを添えています。
表示確認
HTML
<table>
<tr>
<th>項目</th>
<th colspan="2">内容</th>
<!-- 結合した分のセルを減らす -->
</tr>
<tr>
<td>セルA1</td>
<td>セルB1</td>
<td>セルC1</td>
</tr>
<tr>
<td rowspan="2">セルA2</td>
<td>セルB2</td>
<td>セルC2</td>
</tr>
<tr>
<!-- 結合した分のセルを減らす -->
<td>セルB3</td>
<td>セルC3</td>
</tr>
</table>