レイアウトする！

　次にTABLEタグの解説をします。TABLEタグは元々表を作成する為のタグですが、HTMLタグの中で数少ない「pixel単位で指定できるタグ」な上、その中に他のほとんどのタグや要素を置く事が出来るので、ページのレイアウトにこだわる場合には欠かせないタグと言えます。まずは普通に表を組む方法から見て行きましょう。
　それからこれまで例を示してきた白抜きの枠はTABLEタグによるものです。こういう使い方もあると思ってください。

テーブルの組み方

<TABLE border="1" width="100">
 <CAPTION>表１</CAPTION>
 <TR>
  <TH>Ａ</TH><TH>Ｂ</TH><TH>Ｃ</TH>
 </TR>
 <TR>
  <TD>１</TD><TD></TD><TD><br></TD>
 </TR>
</TABLE>
　　　　　↓

表１
ＡＢＣ
１

　表組みはTABLEタグを基礎とした複数のタグを組み合わせて行います。
　TABLEタグはその表の大きさや線の太さ、全体の背景色など基本的な情報を決めます。
　CAPTIONはその表の表題を書くためのタグですが、表示位置などの融通が余り利かないので、直接FONTタグで書いたテキストを上に置いても構いません。
　<TR>〜</TR>が横一行を表しており、THは太字で中央揃えの見出しに、TDはただの要素として使用します。ちなみに枠１マスの事を「セル」と言います。
　中身が空のセルは上の様になってしまうので、枠をちゃんと表示したい場合は<br>を置くなどしましょう。

テーブルの大きさと位置

<TABLE border="1" width="80%" height="80">
 <TR>
  <TH>Ａ</TH><TH>Ｂ</TH><TH>Ｃ</TH>
 </TR>
 <TR>
  <TD>１</TD><TD>２</TD><TD>３</TD>
 </TR>
</TABLE>
　　　　　↓

ＡＢＣ
１２３ 
<TABLE border="1" align="center">
 <TR>
  <TH>Ａ</TH><TH>Ｂ</TH><TH>Ｃ</TH>
 </TR>
 <TR>
  <TD>１</TD><TD>２</TD><TD>３</TD>
 </TR>
</TABLE>
　　　　　↓

ＡＢＣ
１２３

　テーブルの大きさはwidthとheightでそれぞれ横と縦を指定しますが、その値はpixel数で絶対値指定する以外に、設置する領域に対する割合を％で書く事も出来ます。上の場合はTABLEタグの白い枠に対する割合ですが、単独で設置する場合はウィンドウサイズに対する割合になります。
　また、絶対値で指定した場合、その大きさはウィンドウサイズの影響を受ける事は無く、ウィンドウを小さくするとスクロールバーが作られます。
　align属性はテーブル全体の表示位置を決めます。属性値はleft,center,rightの３つで初期値はleftです。

テーブルの枠

<TABLE border="10" cellspacing="3" cellpadding="5" width="100">
 <TR>
  <TH>Ａ</TH><TH>Ｂ</TH><TH>Ｃ</TH>
 </TR>
 <TR>
  <TD>１</TD><TD>２</TD><TD>３</TD>
 </TR>
</TABLE>
　　　　　↓

ＡＢＣ
１２３

　TABLEタグのborderで外枠の太さ、cellspacingでセルとセルの区切りの太さ、cellpaddingでセルの枠と要素の間の間隔を指定しています。全てpixel単位。borderは初期値が0なので、枠線を表示したい場合必ず数値を設定しましょう。
　TABLEの枠の設定には、その他bordercolorで枠の色を、bordercolorlightで枠の明るい部分（左上）のみの色を、bordercolordarkで枠の暗い部分（右下）のみの色を指定する事が出来ますが、全てIE独自の機能となっています。

複数の行や列にまたがったセル

<TABLE border="1" cellspacing="0" bordercolor="#000000">
 <TR bgcolor="#F0F0F0"><TH rowspan="2">年</TH><TH rowspan="2">日付</TH>
  <TH rowspan="2">天気</TH><TH colspan=2>気温(℃)</TH><TH rowspan="2">湿度<br>（％）</TH></TR>
 <TR bgcolor="#F0F0F0"><TH>最高</TH><TH>最低</TH></TR>
 <TR><TD rowspan=5>2001年</TD><TD>8/ 8(水)</TD><TD>曇</TD>
  <TD align="right">35.7</TD><TD align="right">25.5</TD><TD align="right">55</TD></TR>
 <TR><TD>8/ 9(木)</TD><TD>曇</TD>
  <TD align="right">28.0</TD><TD align="right">24.4</TD><TD align="right">81</TD></TR>
 <TR><TD>8/10(金)</TD><TD>曇</TD>
  <TD align="right">29.5</TD><TD align="right">25.7</TD><TD align="right">72</TD></TR>
 <TR bgcolor="#F0F0FF"><TD>8/11(土)</TD><TD>曇</TD>
  <TD align="right">30.4</TD><TD align="right">24.6</TD><TD align="right">61</TD></TR>
 <TR bgcolor="#FFF0F0"><TD>8/12(日)</TD><TD>曇</TD>
  <TD align="right">30.7</TD><TD align="right">23.9</TD><TD align="right">69</TD></TR>
 </TR>
