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要素を使った表の例

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

関連する要素

関連するレッスン