 |
 |
| フンボルト・ペンギン |
泣いてるペンギン |
|
はい、これ（左）がよくあるテーブル。なーーんにも考えないでつくるとこうなります。ワザらしいワザは使ってませんが、セルバックグラウンド・カラーの指定と、セル幅の指定をやっていることぐらいでしょうか。
|
|
泣いてるペンギン |
| フンボルト・ペンギン |
|
|
こんな風に図版と注釈をわざとずらして表示する場合には、WIDTHや、HEIGHTで数値を指定した場合でも、幅や高さが図版によって決定されるので、妙に間抜けなカンジになります。十字できれいに分断されるというこの形式は、変更できません。当然ですね。
|
|
＿ |
| 泣いてるペンギン |
| フンボルト・ペンギン |
|
| ＿ |
|
考え方を変えてみましょう。
２行２列のテーブルではなくて、４行２列のテーブルだと思うのです。
コツは、図版部分のセルで、ROWSPAN="2"の指定を行い、隣のセルを二つ分またがるようにします。これで、単に「テーブルを使って、ただ単に縦横に置いてみました」感は、薄れると思います。空いてるセルに「＿」（全角のアンダースコア）が入っていますが、これは、後でフォントカラーの指定をすることで、見えなくすることができます。
タグは、下のようになります。
|
<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="5" >
<TR>
<TD WIDTH="96" ROWSPAN="2">
<IMG SRC="../hun_gr.gif" BORDER="0" WIDTH="96" HEIGHT="90"></TD>
<TD>＿</TD>
</TR>
<TR>
<TD BGCOLOR="#60AA80" ALIGN="center" WIDTH="114">泣いてるペンギン</TD>
</TR>
<TR>
<TD BGCOLOR="#60AA80" ALIGN="center" WIDTH="96">フンボルト・ペンギン</TD>
<TD WIDTH="114" ROWSPAN="2">
<IMG SRC="../image/pntrembl.gif" BORDER="0" WIDTH="114" HEIGHT="75"></TD>
</TR>
<TR>
<TD>＿</TD>
</TR>
</TABLE>
|
|
|
__ |
_ |
|
泣いてるペンギン |
|
フンボルト・ペンギン |
|
| _ |
|
最終的に、ボーダーを取って、バックグラウンド色の指定と、フォント色の指定をやり直します。列の間隔を開けるために、ROWSPAN="4"を使って、間に１列だけ入れます。この列の幅は、強制的に決定するのは難しいので、カラの図版を入れるか、フォントで調整します。思った通りにはなりませんが、ま、ブランク列なので、それほど気にしない気にしない。
タグの例は、下の通りです。
|
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" >
<TR>
<TD WIDTH="96" ROWSPAN="2" BGCOLOR="#60AA80">
<IMG SRC="../hun_gr.gif" BORDER="0" WIDTH="96" HEIGHT="90"></TD>
<TD WIDTH="10" ROWSPAN="4"><FONT COLOR=#F0E8D8>__</FONT></TD>
<TD><FONT COLOR=#F0E8D8>_</FONT></TD>
</TR>
<TR>
<TD BGCOLOR="#000000" ALIGN="center" WIDTH="114">
<FONT COLOR="#FFFFFF" SIZE="-1">泣いてるペンギン</FONT></TD>
</TR>
<TR>
<TD BGCOLOR="#000000" ALIGN="center" WIDTH="96">
<FONT COLOR="#FFFFFF" SIZE="-1">フンボルト・ペンギン</FONT></TD>
<TD WIDTH="114" ROWSPAN="2" BGCOLOR="#60AA80">
<IMG SRC="../image/pntrembl.gif" BORDER="0" WIDTH="114" HEIGHT="75"></TD>
</TR>
<TR>
<TD><FONT COLOR=#F0E8D8>_</FONT></TD>
</TR>
</TABLE>
|
