作成ネット収入HP「あくせすポイント」
トップ >  ホームページ作成 > TABLEでベースを! > TABLEの入れ子

TABLEタグを入れ子に!

TABLEセルの階層化

TABLEは入れ子にすれば面倒がない

前のページで、TABLEの説明を簡単にしてきました。
どういった印象を受けたでしょうか。

「特に問題はない」
すごいですね!

「何がなんだか判らない!」
はじめはそんなものです。

いきなり理解されたら、私の出番はありませんから。

いまいち不安な方は、実際に自分で試すのが近道です。
試して、そして覚える。やってみなければ使えませんよ。

では、先に進みます。

TABLEを使う際に問題となるのがセルの崩れです。
特に、縦や横を連結させようとすれば、崩れが問題になって、デザインどころではなくなることがあります。

一つのTABLEで一つのページを構築することも、別の問題を発生させます。セルが思ったようなサイズにならない・・・ことがあるのです。

では、
TABLEの崩れやサイズのズレを解決する方法はないのでしょうか?

■ TABLEの中にTABLEを入れる

テーブルにテーブルを入れてしまえば、これらの問題がチャラになります。
まずは、下の例を見てください。

<thml>
<head></head>

<body>
<table>

<tr>
<td>
 <!-- 上部 -->
 上部内容
</td>
</tr>

<tr>
<td>

  <!-- メイン開始 -->
  <table>
    <tr>
    <td>項目1</td>
    <td>項目2</td>
    <td>項目3</td>
    </tr>
  </table>
  <!-- メイン終了 -->

</td>
</tr>

<tr>
<td>
 <!-- 下部 -->
 下部内容
</td>
</tr>

</table>
</body>
</html>

この例では、テーブルを上部・メイン・下部に分けています。
さらに、メイン部には別のテーブルを入れてます。階層化ということですね。

上のテーブルは、次のような位置関係となります。

[イメージをいれる]

ここでは、テーブルをメイン部分にしか設定してませんが、縦のテーブルを用意し、それぞれに横用のテーブルを設定する。そうすることでテーブル操作に生ずる煩わしさを回避することができるのです。

階層化には大きなメリットがあります。上下のセルがテーブルごとに独立しているため、お互いに影響を受けないということです。

最初からHPデザインが決まっていれば、サイズに悩むことはないでしょう。でも、私のように作りながら考える人なら、セルのサイズ修正は避けては通れません。最下段のサイズを合わせるために、もう一度最上段のセル数を考え直すのは、余計な手間というものです。


便利な階層化ですが、デメリットもあります。
それは、せっかく作ったHTMLファイルが、見にくくなるということ。

あとから混乱しないためにも、コメントは、付けときましょう!

<>

Copyright(C)AccessPoint by Tukioyaji ページトップ
メールする