Section 6 : <TABLE> を用いたレイアウト

 <TABLE> がレイアウトに応用できることは Let's try HTML の Section 9 で簡単に紹介したが,ここではさらに複雑な応用例を紹介していく。


疑似イメージマップ

 Section 4Section 5 で紹介したイメージマップは設定が面倒なので,あまり使われないのが実状である。かわりに,<TABLE> を使って細かく区切った絵を並べ,それらにジャンプを設定することで擬似的にイメージマップを実現できる。

 たとえば,1枚の絵を次のように分割したとする。

Academic HTML
Let's begin HTML
Let's try HTML
Hop step HTML

これら部分部分に必要に応じて <A HREF="..."> でジャンプを設定する。これらを <TABLE> で配置する。
 <TABLE> に関して BORDER=0,CELLSPACING=0,CELLPADDING=0 でぴったり並ぶようにし,また,絵の BORDER=0 として枠線を消すことに気をつけて,

Academic HTML
Let's begin HTML
Let's try HTML
Hop step HTML

のようにできる。見た目はほとんどイメージマップである。Netscape Navigator で絵の端に短い線が見えているときは <IMG> と </A> の間に改行が入っていることが多いので <A>〜</A> を1行で書くことを習慣づけよう。

 また,当然絵を長方形状に細かく分割してもよいが,そうなってくると <MAP> でイメージマップを作る方が簡便だったりする。


トップページへの応用

 文書全体を <TABLE> でレイアウトするのは最近企業(.co.jp)のページを中心に多く見られるようになった。トップページが無用に縦長というのはあまり見栄えのするものではないだろう。<TABLE> は段組を擬似的に実現するので狭いスペースに多くの情報を詰め込むことが可能になる。
 ただし,<TABLE> は一般的に表示速度が遅くなるのでそのリスクを覚悟しなければならない。

<H2>ようこそ○○へ</H2>
<TABLE WIDTH="100%">
<TR VALIGN="top">
<TD WIDTH=150 BGCOLOR="#FFCCFF"><DIV><H3>CONTENTS</H3></DIV>
<UL>
<LI>新着情報
<LI>ご案内
<LI>製品情報
<LI>......
</UL></TD>
<TD><DIV><H3>NEWS</H3></DIV>
<DL>
<DT><B>◇◇発売のお知らせ</B>
<DD><P> かねてよりお待たせしておりました◇◇がついに今月 10日,発売となりました。詳しい情報は......。</P>
<DT><B>......</B>
<DD><P>......</P>
<DL></TD>
</TR>
</TABLE>

文章を上から表示させるために <TR VALIGN="top"> としているところに注意。<TD BGCOLOR="..."> はセルを色分けするのだが,別にサポートされていなくても内容に問題が出るわけではない。

ようこそ○○へ

CONTENTS

  • 新着情報
  • ご案内
  • 製品情報
  • ......

NEWS

◇◇発売のお知らせ

 かねてよりお待たせしておりました◇◇がついに今月 10日,発売となりました。詳しい情報は......。

......

......

 上の例は簡単なものだが,上手な調整でいかようにもなる。また,さらに複雑にすることも可能である。これかな,と思うサイトに出会ったら,ソースをのぞいてみよう。

 また,このような本来の使い方から離れた表組の是非も問題だろうが,HTML で相当する記述がない以上,しかたのないものと考えるしかあるまい。


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

Next : ヘッダ情報・その1
Prev : イメージマップ・その2
Up : 目次