HTMLの<td>タグを使うと、表(テーブル)にセル(table data)を挿入することができます。このページではtd要素の使い方をご紹介ます。
<td>
<!-- flow content -->
</td>
HTMLでは終了タグを省略できます。XHTMLでは省略できません。 開始タグと終了タグの間にはブロック要素またはインライン要素が任意回数表れます。 TR要素タイプの内容モデルで、<tr> と </tr> の間に1回以上現れます。
次に示す属性を td 要素に指定できる。
<table>
<tbody>
<tr>
<td style="border: 1px solid gray">first</td>
<td style="border: 1px solid gray">second</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid gray">third</td>
</tr>
</tbody>
</table>
first | second |
third |
<table>
<tbody>
<tr>
<td style="border: 1px solid gray">first</td>
<td rowspan="2" style="border: 1px solid gray">second</td>
</tr>
<tr>
<td style="border: 1px solid gray">third</td>
</tr>
</tbody>
</table>
first | second |
third |
td 要素の開始タグと終了タグの間にフロー・コンテンツを含めることができる。
td要素の終了タグは、td要素の直後にtdまたはth要素が続く場合、または親要素にそれ以上内容がない場合に省略することができる。
<tr>
<td>first
<td>second
<td>third
</tr>
<table>
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black;">0001</td>
<td style="border: 1px solid black;">みずほ銀行</td>
</tr>
<tr>
<td style="border: 1px solid black;">9900</td>
<td style="border: 1px solid black;">ゆうちょ銀行</td>
</tr>
</tbody>
</table>
上記のHTMLはウェブブラウザで下記のように表示される。
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
Web Hypertext Application Technology Working Group (2022) "Tabular data" HTML Living Standard