ホームページを作ろうヨ!!

テーブル（表）とは、ページ内に画像やデータを並べるなどのレイアウトに用いる要素です。例えば...

このように、いくつもの写真を整列させたり、私がロードスターのページで使っているように数値を並べたりするのに使われるのが一般的ですが、データの整列に用いる以外にも、

・ページ内の希望の位置に画像とコメントを同時に配置したい場合

など、工夫次第で様々に利用することが出来ます。テーブルを自在に使いこなして、見やすくデザイン面でもすっきりとしたページ作りをするためには、まずテーブルの機能について理解しておく必要があるでしょう。そこで

に分けて、細かく説明してゆきましょう。ここでは基本中の基本ということで、IEやNetscape のような最もよく使われているブラウザなら、必ず表示に反映される機能を主に取り上げています。他にIEでだけ意図した通りに表示される機能などもありますが、それはまた別の章で研究してみることにします。

まずテーブルの構成要素には、横の並びである「列」、縦の並びである「行」があります。またそれぞれのワクは「セル」と呼ばれ、この「セル」内に内容が記述されてゆくことになります。

HP作成ソフトをご使用なら、新規テーブルの作成はHTMLを書かなくても可能ですが（こちら参照）、複雑になってくるとHTMLで調整しなくてはならない場合や、その方が早い場合も出てきます。そこでHTMLでは、表がどのように記述されているかを見てみましょう。

行

・

列.....

1.	2.	3.
4.	5.	6.

まず「ここからここまでがひとつの表である」ということを示すために<table> </table>というタグが記述されています。もちろん始めの<table>は表の始まりを表すので一番始めに、そして</table>は表の終わりを表すので一番終わりに書かれていることになります。そしてこの間に各セルの内容が記述されてゆくわけですが、記述の順序は一行をひとかたまりとして、左のセルから右のセルへ向かって順に、つまり上の表の番号順に書き込まれてゆきます。ですから、表の一行ごとに<tr> </tr>というタグでくくられ、各セル内容はこの<tr> </tr>の間に、セルごとに<td> </td>というタグでくくって挿入されています。

これでお分かりのように、「セル」に表示される内容は<td> </td>の間に記述されており、上の例でも分かる通りセル内の文字のフォントや大きさについては、通常のテキスト同様に表示される文字の前後で指定されています。つまりこの<td> </td>の間に文字でも画像でも通常と同じように記述してゆけば、それがブラウザではセル内に表示されるということです。

これでテーブルの簡単な構成についてはご理解頂けたことと思いますので、次の章からは、表全体やセルの細かい設定についてお話してゆきましょう。

１.メニューの「表」から、「挿入」→「表」の順でクリックして必要な列数、行数を入力する。

※表の位置や大きさなどは、ここの「レイアウト」で予め指定することも出来ますが、作成後も対象となる表のセル内にカーソルを置いて右クリックすれば、「表のプロパティ」から更に細かい設定をすることが出来ます。罫線や大きさ、配置などに関する詳細設定は、次章以降を参照して下さい。

２.ショートカット・メニューを押して、必要な列数、行数をポインタで指定する（但しこの場合は4行/5列まで）。

こうして作成された表のセル内に文字や画像を挿入する時も、カーソルを入力したいセル内に置いて、通常と同様に文字を書いたり、画像を挿入したりすることが出来ます。