</TABLE>
　　　　　↓

年日付天気気温(℃)湿度
（％）
最高最低
2001年8/ 8(水)曇35.725.555
8/ 9(木)曇28.024.481
8/10(金)曇29.525.772
8/11(土)曇30.424.661
8/12(日)曇30.723.969

　多少複雑な表の例。THタグは「<TD align="center"><B></B></TD>」というものと同じ意味になります。太字だけ、中央寄せだけ使う場合はTDタグで書きましょう。
　TH，TDタグの属性でcolspanが横に、rowspanが縦に複数の行をまたいだセルを作る事が出来ます。一つのセルは必ず四角形になるので、「かぎ型」のセルを作ったりする事は出来ません。
　bgcolor、align属性はTR，TH，TDそれぞれのタグに有効で、各セルごとの背景色と要素の表示位置を指定できます。TRタグで指定したものは、その行のセルに直接指定が無い限り有効で、bgcolorに関してはTABLEタグで指定した物とも入れ子にしたような関係になるので、上手く使って無駄を無くしましょう。
　TH，TDタグには、その他width，heightでセルごとの大きさを指定出来ます。

複数の表を並べる

<TABLE>
<TR><TD>

表１
<TABLE border="1" width="100">
 <TR>
  <TH>Ａ</TH><TH>Ｂ</TH><TH>Ｃ</TH>
 </TR>
 <TR>
  <TD>１</TD><TD>２</TD><TD>３</TD>
 </TR>
</TABLE>

</TD><TD>

表２
<TABLE border="1" width="100">
 <TR>
  <TH>Ａ</TH><TD>１</TD>
 </TR>
 <TR>
  <TH>Ｂ</TH><TD>２</TD>
 </TR>
 <TR>
  <TH>Ｃ</TH><TD>３</TD>
 </TR>
</TABLE>

</TD></TR>
</TABLE>
　　　　　↓

表１
ＡＢＣ
１２３
表２
Ａ１
Ｂ２
Ｃ３

　TABLEタグで作ったテーブルは、通常他の要素に並べて置く事は出来ず、必ず次の行から表示されます。
　もしテーブルを並べて表示したい場合、テーブルのセルの中にテーブルを設置する形になります。
　これは他の並べられない要素などにも言える事で、どうしてもこの位置に表示したいという場合は、テーブルに入れてしまえば比較的容易に思い通りの位置に置く事が出来ます。

その他の例

<TABLE border=1 cellspacing=0 bordercolor=#000000>
<TR bgcolor=#F0F0F0><TH rowspan=2>Banner</TH>
<TH>Sitename</TH><TH>Master</TH></TR>
<TR bgcolor=#F0F0F0><TH colspan=2 nowrap>Category＆Comment</TH></TR>
<TR><TD rowspan=2 bgcolor=#F0FFF0><A href="http://karo.cdx.jp/"><IMG src="../../img/thunder_bnr.png" width=200 height=40 alt="○○さんだー"></A><br></TD>
<TD nowrap><A href="http://karo.cdx.jp/">
<b>○○さんだー</b></A><br></TD>
<TD nowrap><b>かろのり<b><br></TD></TR>
<TR><TD colspan=2 bgcolor=#FFF0E0><nobr>[DownLoad]<wbr>[ソフト]<wbr>[日記]<wbr></nobr><br>
ネットゲームとか作ってるらしい。</TD></TR>
</TABLE>
　　　　　↓
Banner SitenameMaster
Category＆Comment
○○さんだー
 ○○さんだー
 かろのり
[DownLoad][ソフト][日記]
ネットゲームとか作ってるらしい。

　nowrapという属性はそのセル内でのBRタグ以外での改行を無効にします。改行されると見栄えの悪くなる見出しや要素に使うのですが、実は半角小文字のみの文字列は強制改行される事がありません。

 
<TABLE border="0" cellspacing="0" cellpadding="0">
 <TR>
  <TD width="15" height="15"></TD>
  <TD width="15"></TD>
  <TD width="15" bgcolor="black"><br></TD>
  <TD width="15"></TD>
  <TD width="15"></TD>
 </TR>
 <TR>
  <TD height="15"></TD>
  <TD bgcolor="black"><br></TD>
  <TD bgcolor="black"><br></TD>
  <TD bgcolor="black"><br></TD>
  <TD></TD>
 </TR>
 <TR bgcolor="black">
  <TD height="15"><br></TD>
  <TD><br></TD>
  <TD><br></TD>
  <TD><br></TD>
  <TD><br></TD>
 </TR>
 <TR>
  <TD height="15"></TD>
  <TD></TD>
  <TD bgcolor="black"><br></TD>
  <TD></TD>
  <TD></TD>
 </TR>
 <TR>
  <TD height="15"></TD>
  <TD></TD>
  <TD bgcolor="black"><br></TD>
  <TD></TD>
  <TD></TD>
 </TR>
</TABLE>
　　　　　↓











　テーブルを使ったドット絵です（笑）。 　枠の太さに間する指定を全て0にすると、セルとセルを隙間無く並べることが出来ます。
　このホームページのトップページのような配置をする場合など、レイアウトの為には覚えておくと便利です
≪Index　 ≪Back　 Next≫