ぱそおーるHTML講座

<TD></TD><TH></TH>タグ


<TD></TD>も<TH></TH>もセルを作るためのタグです。
<TABLE></TABLE>内に<TR></TR>（行）を作成して、その中にセルを作成します

<table border="1" width="400" height="100">
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
<td>セル４</td>
</tr>
</table>
上のテーブルを使って、セルの属性を見ていきましょう。
セル１ セル２ セル３ セル４
これが表示させたテーブルになります。
属性での変化を見るために、セル１にだけ属性を記述しています。

最初に<TD>と<TH>の違いを見ておきましょう。
HTMLソース内の<TD></TD>部分を全て<TH></TH>タグと入れ替えて見ます。
セル１ セル２ セル３ セル４
<TD>と<TH>を入れ替えただけで、他は変わっていません。
<TH>を使うと、セル内の文字が強調され、センタリング（中央寄せ）されます。
単にこれだけの違いです。表の見出しに使われる事が多いです。

セル１ セル２ セル３ セル４
<TR></TR>内に<TD></TD>と<TH></TH>を混ぜる事も出来ます。

属性
width : セルの横幅を設定します。ピクセル、または％で設定します。
height : セルの高さを設定します。ピクセル、または％で設定します。
<td width="50">
セル１ セル２ セル３ セル４
複数のセルに異なる数値を指定した場合、幅も高さも一番大きな値が適用されます。
属性を設定しない場合は、セル内の文字や画像、ウィンドウに合わせた大きさになります。

bgcolor : セルの背景色を設定します。
<td bgcolor="yellow">
セル１ セル２ セル３ セル４

background : セルに背景画像を設定します。
<td background="sample.gif">
セル１ セル２ セル３ セル４

align : セル内の文字や画像を表示する位置を設定します。水平方向です。
  1. left : 文字や画像を左寄せします。（TDデフォルト）
  2. right : 文字や画像を右寄せします。
  3. center : 文字や画像を中央寄せします。（THデフォルト）
<td align="right">
セル１ セル２ セル３ セル４

valign : セル内の文字や画像を表示する位置を設定します。こちらは垂直方向です。
  1. top : 文字や画像を上に表示します。
  2. middle : 文字や画像を中央に表示します。（TD,THデフォルト）
  3. bottom : 文字や画像を下に表示します。
  4. baseline : セル内をベースラインで揃えます。
<td align="top">
セル１ セル２ セル３ セル４

colspan : 横方向のセルを連結させます。
rowspan : 縦方向のセルを連結させます。
<td colspan="連結数">と記述します。

<table border="1" width="400" height="100">
<tr>
<td colspan="2">セル１セル２</td>
<td>セル３</td>
<td>セル４</td>
</tr>
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
<td>セル４</td>
</tr>
</table>
セル１セル２ セル３ セル４
セル１ セル２ セル３ セル４
表示の関係上、<TR></TR>を一行増やしてあります。
HTMLソースは上のように変化します。
最初のTRにはTDが3つですが、後ろのTRにはTDが4つあるはずです。
colspanを削除したら…下のような表示になってしまいます。
セル１セル２ セル３ セル４
セル１ セル２ セル３ セル４

nowrap : セル内の改行を禁止します。
<td nowrap>
セル１
これを設定すると改行されません		 セル２
通常は自動的にセル幅に合わせて改行されます		 セル３ セル４
これでテーブル関連は終了です。
HOMEへ