５

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

basic.gif (3042 バイト)

３．

 表の大きさを変えよう！
NE3 NE4 NE6 IE3 IE4 IE5 IE6 i

次は表の大きさを変えてみよう！

<TABLE WIDTH="■" HEIGHT="★">〜</TABLE> 　    ・・・・表の大きさ

■：表の横幅を指定できる（ピクセル数または％）
★：表の縦幅を指定できる（ピクセル数または％）

表の大きさを変えるときの大きさの指定方法はふたつあるんだ。

・ピクセルで指定・・・・ピクセルっていうのはパソコンの画面の中の単位と思っておけばいいと思う。だからcmとか個とかみたいなただの単位だと思っておいてね。
・％（パーセント）で指定・・・・画面の全体を１００％としたときの大きさの比率。だから５０％と指定したらそれは画面の半分の大きさということだね。３０％というと画面の３分の１ということだよ。
（画面を小さくしてもその小さい画面に対する％で表示されるよ）

どちらかというと下の％でした方が全体のイメージがわかりやすいと思う。
上のピクセル単位で指定するのは細かい変更の時がいいと思うよ。

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

<TABLE BORDER WIDTH="50%" HEIGHT="25%">　　　←横幅50％（画面の半分の横幅）、縦幅25％（画面の４分の１の縦幅）
<TR><TD>これが横幅50％、縦が25％にしたとき</TD></TR>　　　　←テーブルは一行<TR>〜</TR>、セル１つ<TD>〜</TD>
 </TABLE>

<TABLE BORDER WIDTH="300" HEIGHT="150">　　　　　　　　　←横幅300ピクセル、縦幅150ピクセル
<TR><TD>これが横幅300ピクセル、縦が150ピクセルの大きさ</TD></TR>
↑テーブルは１行<TR>〜</TR>、セル１つ<TD>〜</TD>
</TABLE>

</BODY>
</HTML>

上のソース（元のHTMLで書かれたもの：青で囲まれたやつ）にBORDERが入っているのはわかりやすくするためだからね｡
もしこれがなかったら枠線がないからわかりにくくなるのでここで入れておいた。
みんなは好きなようにすればいいからね。
ピクセルはさっきも言ったようにただの単位なのでいろいろ数値を変えてみてどれくらいになるか自分で試してごらん。

　RESULT 　

これが横幅50％、縦が25％にしたとき
←これは例なので、実際にやってもらった時には少し大きさが違うと思う。とりあえず、自分のブラウザの大きさの横50％（半分）、縦25％（4分の1）になってればいいからね。
これが横幅300ピクセル、縦が150ピクセルの大きさ
←ピクセルとは単位なのでどれくらいの大きさになるかはいろいろな数字を入れて試してみてね｡

　

back.gif (1116 バイト)　枠線の太さを変えてみよう！
next.gif (705 バイト)　表に色をつけよう！