| テーブルを作ろう！（基本編） |
| |
Webページを作っていくうえで、非常に重要なタグにTABLE タグがあります。元々は表を簡単に作るためのタグですが、複雑なレイアウトを作っていく上では必要不可欠なタグです。TABLE タグを上手く使えるかどうかが、Webデザイナーの腕の見せどころと言っても過言ではありません。
難しく考えず、簡単なところから徐々に入っていきます。基本要素は、<TABLE> <TR> <TD> です。全てに終タグが付きます。
|
| Sample |
<HTML>
<HEAD>
<TITLE>テーブルを作る</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>テーブルを作ってみよう</TD>
</TR>
</TABLE>
</BODY>
</HTML> |
|
| 38.html |
これだけでは、ただ単に文字の周りに枠が付いただけです。（上記サンプルの場合<TR>と<TD>は省略してもかまいません）
これに属性を付けていくわけですが、基本属性は以下の3つです。値が”０”でも、常に指定するようにしましょう。
- <BORDER>
- 外枠の太さを指定します。０を指定すると、枠線は表示されません。
- <CELLSPACING>
- 表全ての線の太さを指定します。デフォルトは２です。上記サンプルでは、この属性を指定していないので、デフォルトの２で表示されています。線が太いなぁ？と感じた方もいらっしゃるのでは？？
- <CELLPADDING>
- 枠線と枠内のテキストのマージンを指定します。線と文字を離して見やすくしましょう。デフォルトは１です。
|
| Sample |
<HTML>
<HEAD>
<TITLE>テーブルを作る２</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="5" CELLSPACING="5"
CELLPADDING="10">
<TR>
<TD>テーブルを作ってみよう</TD>
</TR>
<BR>
<TABLE BORDER="1" CELLSPACING="0"
CELLPADDING="0">
<TR>
<TD>テーブルを作ってみよう</TD>
</TR>
</TABLE>
</TABLE>
</BODY>
</HTML> |
|
| 39.html |
上のサンプルは極端な例です。<BORDER>と<CELLSPACING>の指定で、見え方がかなり変わると思います。
上のように、セルが一つだと、まだまだ表を作っているという感覚はないですね。表と言えば、何列も何行もあって、セルがいっぱいあるものだと思います。TABLEでも、何行も何列も作成可能です。ちなみに、列とか、行とか、セルというのは、下の画像で確認してください。 |
 |
| 上の例では、エクセルを参考に説明しました。では、実際に TABLE でこのような表を作ってみましょう。一番最初に出てきた<TR>と<TD>に注目してください。 |
| Sample |
<HTML>
<HEAD>
<TITLE>テーブルを作る３</TITLE>
</HEAD>
<BODY>
３行３列の表を作ろう！<BR>
<TABLE BORDER="1"
CELLSPACING="0" CELLPADDING="5">
<TR>
<TD>１行１列</TD>
<TD>１行２列</TD>
<TD>１行３列</TD>
</TR>
<TR>
<TD>２行１列</TD>
<TD>２行２列</TD>
<TD>２行３列</TD>
</TR>
<TR>
<TD>３行１列</TD>
<TD>３行２列</TD>
<TD>３行３列</TD>
</TR>
</TABLE>
</TABLE>
</BODY>
</HTML>
|
|
| 40.html |
<TR>〜</TR>で行を作ります。
<TD>〜</TD>で列を作ります。 |
 |
