Sorry, Only for JAP.
Making T a b l e s with fun.
明るく楽しい T A B L E タグ 講座
Only for IE3.0 or NN3.0

第６回　TABLEの入れ子で、ぐしゃぐしゃしよう(96/09/11)
__ _
泣いてるペンギン
フンボルト・ペンギン
_
　ちょっとだけ、前回の復習です。
　TABLEを使って、図とコメントを比較的「TABLEっぽくなく」表示させてみました。ここでは、２図版ですが、４つだろうが、16だろうが、同じことです（でも、すっごい苦労すると思います）。
　
__ _
泣いてるペンギン
フンボルト・ペンギン
_
　ボーダーを復活させて、その上、最初のイラストのTD指定のところで、HEIGHT="150" と VALIGN="bottom" を挿入してみました。
　ご覧の通り、フンボルト・ペンギンの部分は思った通りの表示になりました。ところが、そのままでは、となりの「泣いてるペンギン」のキャプション部分も、同様に拡大されます。それで調節のために、その上の空白部分もHEIGHT指定を行います。
　
　ま、これでもいいんですが、左の図版に対して、右の図版を、もうちょっと自由に配置したい、とか考えてしまったのです。
　そんなこと考えなきゃいいんですが、いろいろとやった結果、基本的には、十字にクロスするボーダーを省略したり増やしたりということの応用ですから、さほど自由気ままにはできないという壁にぶつかりました。左の例でも、基本的に真ん中で十字に交わっているということは変わっていません。
フンボルト・ペンギン
_
_
泣いてるペンギン
　そこで、思いついたのが、TABLEの入れ子です。
　TABLEの中にTABLEのタグを入れてしまい、自由に配置するのです。……と簡単に言っていますが、TDやTRの嵐の中で、絶対に一度は迷子になります。
　字下げを活用しても、限界はあります。ですから、HTMLソースには、コメントをきちんと付けるようにした方がいいでしょう。とか言っておきながら、なかなかやらないんですけどね。
　左が、その例です。１行３列のテーブルの中に、それぞれ図版とコメントが入ったテーブルが入っています。位置等も、これで比較的自由に指定できますし、なにより、図版とコメントの関係性がTABLEタグによって損なわれることなく、記述できます。
フンボルト・ペンギン
_
_
泣いてるペンギン
　最終的にできあがったのが、左の例です。
　２次元的に発想したままTABLEタグを書いていると、いろんな困難にぶつかりますが、こうやって、擬似３次元的に考えて、HTMLを書くとそれがブレイクスルーになることがあるのでした。
　いちばん最初の例と比べて、たいした差が無いような気がするかもしれません。また、そこまでする必要性があるのかと思うかもしれません。しかし、可能性として残されている部分をしゃぶるように「実験」し、そして「実現」するのが、コンピューティングのいちばんいいところだと思えるのです。
　サウンドや動画でのコケ脅かしならいつだってできますし、それによる素晴らしい例は、あまた存在するでしょう。でも、「え？　これどうやってんの」と思えるようなページが個人的には、一等好きなページです。なんとかして、そういったところに近づきたいと思ってやってます。
　例のごとく、ソースを下に表示しておきます。
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">
<TR>

<!--左のテーブル-->
<TD VALIGN="top">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">
<TR>
  <TD HEIGHT="150" WIDTH="96" BGCOLOR="#60AA80" VALIGN="bottom">
    <IMG SRC="../hun_gr.gif" BORDER="0" WIDTH="96" HEIGHT="90"></TD>
  </TR>
<TR>
  <TD BGCOLOR="#000000" ALIGN="center" WIDTH="96">
    <FONT COLOR="#FFFFFF" SIZE="-1">フンボルト・ペンギン</FONT></TD>
  </TR>
  </TABLE>
</TD>

<!--間隔-->
<TD><FONT COLOR=#F0E8D8>_</FONT></TD>

<!--右のテーブル-->
<TD>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">
<TR>
  <TD HEIGHT="50" BGCOLOR="#F0E8D8"><FONT COLOR=#F0E8D8>_</FONT></TD>
  </TR>
<TR>
  <TD BGCOLOR="#000000" ALIGN="center" WIDTH="114">
    <FONT COLOR="#FFFFFF" SIZE="-1">泣いてるペンギン</FONT></TD>
  </TR>
<TR>
  <TD WIDTH="114" BGCOLOR="#60AA80">
    <IMG SRC="../image/pntrembl.gif" BORDER="0" WIDTH="114" HEIGHT="75"></TD>
  </TR>
  </TABLE>
</TD>

</TR>
</TABLE>
　実は、このページのレイアウトだって、TABLEの入れ子で成立しています。もう、ホント、グシャクシャです。
　もちろん、最終例のようなものをやろうとするとき、いちばんいいのは、「キャプション部分も図版で作成してしまう」という解決でしょう。そっちの方が早いとは思います。でも、それだと、欧文和文両方に対応しようとするときに、両方の図版を作成せねばなりません。たるいので、なんとかTABLEでできないものかとやってます。それに、そっちの方が表示も速くなるはずです。
　TABLEを多用すると、表示速度が、むちゃくちゃ犠牲になると考えている人も多いかと思いますが、そんなことはありません。リソースもそれほど消費しません。NNも3.0になって少しは消費量が減ったようです（でも、まだいろいろと前からのバグが残ったままっていうのはどういうワケじゃ？　他にもいろいろあって、ネットスケープは開発の質が落ちてる気がする。いや、ゼッタイ落ちてる。たぶん、例のノータリン・マシンのユーザ連中が開発の中心にいるからであろう）。
　たらたら、くっだらねえグラフィックス・ソフト使って文字だけの図版を作成する手間と、図版表示のための時間を考えたら、最終的な効率という面では、TABLEを使った方がいいと思うんですけどねえ。 　
　前回申し上げたように、今回の具体例は、すでに、「マスコット・ペンギンのおでかけ」で使っています。
　それでは（いつものように）、ご質問、ご要望、ご指摘をよろしく。