属性	値	機能	記述例
bgcolor	色	背景色	<TD bgcolor="red">
background	画像	背景画像	<TD background="a.gif">
align	left center right	左揃え(初期値) セルの内容を中央揃えセルの内容を右揃え	<TD align="left"> <TD align="center"> <TD align="right">
valign	top middle bottom baseline	セルの内容を上揃え中央揃え(初期値) セルの内容を下揃えベースラインに揃える	<TD valign="top"> <TD valign="middle"> <TD valign="bottom"> <TD valign="baseline">
width	数値/%	セルの横幅	<TD width="20%">
height	数値/%	セルの縦幅	<TD height="20">
colspan	セル数	横方向のセルを結合	<TD colsapn="2">
rowspan	セル数	縦方向のセルを結合	<TD rowspan="5">
nowrap	セルの自動折り返しを禁止する		<TD nowrap>

<TH>タグについて

セルを見出しとするには、<TH>タグを用います。<TD>と設定できる項目は同じですが、初期値が太字、中央揃えとなります。

属性	値	機能	記述例
bgcolor	色	背景色	<TH bgcolor="red">
background	画像	背景画像	<TH background="a.gif">
align	left center right	左揃え(初期値) セルの内容を中央揃えセルの内容を右揃え	<TH align="left"> <TH align="center"> <TH align="right">
valign	top middle bottom baseline	セルの内容を上揃え中央揃え(初期値) セルの内容を下揃えベースラインに揃える	<TH valign="top"> <TH valign="middle"> <TH valign="bottom"> <TH valign="baseline">
width	数値/%	セルの横幅	<TH width="20%">
height	数値/%	セルの縦幅	<TH height="20">
colspan	セル数	横方向のセルを結合	<TH colsapn="2">
rowspan	セル数	縦方向のセルを結合	<TH rowspan="5">
nowrap	セルの自動折り返しを禁止する		<TH nowrap>

サンプル

表のセル

縦のセルと結合します	セルを赤にしています	セルを右揃えにします
	横のセルと結合します
	自動折り返しを禁止しています	セルの高さを80にしています

サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するタグ・属性です。

<H2>表のセル</H2>
<TABLE width="80%" height="200" border="1">
<TR>
<TH rowspan="3">縦のセルと結合します</TH>
<TH bgcolor="red">セルを赤にしています</TH>
<TH align="right">セルを右揃えにします</TH>
</TR>
<TR>
<TD colspan="2">横のセルと結合します</TD>
</TR>
<TR>
<TD nowrap>自動折り返しを禁止しています</TD>
<TD height="80">セルの高さを80にしています</TD>
</TR>
</TABLE>

解説・注意点など

表のレイアウトは、<TD>, <TH>タグだけでなく、<TABLE>タグや<TR>タグなど様々タグが関係してきます。
少し複雑ですので慣れるまで大変だと思います。

← HTMLタグリファレンス/Tipsに戻る

eWeb