【HTML】thタグでテーブルにヘッダーセルを定義する

このページについて

このページではHTMLのthタグについての使い方を解説しています。

tableタグを生成することができるページを公開しました。まだ色々と機能不足で基礎的なコードしか生成できませんが、今後もちまちま更新予定です。

thタグはtableタグの中で使う、ヘッダーセルを定義するタグとなります。ヘッダーセルとは、簡単に言えば見出しとか種類の名前を書いたりとか、そういう大きな分類を示す時に使用されます。

thタグはtdタグと同様に、tableの中のtrの中で使います。

<table>
<tr><th>ヘッダー1</th><th>ヘッダー2</th></tr>
<tr><td>項目1</td><td>項目2</td></tr>
</table>

このように書いた場合、以下のような2*2のシンプルなテーブルが出来上がります。thで囲んだ部分がヘッダーセルとなり、デフォルトで文字が中央揃えの太字になります。

ヘッダー1	ヘッダー2
項目1	項目2

thは縦に書いて使用することもできます。

<table>
<tr><th>ヘッダー1</th><td>項目1</td></tr>
<tr><th>ヘッダー2</th><td>項目2</td></tr>
</table>

これの場合は縦2つがそれぞれヘッダーセルになります。縦軸と横軸での表を作成する時に便利です。

ヘッダー1	項目1
ヘッダー2	項目2

thタグで使える属性は基本的にtdタグと似ていますが、こちらの方が若干多いです。

abbr	ヘッダーセルの短縮形を定義します
colspan	セルを横軸に結合します
headers	ヘッダーセルと関連付けます
rowspan	セルを縦に結合します
scope	ヘッダーセルが列や行、もしくは列グループや行グループのヘッダーかどうかを指定する

thに対して横方向へ2つ統合したヘッダーセルを作成する場合は以下

<table>
<tr><th colspan="2">ヘッダー</th></tr>
<tr><td>1</td><td>2</td></tr>
</table>

こんな感じで統合することが多いです。その他の詳しいことや細かいことはそれぞれのページを参照してください。