まずはこれを見てください。

	ここにテキストをいれていったりすることが多いですねー。

これ、テーブルタグを用いてつくられています。
単純な罫線枠だけでよいのであれば、テーブルの基本的な使い方だけでもできますが、サイトを制作するときは、やはり見映えよくしたいもの。
ということで、このテーブルタグが大活躍するわけです。
なお、このようなテーブルは２種類あります。

その１）可変にする
ユーザーが実際にＷｅｂサイトを見るときは、ブラウザを画面いっぱいに広げるか、それともある程度の幅にのみ広げるかは、作り手側からはわかりません。
よって、サイトによっては、それぞれのウィンドウサイズに合わせて中身のサイズを可変にすることもあります。
具体例を見てみましょう。
まずは、ブラウザをパソコン画面の３分の２くらいにしてください。

	これは幅が可変のテーブル。 縦もテキストが増えれば自動的に広がります♪

次に、ブラウザを画面いっぱいに広げてください。
どうですか？ テーブルの横幅が変わりましたか？
こういった形にすることもできるわけです。
この場合、どこの横幅が変わるように設定したのかというと……と、その前に、テーブルがどのようにできているのかを説明せねば。

上の画像は、Ｗｅｂページを制作する際に、業界で使われることが多いソフト「Dreamweaver」で実際にコーディングしているときの画面キャプチャです。
点線が見えますが、実際のページにすると、みえなくなります。
この点線の部分がテーブルというわけです。つまり、上記のものは３行３列のテーブルに画像を組み込んでいるわけです。

水色の部分はウィンドウサイズに対して何パーセントかを指定しています。ピンクの部分は中に入れるテキストを増やしていけば自動的に広がるようにしています。
画像自体をウィンドウサイズに合わせて拡大したり、縮小するわけではありません。
テーブルには、背景画像を指定することができるので、このセルの背景画像を罫線のものにし、繰り返し表示をするように指定しているのです。
実はこの部分、画像サイズは非常に小さく、横幅はわずか6pixe（テーブル上の水色部分で使っているもの）lしかないのです。
よって、長い罫線に見えますが、実は6pixelの画像が繰り返し表示されているにすぎなかったりするのです。
それ以外の四隅については、背景ではなくきちんと画像をはめ込み、さらにセルのサイズをきちんとpixelで指定しています。そうしないと、ズレてしまい、不恰好になってしまうことがあるからです。
上のテーブルで使っている画像を並べてみました。実際はこれらのパーツをテーブルで組み合わせているのです。
　　　　　　　

その２）不変にする
企業ページではむしろこちらが多いかもしれません。
ユーザーによって、表示が異なってしまうことを嫌う傾向がありますので。
かといって、不変にすれば必ずつくったものと同じように表示されるかというと、これまたそれは難しいですが、可変にするよりは、制作側が望んだ形に近づいた状態のものを見せることができます。
不変にすると、こんな感じ。

	これは不変のテーブル。 縦はテキストの増減にあわせて変わりますけどね。 固定することも可能ですが、縦は指定しないほうが いいでしょう。

これは、ブラウザサイズをどのように変えても、テーブルサイズが変わることはありません。
最初からすべてのセルに対して、サイズをpixelできちんと指定しているからです。
可変のときは一部を％指定、不変のときはpixel指定というわけです。

▲このページのＴＯＰへ戻る