＜td要素＞ - テーブルのセル
公開日:
td要素は、テーブルのセル(項目)を表す要素です。tr要素のこ要素として配置することができます。
概要
- 名前
- td (Table data cell)
- カテゴリー
- Sectioning content
- 配置できる場所
- tr要素の子要素として配置すること。
- コンテンツモデル
- Flow content。
- タグの省略
- 別のtd要素、またはth要素が後に続く場合、終了タグを省略できる。
- または、親要素にこれ以上コンテンツがない場合、終了タグを省略できる。
- DOM Interface
- HTMLTableCellElement
- デフォルトのスタイル
td { display: table-cell; vertical-align: inherit; }- 仕様書
- https://html.spec.whatwg.org/multipage/tables.html#the-td-element
属性
colspan
またがる列の数。
rowspan
またがる行の数。
headers
このセルを関連付けるヘッダーセルを、ヘッダーセルのidで指定する。複数ある場合は半角スペース( )で区切る。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
基本的な使い方
td要素は、テーブルのセルを表す要素です。セルとは項目のことです。セルがまとまって行(tr要素)ができます。行がまとまって、テーブルができます。
HTML
<table>
<!-- 1つ目の行 (セルをまとめる) -->
<tr>
<!-- 3個のセル -->
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<!-- 2つ目の行 (セルをまとめる) -->
<tr>
<!-- 3個のセル -->
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
</tr>
<!-- 3つ目の行 (セルをまとめる) -->
<tr>
<!-- 3個のセル -->
<td>GGG</td>
<td>HHH</td>
<td>III</td>
</tr>
</table>列をまたがる
colspan属性に数値を指定すると、その数だけ後の列にまたがることができます。またがった数だけ、後続のセルを省略しましょう。
HTML
<table>
<!-- 1つ目の行 -->
<tr>
<!-- 3個分のセル -->
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<!-- 2つ目の行 -->
<tr>
<!-- 3個分のセル -->
<td colspan="2">DDD</td>
<td>FFF</td>
</tr>
<!-- 3つ目の行 -->
<tr>
<!-- 3個分のセル -->
<td>GGG</td>
<td colspan="2">HHH</td>
</tr>
</table>行をまたがる
rowspan属性に数値を指定すると、その数だけ後の行にまたがることができます。またがった数だけ、後続の行にあるセルを省略しましょう。
HTML
<table>
<!-- 1つ目の行 -->
<tr>
<!-- 3個分のセル -->
<td>AAA</td>
<td rowspan="3">BBB</td>
<td>CCC</td>
</tr>
<!-- 2つ目の行 -->
<tr>
<!-- 3個分のセル -->
<td>DDD</td>
<td>FFF</td>
</tr>
<!-- 3つ目の行 -->
<tr>
<!-- 3個分のセル -->
<td>GGG</td>
<td>III</td>
</tr>
</table>headers属性とは？
headers属性にth要素のidを指定すると、このセルが、対象のヘッダーセルに対応したセルであることを示せます。複数指定するには半角スペース( )で区切ります。表示には影響がありません。コードを解釈するユーザーエージェント向けの属性です。表が複雑な構造になった時に指定すればよく、通常は必要ありません。
HTML
<table>
<tr>
<th>ID</th>
<th id="name">名前</th>
<th>色</th>
<th>種類</th>
</tr>
<tr>
<th id="id-1">1</th>
<td headers="name id-1">リンゴ</td>
<td headers="id-1">赤</td>
<td headers="id-1">果物</td>
</tr>
<tr>
<th id="id-2">2</th>
<td headers="name id-2">キャベツ</td>
<td headers="id-1">緑</td>
<td headers="id-1">野菜</td>
</tr>
</table>サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜td要素＞ - テーブルのセル</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/td/">
<style>
body {
background-color: #fff ;
}
table, th, td {
border: 1px solid #000 ;
}
</style>
</head>
<body>
<p>td要素は、テーブルのセルを表す要素です。各項目をマークアップして、tr要素でまとめましょう。</p>
<table>
<!-- 1つ目の行 (セルをまとめる) -->
<tr>
<!-- 3個のセル -->
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<!-- 2つ目の行 (セルをまとめる) -->
<tr>
<!-- 3個のセル -->
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
</tr>
<!-- 3つ目の行 (セルをまとめる) -->
<tr>
<!-- 3個のセル -->
<td>GGG</td>
<td>HHH</td>
<td>III</td>
</tr>
</table>
</body>
</html>