５ |
表でもう少し凝ったレイアウトをしてみよう！ |
１． |
改行場所を決めよう！ |
| NE3 | NE4 | NE6 | IE3 | IE4 | IE5 | IE6 | i |
”文字をいじってみよう”のところでやったのとよく似てるんだけど、
改行指定をしたところ以外は文章が横に続けられるというタグだよ。
|
普通、表の中の文字は表の大きさによってかわるよね、それはわかる？
表が小さくなればなるほど一列に表示できる文字の数が少なくなるよね。
そこで、セルの幅よりも文字数が大きくなってしまうと、自動的に次の行に文字が移動されるんだ。
でもこのままだと、一行の文字数を一定にしておきたい時でも、見ている人が画面を小さくしたりすると表も小さくなって表示される文字のスタイルが崩れてしまうね。
それが嫌な人はセルのタグを<TD NOWRAP>〜</TD>としてつくってやろう。
これを書くと<BR>や<P>などの改行を自分で指定しない限り、同じ行で表示されることになるんだ。
もし、セルの幅が文字数より小さくなる時は、セルが文字の長さにあわせてくれるんだ。
| SOURCE |
| <HTML> <HEAD> <TITLE>テーブル</TITLE> </HEAD> <BODY> <TABLE WIDTH="50%" BORDER> ←50％の大きさ
</BODY> |
| RESULT | |||
↑ブラウザの50％の大きさに指定した。画面の大きさを変えてごらん。文字の形は崩れないでしょ。
↑ブラウザの20％の大きさに指定した。でも20％になっていないね。文字の長さが優先されているんだよ。
↑NOWRAPが無いので指定した大きさ20％で折り返す。 |
このようにして誰が見ても表の形が崩れないようにできるんだ。
表の背景に画像を使おう！
表の枠のスタイルを決定しよう！