工房/ページ作成の知恵:「こんなこともできます」その1

便利! テーブルの面白い使い方

〜上手に使ってきれいに見せよう!〜

  たとえばこのページ。 本文がすべてテーブルのカラムに囲まれています。 えっ、うそ! とおっしゃるあなた、こんなテーブルなんです。 まだ信じられないなら、ソースを見ていただければわかります。
<TABLE BORDER="0">
<TR>
<TD WIDTH="5%">&nbsp;</TD>
<TD WIDTH="90%">〜本文〜</TD>
<TD WIDTH="5%">&nbsp;</TD>
</TR>
</TABLE>
 こうやって、両端5%を空けて、すっきりしたレイアウトを作っています。 ちなみに、"&nbsp;"は、テーブルのセル(ます目)に、スペースが1個ある、 すなわち空ではないことを明示するためのものです。
それから、IEでは4以上に限定されてしまう機能のようですが、 テーブル全体の位置指定と、画面全体からの割合による幅の指定、 というワザも使えるようになっています。 フロント・ページや、新しく作成するページは、 このテクを徐々に使いはじめています。
<TABLE BORDER="0" ALIGN="center" WIDTH="90%">
<TR>
<TD>〜本文〜</TD>
</TR>
</TABLE>
 もうひとつ、別館の季節限定ページで使った、こんなワザもあります。
<TABLE BORDER="0">
<TR>
<TD WIDTH="5%">&nbsp;</TD>
<TD WIDTH="90%">
  <TABLE BORDER="1">
    (見えるテーブル)
  </TABLE>
<TD WIDTH="5%">&nbsp;</TD>
</TR>
</TABLE>
 わかりやすいように、中側のテーブルのみ右側にずらして表記しましたが、 これが「テーブルの入れ子」と呼ばれるワザです。 こんなものも、レイアウトはきちんと考える必要がありますが、使えると便利です。 (こちらのページに、さらに応用編があります。 テーブルはどうなっているでしょう?)
 さらに、テーブルには、別館の「歌唱力分析チャート」ページのような、 行や列を連結するワザもあります。 <TD COLSPAN="x">や、<TD ROWSPAN="x">といったタグを使います。 ブランクを入れただけでは、テキストが右にずれない、とお嘆きのあなた (実は、そういうあなたには、簡便法として<PRE>タグ、というテもあるのですが)、 ちょっと複雑な表をみせたいけど、やり方がわからない、というあなた、 レイアウト技術とともにこんなワザを覚えれば、もう困りませんよ!

*** ただし、テーブルの中は、<BASEFONT SIZE=x>タグの指定が無効になってしまうので、 標準以外のフォント・サイズは、いちいち<TD>タグの内部で指定する必要があります。 どうしてもおいやな場合は、さきの<BLOCKQUOTE>タグで逃げてくださいね。 当家でも、べからず集のページで使っています。
 

「工房での作業 全部見せます!」に戻る
「工房」の入り口に戻る
家の玄関へ

このページは GeoCitiesです 無料ホームページをどうぞ

1998.09.14作成 1999.03.17更新
ressii@yahoo.co.jp