<td>タグの解説
<td>は、テーブル（表）の内容を収めるセルを作成します。セルは行と列の組み合わせ構成される表の一つの単位です。この要素は、必ず<table>の中に配置された<tr>の子要素となります。
「td」とは「table data」の略語です。見出しとなるセルを作る場合は<th>を採用して下さい。<td>が取り扱うのは表の本体を構成する内容です。
原則としてひとつのセルで一つのデータを扱いますが、任意の箇所のセルを結合させることができます。詳細は、後半に示すcolspan属性とrowspan属性の解説を参照して下さい。
テーブルの作成は、以下の流れで行います。
- まず
<table>で表の作成を開始する - 必要であれば
<caption>を配置する - 列をグループ化する場合
<colgroup>を配置する - 列に対して一括で属性を指定する場合
<col>を配置する <tr>で表の行（横軸）を定義する- 見出しが必要であれば
<th>を配置する - 個別のデータを
<td>で作成する - 必要に応じて
<thead>を定義する - 必要に応じて
<tbody>を定義する - 必要に応じて
<tfoot>を定義する
<td>タグの特徴
- テーブルのセルを作成します。必ず
<tr>の中に配置しなければなりません。 - CSSの
displayは、既定値でtable-cellが適用されます。 - 視覚的な効果としてセルにボーダー（枠線）が付きます。結果としてセルの集合体であるテーブルは、格子状の表を映します。
- 同一のページ内に複数使うことができます。この要素の中にテーブルを入れ子にすることも許可されています。
<td>要素に指定できる属性
colspan- 列方向にセルを結合する数を指定します。規定値は
"1"で、1000までの整数を扱えます。 rowspan- 行方向にセルを結合する数を指定します。規定値は
"1"で、1000までの整数を扱えます。 headers- このセルを対象にしているヘッダーを明示します。
<th>のid属性が持つ値を空白区切りのリストで指定します。 align（非推奨）- セル内容の水平方向の表示位置を指定します。スタイルシートを使って下さい。
valign（非推奨）- セル内容の垂直方向に対する表示位置を指定します。スタイルシートを使って下さい。
width（非推奨）- テーブルセルの幅を指定します。スタイルシートを使って下さい。
height（非推奨）- テーブルセルの高さを指定します。スタイルシートを使って下さい。
border（非推奨）- 枠線（ボーダー）の太さを指定します。0を指定すると枠線が非表示になります。
bordercolor（非推奨）- 枠線（ボーダー）の色を指定します。スタイルシートを使って下さい。
bgcolor（非推奨）- 背景色を指定します。スタイルシートを使って下さい。
background（非推奨）- 背景画像を指定します。スタイルシートを使って下さい。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<td>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<td>は必ず<table>の中に配置された<tr>の子要素になります。一般的には、複数のセルを連続で配置して行に並ぶ列を表現します。
<table>
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
</table>
テーブルの行と列を増やして意味のある内容を作成していきましょう。まず始めに、見出しとなるセル行を用意し、それが指し示すデータ用のセルを作成します。
<table>
<tr>
<th>見出しA1</th>
<th>見出しB1</th>
<th>見出しC1</th>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
<td>セルC2</td>
</tr>
</table>
複数のセルを結合させる
セル同士の結合はcolspan属性およびrowspan属性で行います。起点となるセルが何個分のセルにまたがるのかを指定し、対象となるセルを必要な分だけ取り払います。数が合わなくなると表のレイアウトが崩れてしまうので気をつけましょう。
列方向にセルを結合させる場合はcolspan属性を使います。この値に指定した数の分だけ同じ行に属するセルを減らす必要があります。
<table>
<tr>
<td colspan="2">colspan</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>
行方向にセルを結合させる場合はrowspan属性を使います。この値に指定した数の分だけ他の行に属するセルを減らす必要があります。
<table>
<tr>
<td rowspan="2">rowspan</td>
<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>