自己紹介

表の作り方


さて、いよいよ表の作成まで来ました。これが終わると一般的なタグは大体覚えたと
いってもいいでしょう。後は自分でドンドンをＨＰの世界を広げるだけ、なのですが、
なかなかどうして今度の敵は厄介です。予め言っておくと、タグで表を作るのは結構
面倒です。どのくらい面倒かというと、私のＨＰに載ってる表が全部同じタグで出来
ているくらいには面倒なわけです。（コピーしまくったわけですな）
しかし手の込んだ表はそれだけでページの目玉にもなってくれるので、
作り甲斐はあるかもです。では早速やってみましょう。
まず、表を作るには下のような定義が必要になります。

これを定義して、それからこのTABLEタグで囲まれた中にセル（表におけるマスですね）の指定などをしていくわけです。さて、表を作る宣言をしたところで、次は実際に簡単な表を作ってみましょう。

まずWIDHTで表の幅を。HEIGHTで表の高さを％で指定します。この％はウィンドウの大きさに対する割合で、例えばWIDHT="50"とすると、ウィンドウの横幅の半分の長さの表を作るという意味になります。またBORDERタグは表の外枠の太さを決めるもので、BGCOLORは表全体の背景色を決めます。ではサンプルです。上手くいったでしょうか。さあて、ここからいよいよ本番ですよ。今表を作るのにTDタグを使いましたよね。これは元々TDタグで囲まれた項目を縦線で区切った形の表にするものなのですよ。習うより慣れろ。見てもらった方が早いので、まずはこれを見て、ソースから使い方を覚えてください。つまり、TDタグを使った回数分だけ横へとマスが増えていくわけです。では次に、横線で区切った形の表を作ってみましょう。ここではその為にTRタグを使っています。


<TABLE BGCOLOR="skyblue"  WIDTH="50%" HEIGHT="20%" >
   <TR>
   </TR>
</TABLE>

<TABLE BGCOLOR="skyblue"  WIDTH="50%" HEIGHT="20%" >
<TR>
   <TD>
   </TD>
</TR>
</TABLE>

さて、サンプルです。どうでしょう。一個しか表が出てなくてPCぶっ壊れたんじゃないかと思った貴方。大丈夫、貴方のPCは正常なはずです。 TRタグはTDタグと違い、単独で使っても何故か表を作ってくれません。表を出すためには上の表に書いたように、TDと組み合わせる必要があります。ではTRタグはどんな働きをしているかというと、先に述べたように表を横線で区切ってやるわけですね。簡単に言うと、TDタグで作成、縦割り。TRタグは横割りのみという具合です。書き方はこんな具合になります。


<TABLE BORDER=5  WIDTH="50%" HEIGHT="20%" >

<TR>
   <TD>月曜</TD>　
 　<TD>火曜</TD>　
   <TD>水曜</TD>
</TR>

<TR>
　　<TD>散歩</TD>
　　<TD>特訓</TD>
　　<TD>お披露目</TD>
</TR>
</TABLE>

上手く表を作れましたか？例の如くサンプルです。
ソースを見てもらえば分かるのですが、このサンプルではTDタグで囲まれた文字に対して
一つ一つCENTERタグを入れています。何故表の頭につけて全部に適用させないかというと、
TDタグで囲まれた部分は独立しており、基本的に外のタグを受けつけないように出来てい
るからです。これはFONTタグ等についても同様なので、使う時はそのことを頭に入れてお
いてください。ああそれと、セルの中の文字を寄せる為には以下のようにしてやっても
ＯＫです。




   <TD ALIGN="right"> ～ </TD>　
 　<TD ALIGN="center"> ～ </TD>　
   <TD ALIGN="left"> ～ </TD>


では次に、セルの中の色を個別に指定する遣り方を覚えてみましょう。
ここまで一つ一つクリアしてきた方なら、或いはもう遣り方に察しが
ついているかもしれませんね。まあ、想像通りです（笑




<TABLE BORDER=5  WIDTH="50%" HEIGHT="20%" >
<TR>
   <TD BGCOLOR="blue">月曜</TD>　
 　<TD BGCOLOR="green">火曜</TD>　
   <TD BGCOLOR="red">水曜</TD>
</TR>
</TABLE>

そうするとこんな具合になります。　　　

月曜

火曜

水曜


またこの手のやりかたで表を枠の色を変えることも可能です。
定義の仕方は以下のようにBORDERにCOLORを加えて色指定すれ
ばＯＫです。


<TABLE BORDERCOLOR="skyblue" >


さて、一通り色の指定が終わったところで、今度は表に画像
を張りつけつつ、その延長で指定したセルに画像を張る遣り方
をやってみましょう。




<TABLE BACKGROUND＝"画像のタイトル"  WIDTH="50%" HEIGHT="20%" >
<TR>
   <TD>月曜</TD>　
 　<TD>火曜</TD>　
   <TD BACKGROUND="画像のタイトル">水曜</TD>
</TR>
</TABLE>


自前の画像を使ったサンプルです。
これが終わると表作りで教えることはあと一つだけですので、
気合を振り絞ってがんばってください。
最後のタグは、表を寄せるタグです。
文字と同じように、右寄せ左寄せ、
そして中央寄せをするタグです。
定義は簡単なので、一気に使いを説明します。



<TABLE ALIGN="center" >  ～  </TABLE>


これでTABLEタグについては一通りやったことにします。
もっと細かい手もあるんですが、それは各自で見つけて
吸収しましょう。お疲れさまでした。