HTMLの書き方　基礎１３
発言番号 発言日時 発言者
01356 98/02/07 04:10 にゃん

テーブルを応用したレイアウト

● 余白

画面の左右に余白をとって、中ほどに文章を表示させたいとき、文章をテーブルの中に入れてしまいましょう。テーブルの幅を少し狭くして、中央揃えで表示すると綺麗です。

<CENTER>
<TABLE WIDTH="70%"><TR><TD>
〜（ここに文章を書く）〜
</TD></TR></TABLE>
</CENTER>

このようにすると、左右に15%ずつの余白ができて、中央70%の範囲に文章が来ます。テーブルの外枠は表示されません。BORDER を付けて外枠を表示させるのも、いいですね。

● 飾り縁

<CENTER>
<TABLE BORDER="2" CELLPADDING="6" WIDTH="80%">
<TR><TD><TABLE BORDER="8" CELLPADDING="10">
<TR><TD>
〜（ここに文章を書く）〜
</TD></TR></TABLE>
</TD></TR></TABLE>
</CENTER>

このようにすると、太さの違う２重の枠の中に、文章が入っているという表示になります。いろいろデザインを工夫すると面白いです。

● 文章バックの色付け

枠線を表示しないテーブルの中に文章を入れて、セルの背景色をパステルカラーなどに指定してやるのも綺麗です。現在の ftran1 のホームページに多用されていますね。ただし、セルの背景色を表示できないブラウザでも困らないように、色の使用はデザイン的な要素にとどめて、色が見えなくても内容の理解に差し支えないように工夫しましょう。

● 段組み

新しいバージョンの HTML には、段組みをするためのタグが定義されています。でももちろん、そういう新しいものは、ちょっと古いブラウザになると表示できないので、段組みをしたいときには、<TABLE> タグを使ったほうが良さそうです。ごく簡単には、 
<TABLE WIDTH="100%" CELLPADDING="20">
<TR><TD VALIGN="top">
〜（ここに左の段の文章を書く）〜
</TD>
<TD VALIGN="top">
〜（ここに右の段の文章を書く）〜
</TD></TR></TABLE>

このようにすると、二段組みのように表示されます。いろいろなやり方があります。工夫して楽しみましょう。

上の例だと、左右の段幅が違ってしまっていますね。カラムの幅を調整するには、かなり頭を使わなくてはなりません。左右の <TD> にそれぞれ WIDTH="50%" を指定するという手は、ネスケには通用しますが、ＩＥ（少なくともＩＥ３）の場合は、ここに幅を指定しても無視してくれます。

これでテーブルの話は、だいたい終わりでしょうか。何か漏れていたら補ってください＞誰か
その次は、フレームの話ですね。文章で説明するのは難しそうです。

上の大きなボタンを押すと、テキストエリアに書かれている内容が、右のフレームに表示されます。いろいろ好きなことを書いて試してみましょう。

前の記事 次の記事

目次

翻訳フォーラムのトップページ