テーブルの基本

• ページを構成する上で、かなり役に立つのがテーブル。
  かなり・・・というよりは、ほとんど使っていますが。ｗ
  ほとんどのページは、テーブルで構成しているのが現実ですね。
  いろいろな使い道があるので、ぜひ覚えておいてもらいたいのがこれです。
  とりあえず、基礎を覚えてしまえば、あとは比較的楽だと思います。

●基本テーブルタグ
　　　　<TABLE>
　　　 <TR><TD>ここがテーブルの中身</TD></TR>
　　　 </TABLE>

●上のタグのブラウザ表示

ここがテーブルの中身

※これだけなんですけど、これがかなりの優れモノなんですよ。ｗ
※項目を横に増やしたい時は<TD></TD>を追加して、縦に増やしたい時は<TR>から
　　</TR>の間を増やしてやるといいわけです。
※このＨＴＭＬコーナーの右画面の基礎はテーブルで構成されているんですよ。
　 もし、わからなければソースを見てくださいね。
　 あんまり複雑なものを最初から見ちゃうと、逆に頭がパニックっちゃうかな？ｗ

●ちょっと進化した例
　　　　<TABLE>
　　　　<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 border="x" cellspacing="y"> （ｘ・ｙ　ともにピクセル指定）
●実際の指定例
　　�@<TABLE border="5" cellspacing="10">
　　　 <TR><TD>ここが中身です。</TD></TR>
       </TABLE>
　　�A<TABLE border="1" cellspacing="5">
　　　 <TR><TD>ここが中身です。</TD></TR>
　　　 </TABLE>
　  �B<TABLE border="1" cellspacing="0">
　　　 <TR><TD>ここが中身です。</TD></TR>
　　　 </TABLE>
●上の指定の表示

�@

ここが中身です。

�A

ここが中身です。

�B

ここが中身です。

　
※どうですか？同じテーブルでも指定の差でこんなに違ってくるんです。
※なかなかおもしろい！と思ったら早速実践してみてください。鉄は熱いうちに打て！この精神でいきましょう！ｗｗ

●テーブルのサイズ指定
　　<TABLE width="x" height="y">　（ｘ、ｙはピクセルか％で指定）
　　
●実際の指定例
　　　　<TABLE width="200" height="50">
　　　　<TR><TD>セル</TD><TD>セル</TD></TR>
　　　　</TABLE>

●上の指定の表示

セル セル

　
※わかりやすく表示してありますので、勘違いのないようにしてくださいね。
※％での指定の場合は、若干難しいかも知れないですけど、やってみてください。
※セルと書いていますが、中身の表示部分をセルと呼びます。（よく使われます）

●セル枠とセル内の文字の間隔の指定
　　<TABLE cellpadding="n">　（ｎはピクセルで指定）

●実際の指定例
　　�@<TABLE cellpadding="0">
　　　 <TR><TD>この文字は左にピッタリくっつくよね。</TD></TR>
　　　 </TABLE>
　　�A<TABLE cellpadding="10">
　　　 <TR><TD>この文字は10ピクセルはなれてるよ。</TD></TR>
　　　 </TABLE>

●上の指定の表示

�@	この文字は左にピッタリくっつくよね。
�A	この文字は枠から10ピクセルはなれてるよ。

　
※見てわかる通り、明らかに�Aのほうが見やすいですよね。（この指定は大事です。）
※paddingを変えるとセル自体の幅や高さも変化するということを覚えておいてくださいね。