td 要素 | HTML要素リファレンス | リファレンス

td要素とは

<td>要素は、table（テーブル） data（データ） cell（セル）の略で、表の内容セルを表す要素です。

意味・役割: 表（テーブル）の内容セルを表す要素
利用できるバージョン（HTML4.01以降）: 全てのバージョン
コンテンツ・カテゴリ: なし
（HTML5より前：なし）
コンテンツ・モデル（梱包できる要素）: フロー・コンテンツ
（HTML5より前：ブロックレベル要素、インライン要素）
この要素を配置できる親要素: <tr>要素

td要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

colspan属性

colspan（コルスパン）属性は、column（カラム） span（スパン）の略で、列（横方向）の結合を指定する属性です。属性値には結合するセルの数を指定します。初期値は "1" で、"0" を指定すると、そのセルより右側全てのセルを結合します。

<td colspan="結合するセルの数">

属性値: 結合するセルの数（初期値： "1"）
利用できるバージョン（HTML4.01以降）: 全てのバージョン

使用例

<td colspan="2">

rowspan属性

rowspan（ロウスパン）属性は、行（縦方向）の結合を指定する属性です。属性値には結合するセルの数を指定します。初期値は "1" で、"0" を指定すると、そのセルより下側全てのセルを結合します。

<td rowspan="結合するセルの数">

属性値: 結合するセルの数（初期値： "1"）
利用できるバージョン（HTML4.01以降）: 全てのバージョン

使用例

<td rowspan="2">

headers属性

headers（ヘッダーズ）属性は、このセルの見出しセルを指定する属性です。属性値には見出しセルになる<th>にid属性を指定し、その値を記述します。複数ある場合は、半角スペースで区切ることで複数指定できます。

<td headers="見出しセルのid名">

属性値: 見出しセルのid名（複数指定する場合は半角スペースで区切る）
利用できるバージョン（HTML4.01以降）: 全てのバージョン

使用例

<td headers="code-name">

scope属性 HTML5で廃止

scope（スコープ）属性は、この見出しセルがどの内容セルの見出しかを指定する属性です。属性値には、"row" （行）や "col" （列）などのキーワードで指定します。

<td scope="どの内容セルの見出しセルか">

属性値

"row"：同じ行の後続する一部のセルに対する見出し
"col"：同じ列の後続する一部のセルに対する見出し
"rowgroup"：同じ行の後続する全てのセルに対する見出し
"colgroup"：同じ列の後続する全てのセルに対する見出し
"auto"：自動（初期値）

利用できるバージョン（HTML4.01以降）

HTML4.01、XHTML1.0, XHTML1.1

使用例

<td scope="rowgroup">

abbr属性 HTML5で廃止

abbr（アバー）属性は、abbreviation（アブリビエイション）の略で、セルの略語を指定する属性です。この属性を指定することで、視覚的にWEBサイトの情報を伝達するのが困難な場合（音声ソフトなどを利用しているなど）に、セルの内容を省略形で表現する（読み上げる）サポートを行います。なお、この属性はHTML5で廃止になりました。

<td abbr="見出しセルの略語">

属性値: 見出しセルの略語
利用できるバージョン（HTML4.01以降）: HTML4.01、XHTML1.0, XHTML1.1

使用例

<td abbr="EXP">獲得経験値（EXP）</th>

axis属性 HTML5で廃止

axis（アクシス）属性は、複雑な構造の表（テーブル）の場合において、セルの内容を示す分類名を指定する属性です。分類名は、"," （半角カンマ）で区切ることで複数指定できます。ただし、このaxis属性を指定する場合は、headers属性、またはscope属性を使って、各セルを関連付ける必要があります。なお、この属性はHTML5で廃止になりました。

<td axis="分類名" scope="どの内容セルに対しての見出しセルか">

属性値: 分類名
利用できるバージョン（HTML4.01以降）: HTML4.01、XHTML1.0, XHTML1.1

