コタ＆こたplusサチイブ　お気楽DAYS

ＨＴＭＬ簡単講座３時間目

※以下のタグのカッコ＜＞は、タグ変化しないよう全部全角になってます。
半角で表示されるようにする方法もあるんですけど、かなり面倒でこたっぺ☆の脳みそでは混乱するんで（笑）

お手数お掛けしてすいませんが、使うとき、全部半角に変えてくださいね。


さぁ、やっと３時間目です。

今度は簡単なテーブルをいれてみましょう。
といっても、ご飯を食べたり、テーブルクロスをかける
アレじゃありません(-_-;)／(+_+;)＼(-_-;)バシバシッ！！

表のことを「テーブル」といいます。
このテーブル、とっても便利なんですね～。

まず、基本的なものから。
テーブルを表示するには ＜TABLE＞＜/TABLE＞ のタグをつかいます。
枠線は、「border=""」を一緒に使って調節します。
「""」の値が大きいほど、枠線が太くなります。
しか～し、これだけでは機能しません。
TABLEタグの間に ＜TR＞ と ＜TD＞ のタグをいれます。
「TR」というのは、１段をあらわします。（ヨコ）
「TD」は、１つの列を表します。（タテ）

とりあえずやってみましょ～。
基本はコレ↓
＜TABLE border="1"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒


これの「border=""」の数字をあげていくと

＜TABLE border="1"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

＜TABLE border="2"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

＜TABLE border="3"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒
＜TABLE border="4"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒
＜TABLE border="5"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒
＜TABLE border="6"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒
＜TABLE border="7"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒
＜TABLE border="8"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒
＜TABLE border="9"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒
＜TABLE border="10"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

このとおり～。

テーブルを真ん中にもってきましょ～。
＜CENTER＞＜TABLE border="1"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞＜/CENTER＞ ⇒

テーブル

では、右に寄せてみましょう。寄せるには、「align=""」というタグを使います。
＜TABLE border="1" align="right"＞＜TR＞＜TD＞ テーブル ＜/TD＞＜/TR＞＜/TABLE＞＜/CENTER＞ ⇒


この「align」は、上下左右の位置を設定するタグです。
Align="right"なら、右寄せ
Align="left"なら、左寄せ
Align="center"なら中央揃え



今度は複数の枠を作ってみます。
表なんかを作るのに便利ですよね。
上にも書いたように、「TR」というのは、横段を、「TD」は、縦列を表します。
縦に３段、横に１列の枠のある表を作りたいときは、「TR」タグを３回使います。
＜TABLE border="1"＞
＜TR＞＜TD＞ うふっ♪ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ えへっ♪ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ おほっ♪ ＜/TD＞＜/TR＞
＜/TABLE＞
　　　　　　　↓

うふっ♪
えへっ♪
おほっ♪

と見事３段の表になりました。

お分かりでしょうか？？？


今度は、横３列、縦１段の表ならどうでしょう。 そう、「TD」を３回使うんですね～。 ただ、この「TD」は、必ず「TR」で挟んで使います。

＜TABLE border="1"＞
＜TR＞＜TD＞ あら♪ ＜/TD＞＜TD＞ 私ったら♪ ＜/TD＞＜TD＞ イヤン♪ ＜/TD＞＜/TR＞
＜/TABLE＞
　　　　　　　↓

あら♪

私ったら♪

イヤン♪

となるわけです、ハイ。 つまり、 ＜TR＞＜/TR＞ （１段タグ）の間に、作りたい列の数だけ ＜TD＞＜/TD＞ をいれればいいんですね。


ではでは、これを合わせて縦３段、横３列の表を作ってみましょう。

＜TABLE border="1"＞
＜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="3"＞
＜TR＞＜TD＞ リンク先Ａ ＜/TD＞＜TD＞ リンクＡだよ～ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ リンク先Ｂ ＜/TD＞＜TD＞ リンクＢだよ～ ＜/TD＞＜TR＞
＜TR＞＜TD＞ リンク先Ｃ ＜/TD＞＜TD＞ リンクＣだよ～ ＜/TD＞＜/TR＞
＜/TABLE＞
　　　　　　↓

リンク先Ａ	リンクＡだよ～
リンク先Ｂ	リンクＢだよ～
リンク先Ｃ	リンクＣだよ～

各ブロックに、バナーなんかを貼りつければ、立派なリンク集です。



では、このテーブルに色をつけたいときはどうでしょう。

そんなときは、「BGCOLOR=」を使います、こんな風に。 ＜TABLE BGCOLOR=#ffff00 border="1"＞＜TR＞＜TD＞ イエロー ＜/TD＞＜/TR＞＜/TABLE＞ ⇒


「BGCOLOR」は、「Back Ground Color」のコト。


んじゃぁ、枠線に色をつけるときは？

そんなときは、「bordercolor=""」を使います。
わかりやすいように、線を太くしてみます。
＜TABLE border="4" bordercolor="#ffff00"＞＜TR＞＜TD＞ イエロー ＜/TD＞＜/TR＞＜/TABLE＞ ⇒



上のリンクの表に色をつけてみましょう。

＜TABLE border="3" bordercolor="#00ffcc"＞
＜TR＞＜TD＞ リンク先Ａ ＜/TD＞＜TD＞ リンクＡだよ～ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ リンク先Ｂ ＜/TD＞＜TD＞ リンクＢだよ～ ＜/TD＞＜TR＞
＜TR＞＜TD＞ リンク先Ｃ ＜/TD＞＜TD＞ リンクＣだよ～ ＜/TD＞＜/TR＞
＜/TABLE＞
　　　　　　↓

リンク先Ａ	リンクＡだよ～
リンク先Ｂ	リンクＢだよ～
リンク先Ｃ	リンクＣだよ～

４時間目へ続く・・・


ＨＴＭＬ簡単講座１時間目へ

ＨＴＭＬ簡単講座２時間目へ

ＨＴＭＬ簡単講座４時間目へ

ＨＴＭＬ簡単講座５時間目へ