Section 5 : 表組

 たびたび登場してきた表組であるが,これらはやや複雑な書式で記述される。ひじょうに入り組んだ表も作ることができるが,ここでは簡単なものにとどめておこう。

<TABLE>〜</TABLE>「ここから〜ここまで表組」罫線を入れたい場合は <TABLE BORDER>〜</TABLE> とする。
<TR>〜</TR>「ここから〜ここまで表のひとつの行」これがないと表は横方向にのびるばかり。
<TD>〜</TD>「ここから〜ここまで表のひとつのセル」実際の表の中身はこの中に記述することになる。
<TH>〜</TH>「ここから〜ここまで表の見出しのセル」<TD>〜</TD> のかわりに使うことができる。この中ではセンタリングされ,太字になる。

 表は「表」「行」「セル」の三重の「ここから〜ここまで」構造で記述する。発想としては,まず「セル」があって,それを縦横に並べる感覚である。対応関係に注意しないと予想もしないような表ができあがることもある。
 とくに,Internet Explorer は対応の誤りなどを適当に「修正」して表示させることがある。しかし,Netscape Navigator では誤りは誤ったなりに出力されるので,Internet Explorer で確認をしている人はとくに注意をしよう。

 表のセルの幅は,この場合は自動的に調整される。長い文字列ならば幅の広いセル,短ければ幅の狭いセルになる。ブラウザの横幅に収まらなかった場合は適当に改行がなされ,合うように調整される。
 セルの内部は通常の文書を記述するのと同じように,フォントの指定,箇条書き,画像などを設定することができる。とうぜん,セル内で改行を行うこともできる。
 表のセルの数は,必ずしも行ごとに同じである必要はない。また,「空のセル」は <TD>〜</TD> の中に何も記述しないことで作ることができる。

<TABLE BORDER>
<TR><TH>表の例</TH><TH>見出し</TH><TD>セル</TD></TR>
<TR><TD>セル内で<BR>改行</TD><TD><I>フォントの</I>変更</TD></TR>
<TR><TD><UL><LI>箇条書きも<LI>可能</UL></TD>
<TD>画像<IMG SRC="g_sphere.gif" ALT="An Image in the Table"></TD>
<TD>上の行のようにセルの数が違っても構いません。</TD></TR>
<TR><TD></TD><TD>←空のセル</TD>
<TD>セル内から<A HREF="./">目次へジャンプ</A></TD></TR>
</TABLE>

下の出力を,上とよく対照させよう。

表の例見出しセル
セル内で
改行
フォントの変更
  • 箇条書きも
  • 可能
画像An Image in the Table 上の行のようにセルの数が違っても構いません。
←空のセル セル内から目次へジャンプ

 上の表は「こんなことができる」のを示すのに複雑なことをやったが,セルの中身を単に文字だけにすればふつうの表だってもちろん作れる。
 Let's begin HTML,Let's try HTML やこの Hop step HTML にもたくさんの表組が使われているので,ソース(原稿)見て,どのようになっているか確認しよう。また,Let's try HTML の Section 7Section 8Section 9 でも表組について扱っている。

 表組は難しいが,複雑なレイアウトをするときに必要になることがある。基本を身につけておけば,魅力的なホームページを作る基礎になるはず。


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

Next : 文書の途中へジャンプ
Prev : フォント
Up : 目次