td要素 -- データセル

基本データ

td要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict ○ インライン要素 ブロックレベル要素 必須 省略可 tr要素の子要素
Transitional ○
Frameset ○

属性

固有属性

rowspan="下に連結するセル数"
Strict: ○ | Transitional: ○ | Frameset: ○
自分自身を含めて何個のセルを下方向に連結するかを指定します。セルの結合を参照してください。
colspan="右に連結するセル数"
Strict: ○ | Transitional: ○ | Frameset: ○
自分自身を含めて何個のセルを右方向に連結するかを指定します。セルの結合を参照してください。
scope="自分を見出しとするときのデータセルの対象範囲"
Strict: ○ | Transitional: ○ | Frameset: ○
自分自身を見出しセルと見なしたとき、その対称となるデータの入っているセルの範囲を指定します。利用できる値は次のとおりです。
row
同じ横の行の右側にあるセル
col
同じたての行の下側にあるセル
rowgroup
同じ横のグループ(thead要素、tfoot要素、tbody要素)の右側にあるセル
colgroup
同じたてのグループ(colgroup要素)の下側にあるセル
詳細な説明はscope属性を参照してください。
headers="自分自身の見出しとなるセルのID"
Strict: ○ | Transitional: ○ | Frameset: ○
自分自身の見出しとなっているセルに設定されたID属性の値を指定します。見出しとなるセルが複数存在するときは、スペースで区切って複数列挙することができます。詳細な説明はheaders属性を参照してください。
axis="セルのカテゴリ"
Strict: ○ | Transitional: ○ | Frameset: ○
セルをカテゴリに分類するときに、そのカテゴリ名を指定します。値には日本語を使うこともできます。詳細な説明はaxis属性を参照してください。
abbr="セル内容を簡略化した文字列"
Strict: ○ | Transitional: ○ | Frameset: ○
セルの内容が長いときに、その内容を簡略化したものを記述します。例えば、<td abbr="IE">Internet Explorer</td>のように記述します。
nowrap(非推奨)
Strict: × | Transitional: △ | Frameset: △
セル内の文字の改行を禁止します。この属性は非推奨です。
CSSで代用
td { white-space: nowrap; }
width="横幅"(非推奨)
Strict: × | Transitional: △ | Frameset: △
セルの横幅を指定します。この属性は非推奨です。
CSSで代用
td { width: 幅; }
height="縦幅"(非推奨)
Strict: × | Transitional: △ | Frameset: △
セルのたて幅を指定します。この属性は非推奨です。
CSSで代用
td { height: 幅; }
align="行揃え"
Strict: ○ | Transitional: ○ | Frameset: ○
セルの行揃えを指定します。利用できる値は次のとおりです。
left
左揃え
center
中央揃え
right
右揃え
justify
両端揃え
char
char属性で指定された文字に揃える(デフォルトは小数点を表す文字)。対応しているブラウザがほとんどありません。
この属性は非推奨ではありませんが、CSSを使って次のように指定するほうが望ましいです。
左揃え
td { text-align: left; }
中央揃え
td { text-align: center; }
右揃え
td { text-align: right; }
両端揃え
td { text-align: justify; }
特定の文字で揃える(ピリオドの場合)
td { text-align: "."; }
valign="垂直方向の位置揃え"
Strict: ○ | Transitional: ○ | Frameset: ○
セルの中身を垂直方向のどの位置にそろえるのかを指定します。利用できる値は次のとおりです。
top
上揃え
middle
中央揃え
bottom
下揃え
baseline
1行目の下端
この属性は非推奨ではありませんが、CSSを使って次のように指定するほうが望ましいです。
上揃え
td { vertical-align: top; }
中央揃え
td { vertical-align: middle; }
下揃え
td { vertical-align: bottom; }
1行目の下端
td { vertical-align: baseline; }
char="行を揃える文字"
Strict: ○ | Transitional: ○ | Frameset: ○
align="char"を指定したときに、どの文字で位置を揃えるのかを指定します。デフォルトでは小数点を表す記号(日本語ならピリオド)です。
charoff="セルの端からchar属性で示した文字までの空白"
Strict: ○ | Transitional: ○ | Frameset: ○
align="char"を指定したときに、セルの左端からそろえる文字までの距離をピクセル値かパーセント値で指定します。
bgcolor="背景色"(非推奨)
Strict: × | Transitional: △ | Frameset: △
横一行のセルの背景色をまとめて指定します。この属性は非推奨です。
CSSで代用
td { background-color: #色; }

解説

一つのデータセルをあらわす要素です。tr要素の子要素となり、自身の子要素にはインライン要素、ブロックレベル要素をともに含むことができます。

データではなく見出しを表すセルはth要素を使います。th要素とtd要素で利用できる属性は共通です。見出しセルであるかデータセルであるかという点で両者を使い分けてください。

td要素は以下のページでth要素と併せて説明しています。

Strict DTDの定義

<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->
<!-- Scope is simpler than headers attribute for common tables -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">
<!-- TH is for headers, TD for data, but for cells acting as both use TD -->
<!ATTLIST (TH|TD)                      -- header or data cell --
  %attrs;                              -- %coreattrs, %i18n, %events --
  abbr        %Text;         #IMPLIED  -- abbreviation for header cell --
  axis        CDATA          #IMPLIED  -- comma-separated list of related headers--
  headers     IDREFS         #IMPLIED  -- list of id's for header cells --
  scope       %Scope;        #IMPLIED  -- scope covered by header cells --
  rowspan     NUMBER         1         -- number of rows spanned by cell --
  colspan     NUMBER         1         -- number of cols spanned by cell --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
  >

Information

現在の位置