使用例

<td axis="product" headers="code-name">

width属性 XHTML1.1で廃止

width（ウィズ）属性は、セルの幅を指定する属性です。この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:width プロパティで行うようにしましょう。

<td width="セルの幅" >

属性値

整数：画像の横幅（px）
パーセンテージ：画像の割合

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

使用例

<td width="400">

height属性 XHTML1.1で廃止

height（ハイト）属性は、セルの高さを指定する属性です。この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:height プロパティで行うようにしましょう。

<td height="セルの高さ" >

属性値

整数：画像の横幅（px）
パーセンテージ：画像の割合

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

使用例

<td height="40">

nowrap属性 XHTML1.1で廃止

nowrap（ノーラップ）属性は、セル内テキストの折り返しを禁止する属性です。この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:white-space プロパティで行うようにしましょう。

<td nowrap="nowrap" >

属性値: "nowrap"：セル内でテキストの折り返しを禁止する
利用できるバージョン（HTML4.01以降）: HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

使用例

<td nowrap="nowrap">

align属性 XHTML1.1で廃止

align（アライン）属性は、行内のセルに対してテキストの揃え方を指定する属性です。この属性を指定しない場合、一般的なブラウザの<td>要素の初期値は、"left" になります。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:text-align プロパティで行うようにしましょう。

<td align="テキスト揃え方">

属性値

"left"：左揃え
"center"：中央揃え
"right"：右揃え
"justify"：両端揃え（均等配置）
"char"： char属性で指定した文字で揃える

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

使用例

<td align="center">

valign属性 XHTML1.1で廃止

valign（ブイアライン）属性は、vertical（バーティカル） align（アライン）の略で、行内の垂直方向の揃え方を指定する属性です。一般的なブラウザの初期値は、"middle" になります。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:vertical-align プロパティで行うようにしましょう。

<td valign="垂直方向の揃え方">

属性値

"top"：上揃え
"middle"：中央揃え
"bottom"：下揃え
"baseline"：ベースラインで揃える（1行目のみ）

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

使用例

<td valign="top">

char属性 XHTML1.1で廃止

char（キャラ）属性は、character（キャラクター）の略で、align属性で、"char" を指定した際、テキストを揃える文字を指定する属性です。基本的には、小数点などを揃える為に使用する為、 "." （ピリオド）を指定します。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSS3の:text-align プロパティで char の指定で行うようにしましょう。

<td char="テキストを揃える文字" align="char">

属性値: テキストを揃える文字
利用できるバージョン（HTML4.01以降）: HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

使用例

<td char="." align="char">

charoff属性 XHTML1.1で廃止

charoff（キャラオフ）属性は、character（キャラクター） offset（オフセット）の略で、 char属性が指定された場合において、その文字のオフセット（ずらす量）を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。

<td charoff="オフセットする文字数" char="テキストを揃える文字" align="char">

属性値

整数：画像の横幅（px）
パーセンテージ：画像の割合

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

使用例

<td align="char" char="." charoff="40">

bgcolor属性 XHTML1.1で廃止

bgcolor（ビージーカラー）属性は、background（バックグラウンド） color（カラー）の略で、行の背景色を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:background-color プロパティで行うようにしましょう。

<td bgcolor="背景色">

属性値

"16進数RGB値"
"カラーネーム"

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

使用例

<td bgcolor="#330000">

td要素のサンプル

基本的な表の例

<table>
  <tr>
    <th>名前</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>ボブ</td>
    <td>男</td>
  </tr>
  <tr>
    <td>ムカミ</td>
    <td>男</td>
  </tr>
  <tr>
    <td>メアリー</td>
    <td>女</td>
  </tr>
</table>

ブラウザでの表示例

RERUN

新しいウインドウで表示する

thead要素、tbody要素を使った表の例