TABLEは奥の深いタグです。元々、軍事利用のために作られたインターネットの世界では、文字が見れれば良いという考えだったので、ごく少数のタグとテキストだけで十分でした。一般に開放され、現在のように誰もが見れる環境になり、Webサイトは絶対的な広告・告知手段として広く利用されるようになりました。もし、文字だけの羅列で終わっていれば、今のようにみんなが見るものまでは発展しなかったと思います。
Webサイトを作る側も、楽しく見てもらいたいし、作って楽しいものを作りたいと常に思い、考えています。単なる表を構成するタグ、TABLEをどんどん変形させて見やすいものを作る。TABLEの中にTABLEを入れたらどーなるんだろう？なんていう発送が、今のWebページを生んだんだと思います。TABLEの章はまだまだ続きます。Web サイトにとってのレイアウトの救世主！とまで言われるTABLEを使いこなすことが、見やすいページ作りの基本です。
<BORDER>を”０”にすると、表の感覚がなくなりますよね？表と言えば、罫線で区切られて、見やすいように整列されているものです。Web上のレイアウトでは、ワープロソフトや、本を作るDTPソフト、illustrator等のグラフィックソフトのように、自由に書きたい位置に文字や画像を置くのは困難です。ところで、みなさんが見ているWebページは、自在にテキストの位置や、画像の位置を配置しています。TABLEを使いこなすとは、このような事を指しています。
多くのWebページは全体をTABLEで囲い、その中にも多数のTABLEが多く配置されています。レイアウトとして使うTABLEでは大概BORDERは０に設定されています。枠があったら、逆に変ですよね？
みなさんがこれからページを作っていく上では、既存のページを参考にするのが一番です。優秀なWebデザイナーがどのようにTABLEを使い、構成しているか良く見てみましょう。気に入ったページを見つけたら、ブラウザの画面上で右クリック→「ソースの表示」を選べばHTMLファイルが表示されます。そのファイルを任意な場所にHTML
ファイルとして保存して、BORDERを１に変更して見てみましょう。あらゆるところにTABLEが使われている事がわかるはずです。（ファイル→「名前を付けて保存」でも可）
セルの色を変えて表示したり、見せる方法は色々あります。慣れてきたらページを見るだけでどのような構成をしているか分かるようになってきますよ。 |
| |
次は、<WIDTH>属性です。
<WIDTH>属性は、横幅の指定に使います。第５章のイメージの幅の指定でも出てきました。テーブルの横幅を指定します。
<HEIGHT>属性も使用可能ですが、あまり薦められない属性に指定されているので、使用しない方が無難です。使うのであれば、<HEIGHT="1000">のように使ってください。どうしても枠の高さを確保したい時には有効な属性です。
|
| Sample |
<HTML>
<HEAD>
<TITLE>テーブルの幅を指定</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0"
CELLPADDING="10" WIDTH="500">
<TR>
<TD>幅を500ピクセル</TD>
<TD>テーブルの幅だけに指定</TD>
</TR>
</TABLE>
<TABLE BORDER="1" CELLSPACING="0"
CELLPADDING="10" WIDTH="500">
<TR>
<TD WIDTH="150">セルにも</TD>
<TD WIDTH="350">幅を指定しました</TD>
</TR>
</TABLE>
</BODY>
</HTML> |
|
| 41.html |
| サンプルを見て下さい。上のテーブルは、<TD>に<WIDTH>属性を設定していません。ほぼ真ん中で２つに分かれているようにも見えますが、若干右のセルの方が広く感じます。<TD>に指定しない場合、ブラウザが適当にテキストの量などを判断して、分割します。極端にしてみると…。 |
| Sample |
<HTML>
<HEAD>
<TITLE>テーブルの幅を指定</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0"
CELLPADDING="10" WIDTH="500">
<TR>
<TD>幅は</TD>
<TD>テキストの量によって、勝手に広さを変えて表示します。綺麗に分割するには、セルにも幅を指定しましょう。</TD>
</TR>
</TABLE>
<br><br>
<TABLE BORDER="1" CELLSPACING="0"
CELLPADDING="10" WIDTH="500">
<TR>
<TD WIDTH="250">幅は</TD>
<TD WIDTH="250">テキストの量によって、勝手に広さを変えて表示します。綺麗に分割するには、セルにも幅を指定しましょう。</TD>
</TR>
</TABLE>
真ん中から分割されてますね？
</BODY>
</HTML> |
|
| 41_2.html |
