tableタグを使ったレイアウト  

美しいレイアウトを作る基本は、<table>タグの活用にあります。昔は、複雑なtableは読み込みに時間がかかって好ましくない、とされましたが、現代ではさすがに100MHz以下のスピードのCPUでインターネットを見る人は少ないと思います。tableは、ブラウザで解釈して表示されますが、今のパソコンでは、これで時間がかかることはないようです。<table>を使ったレイアウトは、殆どのブラウザで表示でき、レイアウトの基本テクニックです。tableタグは、手で作成するのは面倒で、これを効率よく発生させるために編集ソフトがある、といっても良いくらいです。

Frontpageでの表作成の手順

これでできあがったソース

<div align="center">   中央の指定はtableタグの外にある
<center>          古いブラウザのためにタグを残している
<table border="1" width="595" height="220">
<tr>
<td width="119" height="220" rowspan="3"></td>  この下3行を結合
<td width="460" height="92" colspan="3"></td>   この横3列を結合
</tr>
<tr>
<td width="460" height="46" colspan="3"></td>
</tr>
<tr>
<td width="263" height="64"></td>
<td width="102" height="64"></td>
<td width="83" height="64"></td>     最後の行のみ、結合がない
</tr>
</table>
</center>
</div>

表(全体)やセルの設定

カーソルを対象となる雹の中に入れ、メニューの表・プロパティ・表(またはセル)を開く

 ここには、見えないが上記の表があり、レイアウトされている。 表を選択して「中央ボタン」は効かないが、
この画面の配置で中央に持ってこられる。
ここで、罫線のサイズを0にすると見えない表になる。
背景・色で表全体または特定のセルの色を変えることができる。

セルに色を付けた場合

*Frontpageの表機能は、空白セルにも自動的に全角スペースが入る。  セルには背景画像も指定できる  

表を使ったテクニック

ここでは、罫線の見えない表をレイアウト用に作り、その表に細い列を作って背景の色を指定して縦線・横線を作っています(緑色)。

また、表の中に表を作って、その中に写真画像を入れ、罫線を太くして茶系の2色を指定し額縁を作っています。

 

*表の中を空白にすると、編集するたびに自動的に全角スペースが入り、画面では1文字分の厚さになりますが、テキストで編集し空白文字をとり除きます。このようなトラブルを防ぐために、1×1のスペース用のgif画像を入れることもあります。

丸みを持たせた囲み

これも、表を使った表現です。90度の扇形の画像をコーナーに配置しています。残りのセルには、同じ色を背景色に指定します。

*これは、ホームページビルダーのお得意技です。表のコーナーに  があります。

画像をスライスして表に並べる

今年の桜は4月を待たずに散ってしまいました
この奥には、楽しい遊具が並んでいます 幼稚園の建物です
きれいなチューリップが咲きました

上の画像は1枚に見えますが、実は4つの部分にスライスされ、表の中で1枚に見えます。スライスされた写真の上にマウスを持っていくと、異なる表示が出ます。部分ごとにリンクを置くことができます。これは、FireWorksというソフトの得意技ですが、手作業でも可能です。
 スライス画像の例  これらが表の中に並んで1枚に見えます。