テーブルタグはHTML内に、自由な表を作成することができます。

テーブルは<TABLE>〜</TABLE>で定義します。

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0> <TR> <TD>セル</TD> </TR> </TABLE>

BORDER

テーブルの外枠の線の太さを指定します

CELLSPACING

外枠以外の線の太さを指定します

CELLPADDING

セル内のデータとセルを区切る線の間隔を指定します

この太さをCELLSPACINGで指定 → ↓
	↑ ← データと線の間隔をCELLPADDINGで指定 → ↓

テーブルはセルと呼ばれる要素で構成されます。

<TABLE BORDER=1> <TR> <TD>セル１</TD> <TD>セル２</TD> <TD>セル３</TD> </TR> </TABLE>

<TD>〜</TD>がテーブルのセルを表現します。<TR>〜</TR>で囲まれた部分が１行の列ブロックとなります。
つまり、<TR>〜</TR>で囲まれた部分に<TD>〜</TD>がいくつあるかで、１行の列数を定義します。

セル１

セル２

セル３

見出しは<TH>〜</TH>で定義します。これは<TD>と機能的には一緒で、テーブルのセルを表現するためのタグですが、このセルに記述されたテキストは太字になり、セルの中央にセンタリングされて表示されます。

<TABLE BORDER=1> <TR> <TH>見出し１</TH> <TH>見出し２</TH> <TH>見出し３</TH> </TR> <TR> <TD>1111111111</TD> <TD>2222222222</TD> <TD>3333333333</TD> </TR> </TABLE>

見出し１	見出し２	見出し３
1111111111	2222222222	3333333333

キャプションはテーブルの表題を表示したい場合などに使用します。

<TABLE BORDER=1> <CAPTION>テーブルのテスト</CAPTION> <TR> <TD>セル１</TD> <TD>セル２</TD> <TD>セル３</TD> </TR> </TABLE>

テーブルのテスト

セル１

セル２

セル３

テーブルの枠組みは、２×３などの規則的な２次元テーブルの他に、１つ１つセルの大きさの違うテーブルを作成することも可能です。

<TABLE BORDER=1> <TD ROWSPAN=2>セル１</TD> <TD COLSPAN=2>セル２</TD> <TR> <TD>セル３</TD> <TD>セル４</TD> </TR> </TABLE>

セル１	セル２
	セル３	セル４

ROWSPAN 指定は、セルの高さを通常のセルのｎ個分にする指定です。セル１のセルの設定をROWSPAN=2とすることで、セル１の高さは他のセルの２個分の高さを持つことになります。

COLSPAN指定は、セルの幅を通常のセルのｎ個分にする指定です。セル２のセルの設定をCOLSPAN=2とすることで、セル２の幅は他のセルの２個分の幅を持つことになります。

テーブル全体に色をつけることができます。テーブル全体を同一色にする場合、<TABLE>のBGCOLORアトリビュートにカラーコードを指定します。

<TABLE BGCOLOR="yellow" BORDER=1> <TR> <TD>セル１</TD> <TD>セル２</TD> </TR> </TABLE>

セル１

セル２

また、セル単位に色をつけることもできます。セル単位の場合、<TD>、<TH>のBGCOLORアトリビュートにカラーコードを指定します。

<TABLE BORDER=1> <TR> <TD BGCOLOR="yellow">セル１</TD> <TD>セル２</TD> </TR> </TABLE>

セル１

セル２

テーブルの枠のみに色をつけることもできます。<TABLE>のBORDERCOLORアトリビュートにカラーコードを指定します。

<TABLE BORDERCOLOR="red" BORDER=1> <TR> <TD>セル１</TD> <TD>セル２</TD> </TR> </TABLE>

セル１

セル２

セル内での文字の表示位置を指定することができます。

<TABLE BORDER=1> <TR> <TD WIDTH=100 ALIGN="left">セル１</TD> <TD WIDTH=100 ALIGN="center">セル２</TD> <TD WIDTH=100 ALIGN="right">セル３</TD> </TR> <TR> <TD HEIGHT=50 VALIGN="top">セル４</TD> <TD HEIGHT=50 VALIGN="middle">セル５</TD> <TD HEIGHT=50 VALIGN="bottom">セル６</TD> </TR> </TABLE>

セル１	セル２	セル３
セル４	セル５	セル６

表示位置の指定は、ALIGNアトリビュート、VALIGNアトリビュートで行います。ALIGNは横位置の設定、VALIGNは縦位置の設定です。

テーブルの背景にイメージを貼りつけることができます。

<TABLE BORDER=1> <TR> <TD BACKGROUND="../images/back.gif">aaaaaa</TD> </TR> </TABLE>

イメージは BACKGROUND アトリビュートで指定します。テーブル全体の背景は<TABLE>、セル単位では<TD>または<TH>に記述します。