<th>タグの解説
<th>は、テーブル（表）の見出しとなるヘッダーセルを作成します。この見出しが行と列のどちらの方向に対応しているのかは、scope属性で指定します。
「th」とは「table header」の略語です。通常のセルを作る場合は<td>を採用して下さい。表自体のタイトルを表す場合は<caption>要素を追加します。
テーブルの作成は、以下の流れで行います。
- まず
<table>で表の作成を開始する - 必要であれば
<caption>を配置する - 列をグループ化する場合
<colgroup>を配置する - 列に対して一括で属性を指定する場合
<col>を配置する <tr>で表の行（横軸）を定義する- 見出しが必要であれば
<th>を配置する - 個別のデータを
<td>で作成する - 必要に応じて
<thead>を定義する - 必要に応じて
<tbody>を定義する - 必要に応じて
<tfoot>を定義する
<th>タグの特徴
- テーブルの見出しに該当するセルを作成します。必ず
<tr>の中に配置しなければなりません。 - CSSの
displayは、既定値でtable-cellが適用されます。 - 視覚的な効果としてセルにボーダー（枠線）が付きます。結果としてセルの集合体であるテーブルは、格子状の表を映します。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<th>要素に指定できる属性
colspan- 列方向にセルを結合する数を指定します。規定値は
"1"で、1000までの整数を扱えます。 rowspan- 行方向にセルを結合する数を指定します。規定値は
"1"で、1000までの整数を扱えます。 scope- 見出しの対象となるセルを定義します。
auto：既定値です。省略した場合はこの値が採用されます。row：見出しは、同じ行に属するセルを対象にします。col：見出しは、同じ列に属するセルを対象にします。rowgroup：見出しは、行のグループに属するセルを対象にします。colgroup：見出しは、列のグループに属するセルを対象にします。
headers- このセルを対象にしているヘッダーを明示します。
<th>のid属性が持つ値を空白区切りのリストで指定します。 abbr- セルの内容に関する簡単な説明を指定します。スクリーンリーダーなどのユーザーエージェントが、内容の前にこの情報を利用することがあります。
align（非推奨）- セル内容の水平方向の表示位置を指定します。スタイルシートを使って下さい。
valign（非推奨）- セル内容の垂直方向に対する表示位置を指定します。スタイルシートを使って下さい。
width（非推奨）- テーブルセルの幅を指定します。スタイルシートを使って下さい。
height（非推奨）- テーブルセルの高さを指定します。スタイルシートを使って下さい。
border（非推奨）- 枠線（ボーダー）の太さを指定します。0を指定すると枠線が非表示になります。
bordercolor（非推奨）- 枠線（ボーダー）の色を指定します。スタイルシートを使って下さい。
bgcolor（非推奨）- 背景色を指定します。スタイルシートを使って下さい。
background（非推奨）- 背景画像を指定します。スタイルシートを使って下さい。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<th>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<th>は必ず<table>の中に配置された<tr>の子要素になります。一般的には、複数のセルを連続で配置して行に並ぶ列を表現します。
<table>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>
見出しが対象としているセルを明確にする
見出しの対象は、表の構造が間違っていない限りブラウザが自動的に判断してくれます。これを明確に指定するには、scope属性を追加します。この値が"col"であれば見出しは列に含まれるセルを対象にし、"row"であれば行に含まれるセルを対象にします。
// 列方向の見出しであることを表す
<table>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>
// 行方向の見出しであることを表す
<table>
<tr>
<th scope="row">見出し</th>
<td>セル</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>セル</td>
</tr>
</table>
行と列の見出しを使い分ける
表の一番最初の行を見出しにする場合は<tr>の中に複数の<th>が並びます。行の一番最初のセルを見出しにする場合は、<tr>の中に<th>と<td>が混在します。この違いを表したものが以下の内容です。上手く使い分けていきましょう。
<table>
<tr>
<th scope="col">見出しA1</th>
<th scope="col">見出しB1</th>
<th scope="col">見出しC1</th>
</tr>
<tr>
<th scope="row">見出しA2</th>
<td>セルB2</td>
<td>セルC2</td>
</tr>
<tr>
<th scope="row">見出しA3</th>
<td>セルB3</td>
<td>セルC3</td>
</tr>
</table>
複数のセルを結合させる
セル同士の結合はcolspan属性およびrowspan属性で行います。起点となるセルが何個分のセルにまたがるのかを指定し、対象となるセルを必要な分だけ取り払います。数が合わなくなると表のレイアウトが崩れてしまうので気をつけましょう。
列方向にセルを結合させる場合はcolspan属性を使います。この値に指定した数の分だけ同じ行に属するセルを減らす必要があります。
<table>
<tr>
<th colspan="2">colspan</th>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>
行方向にセルを結合させる場合はrowspan属性を使います。この値に指定した数の分だけ他の行に属するセルを減らす必要があります。
<table>
<tr>
<th rowspan="2">rowspan</th>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
</tr>
</table>
この二つの属性を使って意味のある表を作成してみましょう。以下の例では、行と列の見出しを結合して複数のセルを対象にしています。結合した分のセルはソースコードから削除するので、<tr>の子要素の数が異なる点に注目して下さい。
<table>
<tr>
<th scope="col">name</th>
<th scope="col" colspan="2">colspan</th>
<th scope="col" colspan="2">colspan</th>
</tr>
<tr>
<th scope="row" rowspan="2">rowspan</td>
<td>セル</td>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
</table>