|
初級篇★ページ作りの基礎知識1.
HTMLを書いてみよう
VOL4.テーブルの基本 その５
★ セル内容の表示位置を指定する
セルに画像や文字を挿入してある時、内容を↓のように上、中央、下または右、中央、左にそれぞれ寄せて表示させることが出来ます。これはセルごとに指定する他に、行ごとにまとめて指定、もしくはセル内の段落ごとに指定することも可能です。順に見てゆきましょう。
Ⅰ.セルごとに指定
上の表はHTMLでは以下のように書かれていますが...
<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" width="150" height="200">
<p><img border="0" src="../furby/shingao/furby123.jpg" width="100" height="100"></p></td>
<td align="center" valign="middle" width="150" height="200">
<p><img border="0" src="../furby/shingao/furby124.jpg" width="100" height="100"></p></td>
<td align="right" valign="bottom"
width="150" height="200">
<p><img border="0" src="../furby/shingao/furby125.jpg" width="100" height="100"></p></td>
</tr>
<tr>
<td align="left" valign="middle" width="150" height="50">
<p><b><font face="ＭＳ Ｐ明朝">ゴリラ</font></b></p></td>
<td align="center" valign="middle" width="150" height="50">
<p><font face="ＭＳ Ｐ明朝"><b>チーター</b></font></p></td>
<td align="right" valign="middle" width="150" height="50">
<p><font face="ＭＳ Ｐ明朝"><b>Gストライプ</b></font></p></td>
</tr>
</table>
この例ではセル内のデータ表示位置を指定しているのは<td>タグ内にある<td
align="left
（center,right）" valign="top
（midle,bottom）">という表示です。
align="left
（center,right）" は横方向の位置（左or中央or右）
valign="top
（midle,bottom）" は縦方向の位置（上or中央or下）
を、それぞれ指定しています。
Ⅱ.行ごとに指定
上の例はセルごとに指定しましたが、これと同じことを<tr>タグ内に書き込めば、一行分すべてのセルがその位置指定で内容を表示します。ただし、もし<td>タグ内にも位置指定があれば、そちらが優先されて表示に反映します。
<table border="2" cellpadding="0" cellspacing="0">
<tr align="left" valign="middle">
<td width="150" height="200">
<p><img border="0" src="../furby/shingao/furby123.jpg" width="100" height="100"></p></td>
<td width="150" height="200">
<p><img border="0" src="../furby/shingao/furby124.jpg" width="100" height="100"></p></td>
<td width="150" height="200">
<p><img border="0" src="../furby/shingao/furby125.jpg" width="100" height="100"></p></td>
</tr>
<tr align="right" valign="middle">
<td width="150" height="50">
<p><b><font face="ＭＳ Ｐ明朝">ゴリラ</font></b></p></td>
<td width="150" height="50">
<p><font face="ＭＳ Ｐ明朝"><b>チーター</b></font></p></td>
<td width="150" height="50">
<p><font face="ＭＳ Ｐ明朝"><b>Gストライプ</b></font></p></td>
</tr>
</table>
Ⅲ.段落ごとに指定
上の例では、どちらもひとつのセルに段落が一つしかありませんでしたが、セル内に複数の段落がある場合もあります。<td>や<tr>タグ内に書き込むと、複数の段落がある場合でもセルごと、行ごとにその指定に従って表示されてしまいます。それでは、段落ごとに指定するにはどうしたら良いでしょうか。HTMLでは、一段落を指定するタグは<p></p>ですから、今度はこの<p>タグ内に書き込めばいいわけです。ただし、縦位置はセル内での内容全体に対して指定するものですから、ここでは指定できません。段落ごとの指定が出来るのは、横方向だけです。
ひとつ例を挙げてみましょう。下の例は、１行／１列のテーブルの中に、写真と解説を入れてみたものですが、ご覧の通り３段落あります。横方向を段落ごとに中央、左、右と変えてみました。ちなみに縦方向の位置はvalign="middle"で、<td>タグ内に指定してあります。下のスクリプトで、ご確認下さい。
|
スパイスのサンプルを試せる工房
スパイスの歴史を記した展示などもあります
|
<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
<p align="center"> ...
1段落めの画像を中央に表示
<img border="0" src="2002autumn/o61_47.jpg" VSPACE="20" HSPACE="30" width="250" height="187"></p>
<p align="left"> ...
2段落めのテキストを左に寄せる
<font size="2"><b>スパイスのサンプルを試せる工房</b></font></p>
<p align="right"> ...
3段落めのテキストを右に寄せる
<font size="2"><b>スパイスの歴史を記した展示などもあります</b></font></p>
</td>
</tr>
</table>
このように、セル内においても自由に画像やテキストの位置を決めることが出来ます。まとめて一気に指定したい場合と、細かく指定を変えたい場合があると思いますので、目的に応じて使い分けて下さい。
★HP作成ソフトでの指定手順
（Front Pageの場合）★
画像やテキストのセル内での表示位置は、目的のセルにカーソルを置いてメニューの下に並んでいるショートカットの中から、
横方向へは 
（左or中央or右）
縦方向へは 
（上or中央or下）
それぞれ3つのうちどれかを選んでクリックして下さい。ただし、ひとつのセル内に複数の段落がある場合は、横方向へは段落ごとに指定する必要があります。
初級篇1.VOL3.テーブルの基本・その4
<<
>> 初級篇1.VOL3.テーブルの基本・その6
|
