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