Section 9 : 表組の利用(2)

 HTML の表組は大きな自由度を持ち,わたしたちがふつう考える「表」とは異なるものも表現できる。また,文書のレイアウトにも幅広く応用できる。こういった表組の利用法から,ごく簡単なものを紹介しよう。


囲み記事

 この Let's try HTML にも例をあげたりするために「囲み」を用いている。これも表組を応用している。
 原理としては簡単で,セルが1つしかない表を組み,そのセルの中に文書を書く。つまり,このようになる。

<TABLE BORDER>
<TR><TD>...(ここに通常と同じように文書を書く)...</TD></TR>
</TABLE>

セルの中に箇条書きをしても,フォントの大きさを変えても,画像を入れても構わない。使用例は Let's begin HTML やこの Let's try HTML 中でいたるところに見つけることができるだろう。ちなみに,それらの囲み記事は背景色を変えてある(ただし,表組の背景色を変えるのは HTML 3.2 の規格外で,Netscape Navigator 3.0 以降,Internet Explorer 2.0 以降における HTML で実現される)


多段組み

 HTML の表組は,必ずしも罫線を必要としない。これは発想を変えれば単に表示領域を分割するのに利用できるということである。
 簡単な利用法として,疑似的に多段組みを実現できる。目次の項目が多いときに2段組みにして表示させる例をあげておこう。

<CENTER>
<FONT SIZE="+2">Let's try HTML もくじ</FONT>
<TABLE>
<TR>
<TD><A HREF="lth01.htm">Section 1</A><BR>背景に色をつける</TD>
<TD><A HREF="lth06.htm">Section 6</A><BR>画像の作成</TD>
</TR>
<TR>
<TD><A HREF="lth02.htm">Section 2</A><BR>背景に画像を貼り込む</TD>
<TD><A HREF="lth07.htm">Section 7</A><BR>表組</TD>
</TR>
<TR>
<TD><A HREF="lth03.htm">Section 3</A><BR>文字の大きさ</TD>
<TD><A HREF="lth08.htm">Section 8</A><BR>表組の利用(1)</TD>
</TR>
<TR>
<TD><A HREF="lth04.htm">Section 4</A><BR>文字の色</TD>
<TD><A HREF="lth09.htm">Section 9</A><BR>表組の利用(2)</TD>
</TR>
<TR>
<TD><A HREF="lth05.htm">Section 5</A><BR>見出し付き箇条書き</TD>
<TD><A HREF="lth10.htm">Section 10</A><BR>画像の回り込み</TD>
</TR>
</TABLE>
</CENTER>

この出力は以下のとおり。<TABLE BORDER> にして同じ HTML を書いてみよう。構造がよくわかるはず。

Let's try HTML もくじ
Section 1
背景に色をつける
Section 6
画像の作成
Section 2
背景に画像を貼り込む
Section 7
表組
Section 3
文字の大きさ
Section 8
表組の利用(1)
Section 4
文字の色
Section 9
表組の利用(2)
Section 5
見出し付き箇条書き
Section 10
画像の回り込み

とはいえ,長い文章を多段組みにすると逆に見にくくなってしまう。効果的なレイアウトのひとつの手段として用いるのがよいだろう。表組は応用次第で複雑なレイアウトを実現することができる。


解決! センター化学 I
解決! センター化学 I ◆ Z 会出版

Next : 画像の回り込み
Prev : 表組の利用(1)
Up : 目次