<td> 表(テーブル)のセルを作成する
取り扱い | 現行の標準 |
カテゴリ |
セクショニング・ルート |
親にできる要素 | <tr> |
子にできる要素 | フロー・コンテンツ |
対応ブラウザ | caniuseで確認 |
<td>タグの説明
<td>
は、表(テーブル)のセルを作成する場合に使用します。見出しとなるセルを作る場合は、<th>
を採用して下さい。テーブル全体に関する解説は<table>
の方を参照して下さい。
セルは基本的に格子状に並びますが、任意のセルを結合させることができます。詳細は、サンプルの後半でcolspan
属性とrowspan
属性について解説します。
テーブルの作成は、以下の流れで行います。
<td>タグの特徴
- テーブルのセルを作成します。必ず
<tr>
の中に配置しなければなりません。 - CSSの
display
は、既定値でtable-cell
が適用されます。 - 視覚的な効果としてセルにボーダー(枠線)が付きます。結果としてセルの集合体であるテーブルは、格子状の表を映します。
- 同一のページ内に複数使うことができます。この要素の中にテーブルを入れ子にすることも許可されています。
<td>に指定できる主な属性
- colspan
- 表を構成するセルの横何行個分に相当するのかを整数で指定します。
- rowspan
- 表を構成するセルの縦何列個分に相当するのかを整数で指定します。
- headers
- このセルに当てはめる
<th>
のid
属性を指定します。 - align(非推奨)
- セル内容の水平方向の表示位置を指定します。スタイルシートを使って下さい。
- valign(非推奨)
- セル内容の垂直方向に対する表示位置を指定します。スタイルシートを使って下さい。
- width(非推奨)
- テーブルセルの幅を指定します。スタイルシートを使って下さい。
- height(非推奨)
- テーブルセルの高さを指定します。スタイルシートを使って下さい。
- border(非推奨)
- 枠線(ボーダー)の太さを指定します。0を指定すると枠線が非表示になります。
- bordercolor(非推奨)
- 枠線(ボーダー)の色を指定します。スタイルシートを使って下さい。
- bgcolor(非推奨)
- 背景色を指定します。スタイルシートを使って下さい。
- background(非推奨)
- 背景画像を指定します。スタイルシートを使って下さい。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<td>の使い方とサンプル
<td>
を使ってテーブルを作成する場合、最も基本的な構造は以下のようになります。最初のうちはシンプルな表を作成して慣れていきましょう。
表示確認
HTML
<table>
<tr>
<th>項目1</th>
<th>項目2</th>
</tr>
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
</tr>
</table>
表が完成したら、CSS(スタイルシート)で見栄えを整えましょう。以下に示すのは一つの参考例です。HTMLの記述を変えなくても、CSSで見た目を自由に変更できます。
表示確認
複数のセルを結合する方法
複数のセルを結合する場合は、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>