<table>タグの解説
<table>は、行と列の組み合わせによって構成されたセルのデータを扱うテーブル（表）を作成します。エクセル（Microsoft Excel）などの表計算ソフト（Spreadsheet）でお馴染みの、マトリックス状のインターフェイスを持ちます。
<table>を扱う場面として相応しいのは、行と列の二次元で表せるデータの集合です。例えば、縦軸の列にカテゴリーを並べ、横軸の行で時間の経過を表す場合などです。それぞれのデータは個別のセルに収まっており、列と行が交差する場所に意味を持たせることができます。
逆に、レイアウト目的や例外が生じてしまうようなコンテンツには適していません。レイアウトを行う目的で便利な箱を用意したいのであれば、CSS（スタイルシート）のフレックス・ボックスやグリッド・レイアウトを活用しましょう。
<table>は独自の階層構造を持っているため、マークアップの腕を鍛えるのに適した材料と言えます。「その情報を扱う上でテーブルは正か否か」を考えることも、正しい文章構造を理解する上で重要な視点となります。
テーブルの作成は、以下の流れで行います。
- まず
<table>で表の作成を開始する - 必要であれば
<caption>を配置する - 列をグループ化する場合
<colgroup>を配置する - 列に対して一括で属性を指定する場合
<col>を配置する <tr>で表の行（横軸）を定義する- 見出しが必要であれば
<th>を配置する - 個別のデータを
<td>で作成する - 必要に応じて
<thead>を定義する - 必要に応じて
<tbody>を定義する - 必要に応じて
<tfoot>を定義する
<table>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- CSSの
displayは、既定値でtableが適用されます。 - 視覚的な効果としてセルにボーダー（枠線）が付きます。結果としてセルの集合体であるテーブルは、格子状の表を映します。
- 同一のページ内に複数使うことができます。この要素自体を入れ子にすることはできませんが、
<td>の中に配置することは許可されているので、入れ子状のテーブルを組むことも可能です。
<table>要素に指定できる属性
width（非推奨）- テーブル全体の幅を指定します。スタイルシートを使って下さい。
height（非推奨）- テーブル全体の高さを指定します。スタイルシートを使って下さい。
align（非推奨）- テーブルの表示位置を指定します。スタイルシートを使って下さい。
border（非推奨）- ボーダー（枠線）の太さを指定します。0を指定すると枠線が非表示になります。
bordercolor（非推奨）- ボーダー（枠線）の色を指定します。スタイルシートを使って下さい。
bgcolor（非推奨）- 背景色を指定します。スタイルシートを使って下さい。
background（非推奨）- 背景画像を指定します。スタイルシートを使って下さい。
cellspacing（非推奨）- セルとセルの間隔を指定します。スタイルシートを使って下さい。
cellpadding（非推奨）- セルの中の間隔を指定します。スタイルシートを使って下さい。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<table>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。一般的に<table>は複数の行と列を持つため、それらを作成するタグが子要素にいくつも配置されることになります。
<table>
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
</table>
これでは特に意味のない表になってしまうので、構造的に意味のある<table>を作成していきましょう。まず始めに、見出しとなるセル行を用意し、それが指し示すデータ用のセルを作成します。
<table>
<tr>
<th>見出しA1</th>
<th>見出しB1</th>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
</tr>
</table>
行や列は必要な分だけ追加できます。<tr>の中に配置する<td>の数を増やすと行に並ぶセルの数が増え、<tr>の数を増やすと新たな行が加されます。
<table>
<tr>
<th>見出しA1</th>
<th>見出しB1</th>
<th>見出しC1</th>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
<td>セルC2</td>
</tr>
<tr>
<td>セルA3</td>
<td>セルB3</td>
<td>セルC3</td>
</tr>
</table>
行方向の見出しを指定する
テーブルの見出しは行方向に対して配置することもできます。その際、見出しが行と列のどちらの方向を対象としているのか<th>のscope属性を使って明示します。この値が"col"であれば見出しは同じ列に属する全てのセルを対象としていることを表し、"row"であれば同じ行に属する全てのセルを対象としていることを表します。
<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>
キャプションを追加する
表に見出しや説明文を加える場合は、<table>の一番最初の子要素に<caption>を配置します。キャプションの表示位置はスタイルシートのcaption-sideプロパティで指定できます。
<table>
<caption>テーブルの内容を示す見出し</caption>
<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>
列をグループ化する
テーブルの列をグループ化する場合は、<colgroup>と<col>を使用します。列に含まれるデータが隣り合う列と関連する場合に、それを明示できます。以下の例は、それに加えてclass属性の値を使って列に幅と背景色を適用しています。
<table>
<colgroup>
<col class="name" />
<col span="2" class="talent" />
<col span="2" class="skill" />
</colgroup>
<tr>
<th scope="col">名前</th>
<th scope="col">素質１</th>
<th scope="col">素質２</th>
<th scope="col">スキル1</th>
<th scope="col">スキル2</th>
</tr>
<tr>
<th scope="row">ファイター</th>
<td>攻撃力+15%</td>
<td>回避値+15%</td>
<td>三連撃</td>
<td>会心の一撃</td>
</tr>
<tr>
<th scope="row">タンク</th>
<td>防御力+15%</td>
<td>体力+20%</td>
<td>反射ガード</td>
<td>食いしばり</td>
</tr>
</table>
セルを結合させる
セル同士を結合させるには、起点となる<th>または<td>に結合する数を指定し、対象となるセルを必要な分だけ取り払います。列の結合はcolspan属性で指定し、行の結合はrowspan属性で指定します。
以下の例では、行と列の見出しを結合して複数のセルを対象にしています。結合した分のセルはソースコードから削除するので、<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>
表にヘッダー行とフッター行を加えて構造を明確にする
表にヘッダーやフッターを加えて、それぞれの行の持つ意味を明確にすることができます。表のヘッダーは<thead>で定義し、表のフッターは<tfoot>で定義します。表の本体を表す<tbody>は、それ以外の範囲が該当します。
<table>
<thead>
<tr>
<th scope="col">項目１</th>
<th scope="col">項目２</th>
<th scope="col">項目３</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">フッターセル</td>
</tr>
</tfoot>
</table>
終了タグを省略する
<tr>や<td>は文法の規則を守っている限り終了タグを省略できます。原則としては終了タグを必ず閉じる方針を推奨します。開発環境が第三者にも影響を及ぼす場合は、事前にマークアップの規則を統一しましょう。
<table>
<tr>
<th>項目１
<th>項目２
<th>項目３
<tr>
<td>セルA1
<td>セルB1
<td>セルC1
<tr>
<td>セルA2
<td>セルB2
<td>セルC2
</table>