見栄えを良くしよう

さっきのままではやっぱり見栄えがよくありません。
ここで使うと便利なのが<TABLE>タグです。
これはわしのHPにも広く使われています。
ってか、これが気に入ってるので使いまくってます(笑)
このタグを使うとHP内になんて言うんだろ、枠みたいなのが出来ます。
このHTML講座で説明が書かれているココ、
この白い部分も<TABLE>タグで作っています。
とりあえず、習うより慣れろです。
次のタグを見てください。

<TABLE>
これがテーブルの開始タグです。
これ入れないとテーブルが作れません(笑)

<TR>
これは<TABLE>タグの次に入れます。
この<TR>は行を表しています。
これで横1列が決まる訳ですね、はい。

<TD>
これは<TR>タグの次に入れます。
この<TD>は1つのまとまりを表します。
ん〜〜〜・・・なんて言うんだろ・・・。
<TR>で横1列を決めたら次にそこに何個のマスが入るか?
そんなんを決めるタグです。
ってか、説明するよりまず見ましょう(笑)
とりあえず、今説明した3個のタグはきちんと閉じなければいけません。
閉じ忘れたり、タグミスをするとそれより下が全部変になります。

<TABLE>
<TR>
<TD>
こんな感じ?<BR>
</TD>
</TR>
</TABLE>

まぁ、ちゃんと分けて書くとこうなります。
タグを閉じる時は最後に開始したタグから閉じていきます。
まぁ、これを記入すると、

こんな感じ?

こんなんになります。
見やすい様に中央にやっています。
ってか、これじゃ<CENTER>と変わらないですね。
では、とりあえず、これの応用?みたいなのを見ましょう。

BORDER=1
これは<TABLE>タグの中に入ります。
上では使っていないので見えませんが、テーブルには枠があります。
その枠の太さをここで指定する訳です。
指定すると、

こんな感じ?

に、なります。
これが本来の<TABLE>タグです。
まぁ、白地に白い枠なので見えにくいとは思いますが(笑)
では、さっき説明した<TR><TD>を増やしてみましょう。
行とマスが増えます。
まぁ、見てくださいな。
とりあえず、最初にタグを見せますね。

<TABLE BORDER=1>
<TR><TD>
ここが行1のマス1
</TD><TD>
ここが行1のマス2
</TD></TR>
<TR><TD>
ここが行2のマス1
</TD><TD>
ここが行2のマス1
</TD></TR></TABLE>

こんなタグになります。
とりあえず、さっきみたいに1個ずつズラして書くと長くなるのでまとめてます。
本来わしはこんな感じでタグを記入しています。
タグは2個繋げて書こうが、3個繋げて書こうが関係ありません。
最初から最後まで改行しないで書いてもOKですよ(笑)
では、とりあえず、このタグを実際入力するとどう見えるか見てみましょう。

ここが行1のマス1
ここが行1のマス2
ここが行2のマス1
ここが行2のマス2

こんな感じになりますよ。
またもや白地に白枠で見えにくいですが勘弁してください(笑)
とりあえず、<TABLE>タグの基礎はわかってもらえましたか?
マスをもう1個増やしたいなら<TD></TD>を増やせばいいだけです。
これを使うとですね、前に作ったメニューがまとめられます。
枠は見えても見えなくても結構です。
とりあえず上のタグをちょこっとイジるとさっきよりまとまりが出ます。

ここにタグを書いて見本を見せるとちょっとデカくなりすぎますので、
とりあえず別ページを作成してそっちにリンクさせますね。

1、枠無し
2、枠アリ

とりあえず、両方見た方がわかりやすいと思いますよ。
ただ、枠が見えてるのと見えてないのとの違いですが、後々結構変わりますので(笑)

ここではこれで終わりです。
次からは今までに出たのにちょこっとプラスして色々と応用していきましょう。
もうちょっと高みを目指しましょう。



応用編