初級篇★ページ作りの基礎知識1. HTMLを書いてみよう

VOL4.テーブルの基本 その４ ★ 位置を指定する

作成画面上に単に表を挿入しただけでは、配置についてもその表が右に寄せて表示されるものか、中央か、左か、これも全く指定されていないことになります。何も指定しない状態では通常、画面向かって左に表示される初期設定が生きるようですが、この表を「どこに」表示するかを指定する必要がある場合も出てきますね。この指定には実は5通りあります。以下ではHTMLで書く場合を優先して説明していますので、HP作成ソフトでの指定については、こちらをご参照下さい。

まず単に表を単独で右、中央、左のどれかの位置に表示する場合ですが、この時はページ上で「表」は単独の一段落と見なされますので、テキストは回り込まずに表の上下に表示されることになります。

このように表の後のテキストは、ここから始まり、表の横に回りこむことはありません。

この設定は、HTML上では<table> </table>タグをはさむようにして、<div align="left"> </div>というタグで記述されています。つまり...

<div align="left">

<table border="2" cellpadding="0" cellspacing="0" width="250" height="120">

<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>

</table>

</div>

このようになっているわけですね。この始めの<div align="left">の中を"center"、"right"と書き換えることによって、テーブルは右に行ったり中央に行ったりすることになります。

<div align="center">の場合

<div align="right">の場合

これらの場合は、いずれも文字は回り込むことなく下に送られます。この<div>タグは、これで囲まれた範囲をひとかたまりとして位置を指定するタグですので、表に限らずテキストなどに関してもその位置指定に用いることが出来ますが、ここでは、とりあえず表の表示位置を指定するためにも使えるということを覚えておきましょう。

さて、残りの二通りに関してですが、これは表の横にテキストを回りこませるためのものです。VOL.2で画像に対するテキストの回り込み指定についてお話ししましたが、それと同じようにテーブルをひとつの画像とみなして、その横にも文字を表示させるやり方ですね。

表の場合も画像の時と同じように、今度は<table>タグの中にALIGN="left" もしくは　"right"と書き込めばOKです。この場合、これだけで表の位置が決定されますので、先ほどの<div>タグに関しては考えなくて結構です。

<table border="2" cellpadding="0" cellspacing="0" ALIGN="left">

<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>

<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>

</table>

上のように記入すると、このように文字をテーブルの横に回りこませることが出来るようになります。ALIGN="right"と記入すれば、表は反対の端により、同様にしてその横にテキストが回り込むことになりますね。

けれども画像の時と同じように、こうしてあまりに表の罫線に近いところにテキストが表示されると見苦しくなるのですが、IEではこの回りにスペースを空ける設定がなく、この状態を避けるためにはちょっとしたテクニックが必要になります。Netscapeの場合はHTMLにVSPACE、HSPACEを指定すれば余白が空きますが、ブラウザによって表示が異なるのは困りますので、ここではこれを使用せず乗り切る方法をご紹介します。要はブラウザで下のように見えればキレイなわけなんですが...

ね? これで文字と表の間にスペースが空いて、見やすくなったでしょ?

タネあかしをすると、見えている表と文字の間に、もうひとつ別な表（この場合は列、行ともに1を指定しているので、単なる四角です。）を作成してスペーサーにしているんです。この他にも、背景と同じ色の四角を画像として作成してスペーサーにするなど、方法はいろいろあると思いますが、罫線を表示させた表に文字を回り込ませて、しかもスペースを空けたい、なんて時は、こういうやり方もあるということですね。

ほら、出てきた。この単なる長方形が、スペーサーとなっているわけです。これは、

２．回り込みは横の表と同じに指定して、罫線は非表示のままにしておく

３．幅はスペースを空けたい分だけ数値で指定、高さは見えている表より10ピクセルほど大きく設定する。（高さを大きめにするのは、下に回りこんだ文字も表から引き離すためです。）

この場合のHTMLは以下のようになります。

<table border="2" cellpadding="0" cellspacing="0" width="250" height="120" align="left"> 
<tr> 
<td>　</td> 
<td>　</td> 
<td>　</td> 
</tr> 
<tr> 
<td>　</td> 
<td>　</td> 
<td>　</td> 
</tr> 
</table>   ...表示させる目的の表
<table border="0" cellpadding="0" cellspacing="0" align="left" width="50" height="130"> 
<tr> 
<td>　</td> 
</tr> 
</table>   ...スペーサーとなる１行／１列の表

また他には目的のテーブルを一回り大きな四角で囲んでしまうという方法もあります。

横の例では、目的のテーブルには回り込み指定はしてありません。もうひとつ別に列/行ともに1の表を作成し、それに回り込み指定をしてその中に目的のテーブルを入れてしまってあるのです。この時、囲みとなる表は目的の表より一回り大きいサイズを指定しておくことがコツです。

やり方としては

１．目的の表には回り込み指定しない

２．別に列/行ともに1のテーブルを作成し回り込みを指定してから、目的のテーブルより一回り大きくなるように幅、高さを設定する。

３．大きい四角の中に目的のテーブルを入れ込む

４．目的のテーブルの大きい四角の中での位置、つまりこの場合は左よりにするか中央にするかを指定する

タネを明かせばこのようになっていて、外側の枠線を非表示にしているわけです。

これは画像にも応用がききますので、大きい表の中に画像を入れ込み、本文に関わりなく画像の説明文を下に記すというようにも使うことが出来ます。SECRET GARDEN VOL6. では、この方法で写真にコメントを加えていますので、参考にしてみて下さいね。

上の例をHTMLで書くと、以下のようになります。

<table border="0" cellpadding="0" cellspacing="0" width="280" height="160" align="left"> 
<tr> 
<td> 
<div align="center"> 
<table border="2" cellpadding="0" cellspacing="0" width="250" height="120"> 
<tr> 
<td>　</td> 
<td>　</td> 
<td>　</td> 
</tr> 
<tr> 
<td>　</td> 
<td>　</td> 
<td>　</td> 
</tr> 
</table> 
</div>   ...表示させる目的の表
</td> 
</tr> 
</table>  ...外枠になっている１行／１列の表

★HP作成ソフトでの位置指定手順 （Front Pageの場合）★

１．作成した表のどれかのセルにカーソルを置き、その上で右クリックして「表のプロパティ」を表示する。

２．文字の回りこみが必要ない場合は、「配置」のプルダウンメニューから、右、中央、左を選ぶ

３．文字を表の横に回りこませたい場合は、「フロート」のプルダウンメニューから、右、左を選ぶ

さて、これで貴方はテーブルをページ上どこにでも置くことが出来るようになりました。次章以降では画像やテキストをセル内で任意の位置に表示させたり、表全体やセルに背景色や背景画像を用いたり、セルを必要に応じて結合したり分割したりするなどの、更に細かな設定方法をお話してゆきましょう。

初級篇1.VOL4.テーブルの基本・その3 <<

>> 初級篇1.VOL4.テーブルの基本・その5