<td> 表(テーブル)のセルを作成する

取り扱い 現行の標準
カテゴリ セクショニング・ルート
親にできる要素 <tr>
子にできる要素 フロー・コンテンツ
対応ブラウザ caniuseで確認

<td>タグの説明

<td>は、表(テーブル)のセルを作成する場合に使用します。見出しとなるセルを作る場合は、<th>を採用して下さい。テーブル全体に関する解説は<table>の方を参照して下さい。

セルは基本的に格子状に並びますが、任意のセルを結合させることができます。詳細は、サンプルの後半でcolspan属性とrowspan属性について解説します。

テーブルの作成は、以下の流れで行います。

  1. まず<table>で表の作成を開始
  2. 必要であれば<caption>を配置
  3. <tr>で表の行(横軸)を定義
  4. 見出しのセルが必要な場合は<th>を配置
  5. <td>でセルとデータを作成
  6. 必要に応じて<thead>を配置
  7. 必要に応じて<tbody>を配置
  8. 必要に応じて<tfoot>を配置
  9. 列をグループ化する場合<colgroup>を配置
  10. 列に対して一括で属性を指定する場合<col>を配置

<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>

<td>に関連するHTMLタグ

表(テーブル)を作成する要素
<table> 表(テーブル)を作成する
<caption> 表(テーブル)にキャプションを付ける
<col> 表(テーブル)の縦列の属性をまとめて指定する
<colgroup> 表(テーブル)の縦列をグループ化する
<tr> 表(テーブル)の横一行を定義する
<th> 表(テーブル)の見出しとなるセルを作成する
<td> 表(テーブル)のセルを作成する
<thead> 表(テーブル)のヘッダー行を定義する
<tbody> 表(テーブル)の本体部分を定義する
<tfoot> 表(テーブル)のフッター行を定義する