ホームページを作成する際に、まず覚えたほうがよいのがテーブルレイアウトです。
表というとこの画面のように枠が見えたり、色が見えたりするものと思いがちですが、実際には目には見えない形でレイアウトに表を用いているサイトも多いのです。それでは、何故わざわざテーブルを使用するのでしょうか？
ひとつの理由として、ホームページは見ている人のPC環境によっては表示が異なることがあります。
スペースキーで間隔を空けたり、目分量でレイアウトを行ってしまうと、他の人のパソコンではどんな状態になっているか想像もできなくなってしまうのです。
そこでテーブルを用いることにより、レイアウトががっちり抑えられるようになるんですね。
また、HTMLの性質から、ホームページ作成ソフトを使用しても自由に文字や画像を配置できないケースもあります。
そういった場合にも、テーブルを設置することにより配置が可能になったりもします。
既にホームページ作成ソフトをお持ちの方は、どのサイトでも構いませんので、ページを保存して作成ソフトで読み込んでみて下さい。Yahoo!をはじめ大きいサイトのほとんどが、普段は目に見えないテーブルによるレイアウトをしていると思います。
（他のサイトを見ることはレイアウトの勉強にもなります。コピーしたりそのまま真似てはいけませんが）
それでは、テーブルを見えなくするにはどうしたら良いのでしょうか？下にテーブルのラインを見せた例と、見えなくした例を載せておきます。
ラインの太さ
１ ：（Table border=1） |
| デジタルカメラ100 |
定価15000円 |
| デジタルカメラ200 |
定価20000円 |
| デジタルカメラ300 |
定価30000円 |
ラインの太さ
０ ：（Table border=0） |
| デジタルカメラ100 |
定価15000円 |
| デジタルカメラ200 |
定価20000円 |
| デジタルカメラ300 |
定価30000円 |
下の「ラインの太さ
０」のほうは、テーブルのラインはブラウザー上では見えません。しかし、上の「ラインの太さ
１」と全く同じテーブルに入っています。
太さを０にするかしないかで、このようにレイアウト専用として用いることができるのです。
また、テーブルやセル（マス目）ごとに色を指定することもできます。下のサンプルは先程の「ラインの太さ
０」に色を付けたものですが、見易くするためにセルの間にスペースを入れています。
ラインの太さ
０ ：（Table border=0 cellspacing=1） |
| デジタルカメラ100 |
定価15000円 |
| デジタルカメラ200 |
定価20000円 |
| デジタルカメラ300 |
定価30000円 |
さて、なんとなくお分かりいただけたでしょうか？
実際のホームページ作成ソフト上ではこんな感じに見えています。
テーブルを用いると複雑なレイアウトでも表示が崩れずに済みますので、是非使い方をマスターしてみて下さい。
「注意する点」でも書きましたが、パソコンモニターの解像度による表示の違いに対処するには、横幅600〜700ピクセル程度のテーブルを設置し、その中でレイアウトをしていくと作成し易くなります。
（800x600（ヨコｘタテ）ピクセルのモニター解像度に収まるように）
また、テーブルはパーセントでも幅を設定できるのですが、ページの骨格となるテーブルにパーセント指定した場合には、ブラウザのウィンドー幅に対する割合となりますので、1024x768モニターと800x600モニターでは実際のレイアウトが変わってきます。
（もちろんそれ以外の解像度でも）
そのため、骨格テーブルの中にレイアウトした文字や画像、テーブルなどの配置も変わってきてしまう可能性がありますので、注意して下さい。
ピクセルで指定した場合には、ウィンドー幅には関係なく一定の横幅となります。
|
