ＴＡＢＬＥタグを入れ子に！
ＴＡＢＬＥセルの階層化
ＴＡＢＬＥは入れ子にすれば面倒がない
前のページで、TABLEの説明を簡単にしてきました。
どういった印象を受けたでしょうか。
「特に問題はない」
すごいですね！
「何がなんだか判らない！」
はじめはそんなものです。
いきなり理解されたら、私の出番はありませんから。
いまいち不安な方は、実際に自分で試すのが近道です。
試して、そして覚える。やってみなければ使えませんよ。
では、先に進みます。
TABLEを使う際に問題となるのがセルの崩れです。
特に、縦や横を連結させようとすれば、崩れが問題になって、デザインどころではなくなることがあります。
一つのTABLEで一つのページを構築することも、別の問題を発生させます。セルが思ったようなサイズにならない・・・ことがあるのです。
では、
TABLEの崩れやサイズのズレを解決する方法はないのでしょうか？
■ TABLEの中にTABLEを入れる
テーブルにテーブルを入れてしまえば、これらの問題がチャラになります。
まずは、下の例を見てください。
<thml>
<head></head>
<body>
<table>
<tｒ>
<td>
<!-- 上部 -->
上部内容
</td>
</tr>
<tr>
<td>
<!-- メイン開始 -->
<table>
<tｒ>
<td>項目１</td>
<td>項目２</td>
<td>項目３</td>
</tr>
</table>
<!-- メイン終了 -->
</td>
</tr>
<tr>
<td>
<!-- 下部 -->
下部内容
</td>
</tr>
</table>
</body>
</html>
この例では、テーブルを上部・メイン・下部に分けています。
さらに、メイン部には別のテーブルを入れてます。階層化ということですね。
上のテーブルは、次のような位置関係となります。
［イメージをいれる］
ここでは、テーブルをメイン部分にしか設定してませんが、縦のテーブルを用意し、それぞれに横用のテーブルを設定する。そうすることでテーブル操作に生ずる煩わしさを回避することができるのです。
階層化には大きなメリットがあります。上下のセルがテーブルごとに独立しているため、お互いに影響を受けないということです。
最初からHPデザインが決まっていれば、サイズに悩むことはないでしょう。でも、私のように作りながら考える人なら、セルのサイズ修正は避けては通れません。最下段のサイズを合わせるために、もう一度最上段のセル数を考え直すのは、余計な手間というものです。
便利な階層化ですが、デメリットもあります。
それは、せっかく作ったＨＴＭＬファイルが、見にくくなるということ。
あとから混乱しないためにも、コメントは、付けときましょう！
|
