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

VOL4.テーブルの基本 その２ ★ 罫線とスペースに関する設定

作成画面上に単に表を挿入しただけでは「これが表である」という以外の指定は一切ありません。そこで、これに罫線やサイズ、配置など様々な設定を加えてゆかなければならないわけですが、この章では、まず罫線に関する初歩的な設定についてまとめてみましょう。初歩的な設定とは以下のようなものです。ここではHTMLでの記述方法を優先して説明していますので、HP作成ソフトでの操作はこちらを参照して下さい。

�T.罫線の幅と色を指定する

�U.セル内の画像や文字と罫線とのスペースを指定する

�V.セル間のスペースを指定する

さて、前章の例では、表に罫線を出して各セルにサイズ指定してありましたが、HTMLに直接スクリプトを書きこんで表を作成し、<table>タグ内に何も指定しないで文字や画像を挿入すると、ブラウザでは↓のように単に内容が並んでいるだけに見えます。

<table>
<tr> 
<td> 
<p align="center"><img border="0" src="../furby/shingao/furby123.jpg" width="100" height="100"></td> 
<td> 
<p align="center"><img border="0" src="../furby/shingao/furby124.jpg" width="100" height="100"></td> 
<td> 
<p align="center"><img border="0" src="../furby/shingao/furby125.jpg" width="100" height="100"></td> 
</tr> 
<tr> 
<td> 
<p align="center"><b><font face="ＭＳ Ｐ明朝">ゴリラ</font></b></td> 
<td> 
<p align="center"><font face="ＭＳ Ｐ明朝"><b>チーター</b></font></td> 
<td> 
<p align="center"><font face="ＭＳ Ｐ明朝"><b>Gストライプ</b></font></td> 
</tr> 
</table> 

けれども、前章の例でお気づきになった方もあるかもしれませんが、作成ソフトの機能を使って表を作った場合、ソフトによっては、自動的に書き込まれるHTMLに既に以下のような数値指定がされている場合もあります。

<table border="0" cellpadding="0" cellspacing="0">

table border="数値"...表の罫線幅を指定（単位:ピクセル）

cellpadding=数値"...セル内の画像や文字と罫線とのスペースを指定（単位:ピクセル）

cellspacing="数値"...セル間のスペースを指定（単位:ピクセル）

このように、これら全てが"0"で指定されている場合は、どれも幅がないということですから、↓の表のように罫線もなく、内容の間のスペースも全く開かない状態で表示されることになります。

つまり<table>タグだけの場合は、<table border="0" cellpadding="1" cellspacing="2"> とスクリプトを書いたのと同じ状態に初期設定されているようで、従って最初の表は内容の間に僅かながらスペースを空けて表示されているんですね。しかし、どちらの場合でもtable border="0" となっていますので、罫線が非表示になっているわけです。

以上でお分かりのように、テーブル全体の罫線やスペースを指定するには、<table>タグ内でそれぞれの数値を指定すれば良いということです。では、今度は罫線を表示して、それぞれの数値が実際の表示にどのように反映するかを見てみましょう。

�T.罫線の幅と色を指定する

table border"数値" と書き込むと、表の周囲について幅を指定すると同時に、セル間にも罫線を表示します。

↓の例はtable border"10"と指定していますが、ご覧の通り表の周囲のみが指定した幅となり、セル間の罫線は表示されますが幅には影響しません。フロントページではセルごとに罫線の太さや色を変える機能もあるのですが、このスクリプトは特にIEで表示した時のみ動作するもので、従ってNetscape や他のブラウザで表示した場合は反映されません。特にIEでのみ表示されれば良いという場合は別ですが、それ以外は外側と内側の枠線がバランスの取れる範囲内で罫線幅の数値を指定しておくのが無難だと思います。また、色はbordercolor="#003366" のように、bordercolor="#色番"で指定します。色は主にこうしてそれぞれに固有の番号で指定しますが、それについてはまた別の章で詳しく説明します。

以下は参考までにセルごとに枠線の幅や色を変えてみた例です。IE以外のブラウザではこのスクリプトは反映されませんので、上の表と全く同じ状態になっていると思いますが、IEで見ておられる方には上段のセルの枠線が違った色と幅で表示されているはずです。

スクリプトは以下の通りですが、緑でマークした部分が上段セルの指定部分です。幅をそれぞれ10、15、20と指定し、各セルごとに違う色が指定されているのがお分かり頂けるでしょうか。ちなみに下段は何も指定していませんので変化はしないままです。

<table border="10" cellpadding="0" cellspacing="0" bordercolor="#003366">...罫線の色と表の周囲を囲む線の幅を指定
<tr> 
<td style="border-style: solid; border-width: 10" bordercolor="#00FFFF">...セルを囲む枠線と色を指定 
<p align="center"><img border="0" src="../furby/shingao/furby123.jpg" width="100" height="100"></td> 
<td style="border-style: solid; border-width: 15" bordercolor="#F08080"> 
<p align="center"><img border="0" src="../furby/shingao/furby124.jpg" width="100" height="100"></td> 
<td style="border-style: solid; border-width: 20" bordercolor="#FFCC00"> 
<p align="center"><img border="0" src="../furby/shingao/furby125.jpg" width="100" height="100"></td> 
</tr> 
<tr> 
<td> 
<p align="center"><b><font face="ＭＳ Ｐ明朝">ゴリラ</font></b></td> 
<td> 
<p align="center"><font face="ＭＳ Ｐ明朝"><b>チーター</b></font></td> 
<td> 
<p align="center"><font face="ＭＳ Ｐ明朝"><b>Gストライプ</b></font></td> 
</tr> 
</table> 

各セルの枠線を変えるなどということは、テーブル本来の使い方からはまず必要ないことだと思いますが、IEではこういうことも可能だ、という程度に覚えておかれると良いと思います。実はスタイルシートを使えば、他のブラウザでも無理矢理ほぼ同じことが出来るのですが、それはまたスタイルシートの項目でお話しましょう。
　

★テーブルはいつでも四角★ IEで見ておられると、上の例で画像の上下にスペースが空いているセルがありますが、これは特に意図して設定しない限り、テーブルが常に全体として四角を維持する性質を持っているため、枠線幅の指定によって内容が一番大きくなっている右のセルの高さに、左２つが影響されているからです。このように、各セルに特に幅や高さを指定していなければ、各セルはその表の中で一番内容が大きいセルに影響されて、全体として四角を維持できる大きさに自動調節されます。

�U.セル内の画像や文字と罫線とのスペースを指定する

罫線と、中の画像や文字があまりに近づいていると見苦しいことがありますので、罫線と内容との間にスペースを空けるスクリプトを書き込んでみましょう。これはcellpadding="数値"で指定します。目的が表全体の統一感を出すためのものですから、この場合はセルごとの指定ということは出来ません。従って、<table>タグ内に書き込みますので、セル全ての内側にスペースが空きます。ちなみに下の例ではcellpadding="15"を指定しています。cellpadding="0" の場合と比較してみて下さい。

★cellpadding="15" の場合

★cellpadding="0" の場合

�V.セル間のスペースを指定する

今度はセルとセルの間にスペースを空けてみましょう。これはcellspacing="数値" で指定し、この場合も<table>タグ内に書き込みます。下の例では、cellspacing="20" と指定していますので、セルを囲む枠線の外側へ20ピクセルの間隔が開いています。

以上でお分かりのように、表は周囲を取り囲む四角の中に、独立した四角が内包されていると考えることが出来ます。ですから幅や色を指定する他にも、それぞれのセルの罫線の内側、外側について、スペースを指定することが出来るのですね。 目的や見栄えに合わせて調節してみて下さい。

★表の選択★ 作成した表全体をコピーしたり切り取ったりする場合、作成画面上でマウスをドラッグして表を選択すると、画面上では表全体が選択されているように見えても、スクリプト上では<tr>〜</tr>しか選択されておらず、従ってセルのみの選択となっていることがあります。この状態で貼り付け（ペースト）すると、画面のとんでもないところにわけの分からないセルが出現してしまいます。これを避けるためには、スクリプト上で<table>〜</table>までを選択するか、それぞれの作成ソフトのメニューから表全体を選択するようにして下さい。例えばフロントページですと、目的の表のどこかにカーソルを置いて、メニューから「表→選択→表」の順にポイントしてクリックします。

以上で罫線に関して、最低限の指定が出来るようになりました。以下ではHP作成ソフトでの指定手順をご紹介していますが、場合によってはけっこう煩雑な手順が必要になることがあります。そういう時はスクリプトに直接書き込んでしまう方がはるかに早いので、ぜひトライしてみて下さい。

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

１．罫線やスペースを設定したい表のどれかのセルにカーソルを置いて右クリックし、「表のプロパティ」を出します。

２．「レイアウト」から「セル内のスペース」、「セル間のスペース」、「罫線」から「サイズ」、「色」をそれぞれ指定します。

３．単独のセルについて色や幅を指定したい場合、目的のセルにカーソルを置いて右クリックし「セルのプロパティ」を出し、「罫線」から「色」を指定します。幅指定はここでは出来ませんので、更に「スタイル→書式設定→罫線」の順にクリックすれば「枠線とパターン」を指定する画面が出ます。

４．「枠線とパターン」の中央に「幅」という項目があるので、ここで指定して下さい。ちなみに色はここでも指定することが出来ます。既に「セルのプロパティ」で指定している場合は、「自動」のままにしておいて構いません。どちらも「自動」のままになっていれば、「表のプロパティ」で指定された色になります。これらの色指定が全て「自動」であれば、自動的に初期設定されている色で表示されます。ただし、単独のセルに関する幅や色の設定は、IEでしか指定した通りに表示されないことをお忘れなく。

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

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