LESSON5:テーブル表示の仕方
 テーブルと言っても食卓のあれとは違って「表」のことです。 このレッスンの開始ページにも表が使われています。 ここでは,表のことをテーブルと呼びます。 ブラウザにテーブルを表示するのには実際にテーブルの内容を表示する タグの他にテーブルを表示させるタグを設定しなければなりません。

●テーブルタグの基本

○基本のテーブルタグ;<TABLE>〜 </TABLE>で テーブルを作ることを宣言し,<TD>〜 </TD>で 列の定義をして<TR>〜 </TR>でセルを作っていきます。

TDはテーブルデータ,<TD>〜 </TD>で挟まれた部分が 1つのセルに納められます。これを横方向のセルの数だけ並べて <TR>〜 </TR>で挟むと,横1列が出来あがります。 この作業を繰り返せば任意行のテーブルが出来ます。 <TR>〜 </TR>タグは,前タグだけ単独で改行タグの様に 使うことも出来ます。

<TABLE> <TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 明子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。

学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

○イメージタグのアトリビュート テーブルタグ<TABLE>のアトリビュートも以下のように沢山あります。

■テーブルの枠線の太さとマージンの変更;BORDER="枠の太さを指定する数値" で枠を表示します。「=枠の太さを指定する数」の部分を書かないとデフォルト値 1となります。 CELSPACING="セルの全ての枠の太さを指定する数値"とCELLPADDING="枠線と表中の テキストとの間隔を指定する数値"でマージンを変更します。

<TABLE BOREDR=10> <TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

<TABLE BOREDR=3 CELLSPACING=5>
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

<TABLE BOREDR=3 CELLPADDING=5> <TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

■テーブルの枠線の色の変更;BORDERCOLOR="#RRGGBB,colorname" BORDERCOLORLIGHT="#RRGGBB,colorname" BORDERCOLORDARK="#RRGGBB,colorname" で枠の色を指定します。BORDERCOLORLIGHTとBORDERCOLORDARKを 使うと色を使い分けて立体的に表示します。

<TABLE BOREDR BORDERCOLOR=#ff5500>
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

<TABLE BOREDR BORDERCOLORLIGHT=#FFFF00 BORDERCOLORDARK=Purple CELLSPACING=8>
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

■テーブルの大きさを指定する;WIDTH, HEIGHT
<TABLE BOREDR=3 WIDTH=50% HEIGHT=25%>
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

<TABLE BOREDR=3 WIDTH=150 HEIGHT=50>
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

■テーブルの位置を指定する;ALIGN="値"
値にはcenter(middleでも同じ), right,leftの3種類が入ります。 デフォルト(指定なし)の場合はleftと同じになります。
<TABLE BORDER ALIGN="center">
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

<TABLE BORDER ALIGN="right">
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫









以下テーブル自体のアトリビュートではなくセルのアトリビュート指定について 書き加えておきます。

■セルの幅を指定する他;<TD ROWSPAN="値"> 〜</TD>で 縦のセル幅が指定できます。 <TD COLSPAN="値"> 〜</TD>で横のセル幅が指定できます。 当然 セル内の文字の位置していもALIGNで行なうことが出来ます。 垂直位置の指定はVALIGN=top,middle,bottom,baselineで行なえます。 また,BGCOLORで色を付けることも出来ます。
<TABLE BORDER>
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD ROWSPAN=4 ALIGN=center VALIGN=bottom>1 </TD><TD>5 </TD>
<TD BGCOLOR=Purple>山田 花子 </TD></TR>
<TR><TD>6 </TD><TD BGCOLOR=#0000ff>山川 春子 </TD></TR>
<TR><TD>7 </TD><TD BGCOLOR=#ff0000>川田 道夫</TD></TR>
<TR><TD>8 </TD><TD BGCOLOR=red>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

<TABLE BORDER> <TR><TD COLSPAN=3 ALIGN=center>転入生</TD></TR>
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
転入生
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫

最後になりましたが,テーブルにタイトルをつけてこのレッスンを 終りたいと思います。

■タイトルを付ける;<CAPTION>〜</CAPTION>で 行ないます。タイトルにもALIGNとVALIGNのアトリビュート指定が出来ます。

<TABLE BOREDR>
<CAPTION ALIGN=right VALIGN=bottom>以上が転入生です。</CAPTION>
<TR><TD>学年 </TD><TD>組 </TD><TD>氏名 </TD></TR>
<TR><TD>1 </TD><TD>5 </TD><TD>山田 花子 </TD></TR>
<TR><TD>2 </TD><TD>6 </TD><TD>山川 春子 </TD></TR>
<TR><TD>3 </TD><TD>7 </TD><TD>川田 道夫</TD></TR>
<TR><TD>4 </TD><TD>8 </TD><TD>手塚 治虫</TD></TR>
</TABLE>
は以下の様に表示されます。
全員転入生です。
学年氏名
山田 明子
山川 春子
川田 道夫
手塚 治虫


LESSON4| LESSON6