テーブル［表］
　表を作るタグを紹介します。単に表を作るだけではなく、罫線を消せば段組や図表の配置にも応用することができます。なお、タグの名称が何の略称かを（）で表記しました。


　【表の基本形式】
　表は基本形式は次の三つのタグによって構成されます。　
　●　<TABLE BORDER=n>〜</TABLE>
表の宣言を行うタグです。
・ BORDERの値をnにピクセル数として指定すると立体感ある枠線がでます。
・ 数値を指定せず　BORDER　とのみ指定した場合、1ピクセルなります。
・ 属性タグであるBORDERを省略すると表の罫線が表示されません。
　●　<TR>〜</TR>
行の指定を行います。　（TR= Table Row）
　●　<TD>〜</TD>
項目の指定を行います。　（TD= Table Data）
　例えば、次のように表記すると、




　<TABLE BORDER>

　　<TR>
　　　<TD>項目の指定</TD>
　　　<TD>項目の指定</TD>
　　　<TD>項目の指定</TD>
　　</TR>

　</TABLE>


　下記のように表示されます。

項目の指定項目の指定項目の指定


　このようにHTMLの世界で表は、あくまで行を中心にそれを積み重ねたものとして理解されています。例えば、三行三列の表を作る場合には、次のように表記します。

　例えば、次のように表記すると、



　<TABLE BORDER>

　　<TR>
　　　<TD>項目11</TD><TD>項目12</TD><TD>項目13</TD>
　　</TR>

　　<TR>
　　　<TD>項目21</TD><TD>項目22</TD><TD>項目23</TD>
　　</TR>

　　<TR>
　　　<TD>項目31</TD><TD>項目32</TD><TD>項目33</TD>
　　</TR>

　</TABLE>


　下記のように表示されます。

項目11項目12項目13
項目21項目22項目23
項目31項目32項目33


【表全体に対する修飾】
　　●　表の大きさの調節
　　<TABLE WIDTH="n%" HEIGHT="n%">〜</TABLE>
　　　表の幅と高さを画面全体に対する比率で指定できます。

　　<TABLE WIDTH=n HEIGHT=n>〜</TABLE>
　　　ピクセル数で指定する場合、""は必要ありません。

　　●　タイトルを入れる
　　<CAPTION ALIGN="x" VALIGN="y">タイトル</CAPTION>
　　　X=left,center,right
　　　y=top,bottom
　　　タイトルの位置は特に属性タグで指定しない場合には上部中央に表示されます。

　　●　表の罫線の太さ調節
　　<TABLE BORDER=xx>〜</TABLE>
　　 表の外枠線の太さをピクセルで指定します。既定値は２です。

　　<TABLE Cellspacing=x>〜</TABLE>
　　 表の中の罫線の太さをピクセルで指定します。既定値は２です。

【表と文章の位置関係を指定】
　　<TABLE ALIGN="x">〜</TABLE>
　　 x=LEFT,CENTER,RIGHT
　　 left：表を画面の左側に表示し、右側に文字を回り込ませる（既定値）
　　 center：表を画面中央に表示し、文字は表の下へ
　　 right：表を画面右側に表示し、左側に文字を回り込ませる

　例えば、次のように表記すると、



　<TABLE Align="left" BORDER>

　　<TR>
　　　<TD>項目11</TD><TD>項目12</TD>
　　</TR>

　　<TR>
　　　<TD>項目21</TD><TD>項目22</TD>
　　</TR>

　　<TR>
　　　<TD>項目31</TD><TD>項目32</TD>
　　</TR>

　</TABLE>文字は右側に回りこんで表示されます。


　下記のように表示されます。

項目11項目12
項目21項目22
項目31項目32
文字は右側に回りこんで表示されます。


【セルに対する修飾】
　　●　セルの幅を指定します　　見出しタグ（<TH>）も同じ
　　　<TD Width="x"> 〜 </TD>
　　　　x＝ピクセル数を指定するか、表全体の幅に対する比率を指定

　　●　セルの高さの指定 見出しタグ（<TH>）も同じ
　　　<TD Height="x"> 〜 </TD>
　　　　x＝ピクセル数を指定するか、表全体の幅に対する比率を指定

【複数の行・列をまたぐセル】
　　●　複数の行・列をまたぐセル
　　　　n列をまたぐ　<TD COLSPAN=N>〜</TD>
　　　　n行をまたぐ　<TD ROWSPAN=N>〜</TD>

　これは非常に理解しにくいところだと思います。行を中心に考えるということがポイントです。

　例えば、３行２列の表で考えてみましょう。
　セルの結合がない場合（左側）と結合している場合（右側）を比較してみます。



　<TABLE BORDER>

　　<TR>
　　　<TD>項目11</TD><TD>項目12</TD>
　　</TR>

