HTML <td> タグ

定義と使用法

<td> タグはHTMLテーブル内の標準データセルを定義します。

HTMLテーブルには2種類のセルがあります：

  • ヘッダーセル - タイトル情報を含む（ <th> 要素の作成（
  • データセル - データを含む（ <td> 要素の作成（

デフォルトでは、<td> 要素内のテキストは通常で左寄せです。

<th>要素内のテキストはデフォルトで太字で中央に配置されます。

参照もどうぞ：

HTMLチュートリアル：HTML テーブル

HTML DOM リファレンスマニュアル：TableData オブジェクト

CSSチュートリアル：テーブルのスタイルを設定する

インスタンス

例 1

シンプルなHTMLテーブルで、2行と4つのテーブルセルがあります：

<table>
  <tr>
    <td>セル A</td>
    <td>セル B</td>
  </tr>
  <tr>
    <td>セル C</td>
    <td>セル D</td>
  </tr>
</table>

自分で試してみる

例 2

どのように並べるか <td> の内容を垂直に整列する方法（CSSを使用）：

<table style="width:100%">
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

自分で試してみる

例 3

テーブルのセルに背景色を追加する方法（CSSを使用して）：

<table>
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">1月</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

自分で試してみる

例 4

テーブルセルの高さを設定する方法（CSSを使用）：

<table>
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td style="height:100px">1月</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

自分で試してみる

例 5

テーブルセル内で改行を防ぐ方法（CSSを使用）：

<table>
  <tr>
    <th>詩</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">朝辞白帝彩雲間、千里江陵一日還。两岸猿声啼不住、軽舟已過万重山。</td>
  </tr>
</table>

自分で試してみる

例 6

垂直整列方法： <td> の内容を垂直に整列する方法（CSSを使用）：

<table style="width:50%;">
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">1月</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

自分で試してみる

例 7

テーブルセルの幅を設定する方法（CSSを使用）：

<table style="width:100%">
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td style="width:70%">1月</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

自分で試してみる

例 8

テーブルのタイトルの作成方法：

<table>
  <tr>
    <th>名前</th>
    <th>電子メール</th>
    <th>電話</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

自分で試してみる

例 9

タイトル付きテーブルの作成方法：

<table>
  <caption>月別貯金</caption>
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>

自分で試してみる

例 10

行間や列間をまたぐテーブルセルの定義方法：

<table>
  <tr>
    <th>名前</th>
    <th>電子メール</th>
    <th colspan="2">電話</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

自分で試してみる

属性

属性 値 説明
colspan 数字 セルが跨る列数を設定します。
headers header_id セルに関連するタイトルセルを指定します。
rowspan 数字 セルが跨る行数を設定します。

グローバル属性

<td> タグは以下のイベント属性をサポートしています HTMLのグローバル属性。

イベント属性

<td> タグは以下のイベント属性をサポートしています HTMLのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <td> 要素：

td {
  display: table-cell;
  vertical-align: inherit;
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート