td要素

td要素 表のセル tr要素の子要素

td要素は表のセルを指定します。tr要素の子要素です。th要素とtd要素は使える属性は同じです。
td要素は単独では使いませんtable要素を使ったときにtr要素の内容として使います。

内容にできる要素

ブロック要素 インライン要素 テキスト

<table border="1">
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>

実際の表示

セル	セル
セル	セル

指定できる属性

colspan属性

横にセルを結合します。
複数の列にあるセルをまとめて1つのセルで表示します。
値にはまとめたいセルの数をいれると結合されて表示されます。

 colspan="2"

rowspan属性

縦にセルを結合します。
複数の行にあるセルをまとめて1つのセルで表示します。
値にはまとめたいセルの数をいれると結合されて表示されます。

 rowspan="2"

align属性

td要素の中の文字を横方向の配置を指定する 値にはleft左寄せ center中寄せ right右寄せ justify両端揃え

 align="center"

valign属性

td要素の中の内容を縦方向の位置を指定できます。
値にはtop 上揃え middle 中央揃え bottom 下揃え baseline ベースライン揃え

 valign="top"

cssでデザインを指定する場合

html

<td class="a"></td>

css

見出しセルの背景色の指定

値には色を表す値を指定します。

td.a { background-color: #FFCC00; }

セルの中の内容の横方向の配置

値には「left」左揃え「center」中央揃え「right」右揃え

td.a { text-align: center; }

セルの中の内容の縦方向の配置

表のセルの値にはbaseline、middle（中央揃え）、top（上揃え）、bottom（下揃え）

td.a { vertical-align: top; }

要素の幅を変える

値には長さ、パーセンテージなど

td.a { width: 100px; }

要素の高さを変える

値には長さ、パーセンテージなど

td.a { height: 100px; }

セルの背景色の指定

値には色を表す値を指定します。

td.a { background-color: #FFCC00; }

セルの背景画像の指定

値には背景画像のurlを指定します。画像ファイルを指定（gif、png、jpg）

td.a { background-image: url('img.gif'); }

セルの中にある文章の折り返しを禁止

値にはnowrapを指定します。

td.a { white-space: nowrap; }

共通属性

指定できる共通属性

id属性 class属性 style属性 title属性 lang属性 dir属性

イベント属性

イベント属性