<table border="1">
  <caption>2017年1月のカレンダー</caption>
  <thead>
    <tr>
      <th>日</th>
      <th>月</th>
      <th>火</th>
      <th>水</th>
      <th>木</th>
      <th>金</th>
      <th>土</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
    </tr>
    <tr>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
    </tr>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

ブラウザでの表示例

RERUN

新しいウインドウで表示する

様々な属性を使った表の例

<table border="1">
  <caption>時間割</caption>
  <thead>
    <tr>
      <th rowspan="2">時間</th>
      <th colspan="6">曜日</th>
    </tr>
    <tr>
      <th>月</th>
      <th>火</th>
      <th>水</th>
      <th>木</th>
      <th>金</th>
      <th>土</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup">1限</td>
      <td>国語</td>
      <td>数学</td>
      <td>音楽</td>
      <td>社会</td>
      <td rowspan="2">体育</td>
      <td>英語</td>
    </tr>
    <tr>
      <th scope="rowgroup">2限</td>
      <td>数学</td>
      <td>理科</td>
      <td>社会</td>
      <td>英語</td>
      <td>国語</td>
    </tr>
    <tr>
      <th scope="rowgroup">3限</td>
      <td rowspan="2">体育</td>
      <td>英語</td>
      <td>数学</td>
      <td>美術</td>
      <td>国語</td>
      <td>数学</td>
    </tr>
    <tr>
      <th scope="rowgroup">4限</td>
      <td>社会</td>
      <td>英語</td>
      <td>国語</td>
      <td>数学</td>
      <td>理科</td>
    </tr>
    <tr>
      <td colspan="7">お昼休み</td>
    </tr>
    <tr>
      <th scope="rowgroup">5限</td>
      <td>英語</td>
      <td>国語</td>
      <td rowspan="2">体育</td>
      <td>理科</td>
      <td>美術</td>
      <td rowspan="2">&nbsp;</td>
    </tr>
    <tr>
      <th scope="rowgroup">6限</td>
      <td>美術</td>
      <td>音楽</td>
      <td>数学</td>
      <td>音楽</td>
    </tr>
  </tbody>
</table>

ブラウザでの表示例

RERUN

新しいウインドウで表示する

仕様

HTML5.1: 4.9.9. The td element

HTML5: 4.9.10 The th element

HTML4.01: 11.2.6 Table cells: The TH and TD elements

element
td 要素

td要素とは

td要素で使える属性

colspan属性

rowspan属性

headers属性

scope属性 HTML5で廃止

abbr属性 HTML5で廃止

axis属性 HTML5で廃止

width属性 XHTML1.1で廃止

height属性 XHTML1.1で廃止

nowrap属性 XHTML1.1で廃止

align属性 XHTML1.1で廃止

valign属性 XHTML1.1で廃止

char属性 XHTML1.1で廃止

charoff属性 XHTML1.1で廃止

bgcolor属性 XHTML1.1で廃止

td要素のサンプル

基本的な表の例

thead要素、tbody要素を使った表の例

様々な属性を使った表の例

仕様

関連する要素

関連するレッスン

表（テーブル）を表す要素 HTML 入門#15

element td 要素

td要素とは

td要素で使える属性

colspan属性

rowspan属性

headers属性

scope属性 HTML5で廃止

abbr属性 HTML5で廃止

axis属性 HTML5で廃止

width属性 XHTML1.1で廃止

height属性 XHTML1.1で廃止

nowrap属性 XHTML1.1で廃止

align属性 XHTML1.1で廃止

valign属性 XHTML1.1で廃止

char属性 XHTML1.1で廃止

charoff属性 XHTML1.1で廃止

bgcolor属性 XHTML1.1で廃止

td要素のサンプル

基本的な表の例

thead要素、tbody要素を使った表の例

様々な属性を使った表の例

仕様

関連する要素

関連するレッスン

表（テーブル）を表す要素 HTML 入門#15

element
td 要素