■レイアウトに欠かせないテーブルタグ

<TABLE BORDER=0 WIDTH="左右ピクセル数"> <TR> <TD>
・・・内容・・・
</TD> </TR> </TABLE>


まず、ブラウザの画面表示サイズの違いによるレイアウトの乱れは、発信者側の工夫で改善できるものの一つでしょう。本来はTABLEタグは表組などに使用するタグなのですが、枠罫の幅を0に指定し、枠の左右幅をピクセル指定すると目に見えない枠によって、文字が改行されるため、ブラウザのウインドウサイズに関係なく意としたレイアウトを保つことができるのです。

●TABLEタグを使っていない場合
●TABLEタグによる左右指定の見本

これら二つを、ウインドウサイズを色々と変えて見比べてください。TABLEタグを使用すると、ウインドウサイズに依存しないためレイアウトが容易になります。

◇ソース例

○Webでの使用例(デザイン的なレイアウト処理)
○Webでの使用例(読み物ページの2段組の本文)


■テーブルタグでバックカラーを塗る

<TABLE> <TR> <TD BGCOLOR=#000000>
・・・内容・・・
</TD> </TR> </TABLE>


TABLEタグを使って個別にセル内ごとにバックグラウンドカラーの指定が出来るようになりました。(Netscape Navigator 3.X以降)

●セル内にバックグラウンドカラーを指定する
ただし、対応していないブラウザが多い(色指定が無視されます)ので、BORDER=0としないほうが間の空いたデザインを回避できるでしょう。

●対応していないブラウザにだけ見える、お詫びのコメント
回避策として、セル内のバックグラウンドカラーと同色の色でコメント文を書くと、対応するブラウザでは見えず、未対応ブラウザでは背面色が無視され、コメントだけが表示されるという仕掛けです。(一番上のグレーの帯中です)

◇ソース例

○Webでの使用例(商品スペックとしての使用例)


■常に最適なバランスで配置されるスイッチ

<TABLE WIDTH="100%" BORDER=0> <TR ALIGN="center">
<TD> <"スイッチ.gif">・・・<TD>の繰り返し
</TD> </TR> </TABLE>


このほか、TABLEタグを使って便利なのは、スイッチなどを一列にレイアウトするときでしょう。各セル内にスイッチ画像を入れ、横に何個か並べれば、ブラウザのウインドウサイズの変更に応じて均等割をして、再配置してくれます。

●均等配置するスイッチ
ブラウザのウインドウサイズを色々と変えて見てください。スイッチは、常に均等な間隔を保ったまま、左右長に合わせて再配置されます。そうそう、このフレームの上のスイッチもそうです。(笑)

◇ソース例


※この他、テーブルタグを使ってページを幾何学的にグリッドを描いたりと工夫できると思います。楽しいページを見つけたら、ソースを拝見して研究してみましょう。

[戻る] [選ぶ] [進む]