tdタグ -table内でデータセルを作成する｜HTML辞典

<td>タグとは？

<td> タグは、HTML の <table>（表）内でデータセル（通常のセル）を作成するためのタグです。
<tr>（行）と組み合わせて使用し、表の各データを表示します。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）。

閉じタグの有無

<td> は 開始タグ（<td>）と閉じタグ（</td>）の両方が必要 です。

基本的な記述方法

<table>
    <tr>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>バナナ</td>
        <td>150円</td>
    </tr>
</table>

この記述により、3 行 × 2 列の表 が作成されます。

使用できる主な属性

属性名	説明	例
colspan	セルを 横方向に結合	<td colspan="2">
rowspan	セルを 縦方向に結合	<td rowspan="3">
headers	関連する <th> の id を指定（アクセシビリティ向上）	<td headers="price">100円</td>

colspan の使用例

<table>
    <tr>
        <th>商品名</th>
        <th colspan="2">価格情報</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>100円</td>
        <td>税込 110円</td>
    </tr>
</table>

✅ 2 列（「価格情報」）を結合しています。

rowspan の使用例

<table>
    <tr>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr>
        <td rowspan="2">バナナ</td>
        <td>150円</td>
    </tr>
    <tr>
        <td>税込 165円</td>
    </tr>
</table>

✅ 「バナナ」のセルが 2 行分結合されています。

CSSを使ったデザイン変更

デフォルトでは スタイルが適用されません が、CSS でデザインを変更できます。

td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

適切な使用例

✅ テーブルのデータセルを作成する

<table>
    <tr>
        <th>商品</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>みかん</td>
        <td>200円</td>
    </tr>
</table>

✅ colspan でセルを横方向に結合する

<table>
    <tr>
        <th colspan="2">商品情報</th>
    </tr>
    <tr>
        <td>バナナ</td>
        <td>150円</td>
    </tr>
</table>

✅ rowspan でセルを縦方向に結合する

<table>
    <tr>
        <th>商品</th>
        <th>価格</th>
    </tr>
    <tr>
        <td rowspan="2">りんご</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>税込 110円</td>
    </tr>
</table>

適切でない使用例（誤った使い方）

❌ <td> を <table> の外に記述する

<!-- NG: <table> の外に <td> を記述 -->
<td>データ</td>
<table>
    <tr>
        <td>りんご</td>
    </tr>
</table>

✅ 正しい書き方（<table> 内に記述）

<table>
    <tr>
        <td>りんご</td>
    </tr>
</table>

❌ <td> なしで直接データを書く

<!-- NG: <td> を省略 -->
<table>
    <tr>
        りんご
        100円
    </tr>
</table>

✅ 正しい書き方（<td> でデータを囲む）

<table>
    <tr>
        <td>りんご</td>
        <td>100円</td>
    </tr>
</table>

<td>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<td>	データセルを作成する	通常のデータ	数値やテキストの表示
<th>	見出しセルを作成する	デフォルトで太字＋中央寄せ	列名やカテゴリー名
<tr>	行を作成する	<td> や <th> を内包	表の行
<thead>	ヘッダーをグループ化	<tr> を含む	表の見出し行
<tbody>	データ部分をグループ化	<tr> を含む	メインのデータ行
<tfoot>	フッターをグループ化	<tr> を含む	合計や備考などの行

使用上の注意点

✅ <td> は <tr> 内で使用する

• <table> の外では無効になるため、必ず表の中で使用する。

✅ colspan や rowspan を使うと、より柔軟なレイアウトが可能

• ただし、適用ミスに注意する。

✅ <th>（見出しセル）との使い分けを意識する

• データのタイトルには <th> を使用し、通常のデータには <td> を使用する。

関連タグ

• <table> – 表を作成
• <caption> – 表のタイトルを指定
• <tr> – 行を作成
• <th> – 見出しセルを作成
• <thead> – ヘッダー部分をグループ化
• <tbody> – データ部分をグループ化
• <tfoot> – フッター部分をグループ化

まとめ

<td> タグは、HTML の 表のデータセルを作成するためのタグ です。
適切に使用することで、データの可読性が向上し、アクセシビリティや SEO にも貢献します。