<td>テーブルのデータセルを作成

<td>タグは、テーブル(表)のデータセル(table datacell)を表します。

使い方は<table>~</table>内に<tr>~</tr>を記述しテーブルの横1行を定義します。 さらにその中にth要素やtd要素を配置する事でデータセルを表す事ができます。

またtd要素にcolspan属性を指定する事で、そのセルが表の中で占める水平方向の列数を設定することができます。 例えばcolspan="3"とすれば、そのセルは3列分のスペースを占める事になり、その右隣のセルと結合します。
rowspan属性を指定すると、そのセルが表の中で占める垂直方向の行数を設定する事ができます。 例えばrowspan="3"と指定すれば、そのセルは3行分のスペースを占め、その下のセルと結合します。

またheaders属性では、そのセルに対応する見出しのth要素(ヘッダセル)をID属性を使って指定することができます。 これをする事で、そのセルがどの見出しに対すデータなのかをより明確に示すことができます。 なお1つのtd要素が複数のth要素に対応する場合は、各th要素のid属性の値を半角スペースで区切って指定します。

HTML5での変更点

HTML5のtd要素では、align属性、valign属性、char属性、charoff属性、width属性、height属性、abbr属性、scope属性、axis属性、bgcolor属性、nowrap属性が廃止されています。 またcolspan属性の値に0を指定する事もできなくなっています

書式

  • <td 属性="値">~</td> ……… 表のデータセルを作成

属性

colspan="" 1以上の整数値を指定し、水平方向のセルを結合する。
rowspan="" 0以上の整数値を指定し、垂直方向のセルを結合する
headers="" 対応する見出しセルのid属性の値を指定。複数の場合は半角スペースで区切る

使用した時の例

<table border="1">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>内容1-1</td>
    <td>内容2-1</td>
    <td>内容3-1</td>
  </tr>
  <tr>
    <td>内容1-2</td>
    <td>内容2-2</td>
    <td>内容3-2</td>
  </tr>
</table>


<table border="1">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td colspan="2">内容</td>
    <td>内容</td>
  </tr>
  <tr>
    <td rowspan="2">内容</td>
    <td>内容</td>
    <td>内容</td>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
  </tr>
</table>

ブラウザ上の表示例

見出し1 見出し2 見出し3
内容1-1 内容2-1 内容3-1
内容1-2 内容2-2 内容3-2
見出し1 見出し2 見出し3
内容 内容
内容 内容 内容
内容 内容

対応ブラウザなどのデータ

形式 <td>~</td> カテゴリ セクショニングルート
親要素 tr 子要素 フローコンテンツ
開始タグ 必須 終了タグ 省略可能
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~