　　<TR>
　　　<TD>項目21</TD><TD>項目22</TD>
　　</TR>

　　<TR>
　　　<TD>項目31</TD><TD>項目32</TD>
　　</TR>

　</TABLE>

　<TABLE BORDER>

　　<TR>
　　　<TD COLSPAN=2>項目11</TD>
　　</TR>

　　<TR>
　　　<TD ROWSPAN=2>項目21</TD><TD>項目22</TD>
　　</TR>

　　<TR>
　　　<TD>項目32</TD>
　　</TR>

　</TABLE>


　上記のような指定をするとブラウザ上では下記のように表記されます。

　 　　 　 　 　　 　 　 　　 　
項目11項目12
項目21項目22
項目31項目32
 　　 　　　 　　 　　 　　　 　　 　　 　　　 　　
項目11
項目21項目22
項目32


【セル内の文字に対する修飾】
　　●　セル内の文字を強調する（ヘッダーの指定）
　　　<TH>〜</TH>
　　　（TH=Table Header）

　　●　行、セル単位でセル内の文字位置を指定する
　　　縦方向　<TD VALIGN="X">〜</CAPTION>
　　　X=TOP,MIDDLE, BOTTOM

　　　横方向　<TD ALIGN="X">〜</CAPTION>
　　　X=LEFT, CENTER, RIGHT
　　　＊ <TR>、<TH>タグでも利用できる。

　例えば、次のように表記すると、



　<TABLE BORDER>

　　<TR>
　　　<TH>ヘッダーの指定<BR>文字が強調されます</TH>
　　　<TD VALIGN="BOTTOM">下揃え</TD>
　　</TR>

　　<TR>
　　　<TD ALIGN="right">セルの右側に<BR>寄せられます</TD>
　　　<TD ALIGN="center" VALIGN="middle">中央に配置</TD>
　　</TR>

　</TABLE>

　下記のように表示されます。
　　 　　　 　　　 　　 　　 　　　 　　　 　　
ヘッダーの指定
文字が強調されます		下寄せ
セルの右側に
寄せられます		中央に配置


　　●　セル内容の間隔調整
　　　<TABLE Cellpadding=x> 〜 </TABLE>
　　　x　にピクセル数を指定します。
　　　指定した分だけセルの罫線からテキストのでの間に距離（右、上、下）を設けます。

　例えば下記のように表記すると、



　<TABLE BORDER Cellpadding=30>

　　<TR>
　　　<TD>項目11</TD><TD>項目12</TD>
　　</TR>

　　<TR>
　　　<TD>項目21</TD><TD>項目22</TD>
　　</TR>

　</TABLE>


　下記のように表示されます。
　　　 　　　 　　　 　　　 　　　 　　　
項目11項目12
項目21項目22


　　●　セル内の改行禁止 　　　<TD Nowrap> 〜 </TD>
　　　　ブラウザは自動計算によりセル幅を決め、適宜、セル内の文章を改行します。
　　　　このタグはその改行を強制的に禁止するものです。
【表に色をつける】
　●　表全体の色を指定します。
　　　<TABLE Bgcolor="xxx"> 〜 </TABLE>
　　　x＝RGB値、またはカラーネームを指定します

　　　<TR><TH><TD>のタグにも利用できます。
　　　つまり、行ごと、セル単位で色指定ができます。

　●　表の背景に画像を埋め込む（IEのみ可）
　　　<TABLE Background="x"> 〜 </TABLE>
　　　x＝画像のファイル名とパス

　　　<TR><TH><TD>のタグにも利用できます。
　　　つまり、行ごと、セル単位で色指定ができます。

　●　枠線の色
　　　<TABLE Bordercolor="x"> 〜 </TABLE>
　　　x＝RGB値、またはカラーネームを指定

【練　習　問　題　と　課　題】

　【練　習　問　題】
　テーブルタグで国旗を作ってみましょう。サンプルの全てを作ってみる必要はありません。各行のうち一カ国(フランス・ドイツの内の一つ、フィンランド・スウチェーデンの内の一つ、アイスランド・ノルウェーの内の一つ)の計三つを作ってみてください。
　なお、星条旗のサンプルです。実際の旗の通り作るのは大変ですが、大体、大まかな感じで作るとこうなります。課題よりは遥かに簡単なはずです。

なお、課題作成に際して、次の点に注意すること!!

　【課　題】
　ホームぺージ作成企画書のフォーマットを作りなさい。なお、見本のものは行の高さについてはピクセルで指定しています。列の幅については表全体としては100％に、二行目以降の一番左の列は10％で指定し、それ以外についてはブラウザの自動調整にまかせてあります。
　列幅や行の高さについては見本とほぼ同じような感じでできていればいいです。大切なことはＡ４一枚にすっきりと、バランスよく収まること、セルの構成・配置がきちんと見本どおりできていることです。さあ、みんなガンバレー！