５

 表でもう少し凝ったレイアウトをしてみよう！

basic.gif (3042 バイト)

１．

 簡単な表を作ろう！
NE3 NE4 NE6 IE3 IE4 IE5 IE6 i

まず、簡単な表を作ってみよう。
ここでは次のようなタグを使うよ。

<TABLE>〜</TABLE>
<TABLE BORDER>〜</TABLE>		 　　　　・・・・表の枠無し
　　　　・・・・表の枠あり

上の<TABLE>〜</TABLE>は表の一番外側の枠を作るんだ。
<TABLE BORDER>〜</TABLE>はBORDERというのが付いただけだけど、これは枠線を表示してね、ってことだからね。
上のタグはBORDERがないので枠線は表示しないでいいよっていうことだよ。上と下の違いをわかっておこうね。
でもここでは枠を作るだけなのでここに文字とか入れたいときは、ちゃんとこの中に何行（横の列）・何列（縦の列）の表を作るのか指定してあげないといけないよね｡

<TR>〜</TR>
 <TD>〜</TD>		 　　　　・・・・列を作る
　　　　・・・・セルを作る

<TD>〜</TD>でセル（□の箱）１つを作るんだよ。
だから表に文字を入れたいときはこの箱（セル）に入れるということなので<TD>好きな言葉</TD>ということになるよね。
そして<TR>〜</TR>で列を作るんだ。
ここは見てもらうのが一番いいと思うから早速やってみよう。

　SOURCE
<HTML>
<HEAD>
<TITLE>テーブル</TITLE>
</HEAD>
<BODY>

<!--１つ目の表-->
<TABLE>　　　　　　　　←BORDERが無いから枠線は無いよ
　　<TR>
　　　　<TD>ここに書いた言葉がセルの中に表示されるね。</TD>
　　</TR>
　　　↑１列目を<TR>〜</TR>で作った。<TD></TD>は１つなので文字を入れるセル（箱）は１つだね。
　　<TR>
　　　　<TD>2列目はこのように下に作られる。</TD>
　　</TR>
　　　↑２列目を<TR>〜</TR>で作った。
</TABLE>

<!--２つ目の表-->
<TABLE BORDER>               ←BORDERで枠を描いてみよう
　　<TR>
　　　　<TD>ここに書いた言葉がセルの中に表示されるね。</TD>
　　</TR>
　　　↑列を<TR>〜</TR>で作った。<TD></TD>は１つなので文字を入れるセル（箱）は１つだね。
　　 <TR>
　　　　<TD>2列目はこのように下に作られる。</TD>
　　</TR>
</TABLE>

<!--３つ目の表-->
<TABLE BORDER>
　　<TR>
　　　　<TD>２つの言葉が</TD><TD>入るね。</TD>
　　</TR>
　　　↑列を<TR>〜</TR>で作った。今度は<TD></TD>は２つあるから文字を入れるセル（箱）は２つだね。
　　<TR>
　　　　<TD>２列目も</TD><TD>作れる。</TD>
　　</TR>
</TABLE>

</BODY>
</HTML>

これはどのようになるんだろう。
次のようになるよ。

　RESULT 　

↓１つ目の表（枠線無し）
ここに書いた言葉がセルの中に表示されるね。
2列目はこのように下に作られる。

↓２つ目の表（枠線あり）
ここに書いた言葉がセルの中に表示されるね。
2列目はこのように下に作られる。

↓３つ目の表（枠線あり）
２つの言葉が入るね。
２列目も作れる。

　

back.gif (1116 バイト)　表でもう少し凝ったレイアウトをしてみよう！
next.gif (705 バイト)　枠線のデザインを変えてみよう！