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

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

※以下のタグのカッコ＜＞は、タグ変化しないよう全部全角になってます。
毎度毎度お手数お掛けしてすいませんが、使うとき、全部半角に変えてくださいね。


では、そろそろ午後の授業に行きましょう（笑） 久々ＵＰの５時間目です。

テーブルの難しさに頭を抱えているでしょうが、 テーブルは本当に利用価値のある便利なタグだということがわかれば、 「もう使わずにはいられないわっっ（涙目）」と思わずにいられないでしょう（ウソ） ４時間目より さらに ややこしくなりますが、前回同様、基本ルールを覚えていれば、 大丈夫・・・・・かなぁ・・・（笑）

【基本ルール】
１　タグは必ず＜☆＞ ＜/☆＞ このように＜/＞で閉めること。
２　タグの閉める順番は、タグをつけた順番の逆。＜１＞＜２＞＜３＞＜/３＞＜/２＞＜/１＞
３　タグは必ず 半角英数字 で書くこと。
４　＜TR＞＜/TR＞は、一つの行、＜TD＞＜/TD＞は、一つの列をあらわすことを覚えておきましょう。


テーブルの応用の続きです。
こたっぺ☆もかなり混乱してきているので、間違ってたらゴメンなさい。（ゴメンじゃ済まないが）
４時間目で使ったテーブルをそのまま使ってみます。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2"＞ １ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ２ ＜/TD＞＜TD＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒


★セルの中の文字のバランスをよくしたい★

また、ちょっと文字が全部左に寄っちゃって、バランス悪いなぁって思ったら、
文字をそれぞれのセルの 真ん中 に持ってくることもできます。
「真ん中」に持ってくるということはぁ～～～～？

そうです！「center」のタグです。
そして、３時間目の真ん中らへんにあった位置を設定するタグ「Align＝""」を使います。

＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" BGCOLOR="#99ffff" Align="center" ＞ １ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ２ ＜/TD＞＜TD＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

もし、「１」を右に寄せたいときは、

＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" BGCOLOR="#99ffff" Align="right" ＞ １ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ２ ＜/TD＞＜TD＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

１だけでなく、２と３も真ん中寄せにしてみましょう。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" BGCOLOR="#99ffff" Align="center" ＞ １ ＜/TD＞＜/TR＞
＜TR＞＜TD Align="center" ＞ ＜font color="red"＞ ２ ＜/TD＞＜TD Align="center" ＞ ＜font color="red"＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒


★セルの幅（縦幅）を変えたい★

上のテーブルの１の枠の縦幅を変えてみましょう。
高さを設定するタグは、『height=""』です。
では、高さを７０ピクセルに設定してみます。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" Align="center"　 height="70" ＞ １ ＜/TD＞＜/TR＞
＜TR＞＜TD Align="center"＞ ２ ＜/TD＞＜TD Align="center"＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

どうですか～？これが７０ピクセルの高さです。


★セルの中の文字に色をつけたい★

では、一番上のセル内の文字に色を付けてみましょう。
もちろん、使うタグは、＜font color="色"＞色を変えたい文字＜/font＞。

セルの「１」という文字を赤にしたい場合。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" Align="center"＞ ＜font color="red"＞ １ ＜/font＞ ＜/TD＞＜/TR＞
＜TR＞＜TD Align="center"＞ ２ ＜/TD＞＜TD Align="center"＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

こうします。 普通に文字に色を付けるのと同じなので、簡単でしょ？

★セルに字に色をつけたい★

この一つのセルに色をつけることも出来ます。
セルに色をつけたい場合は、その色をつけたい＜TD＞の枠内に色指定をします。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" Align="center" BGCOLOR="#99ffff" ＞ ＜font color="red"＞ １ ＜/font＞ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ２ ＜/TD＞＜TD＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

これを活用すれば、
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" Align="center" BGCOLOR="#99ffff" ＞ ＜font color="red"＞ １ ＜/font＞ ＜/TD＞＜/TR＞
＜TR＞＜TD Align="center" BGCOLOR="#ffff66" ＞ ＜font color="#00cc00"＞ ２ ＜/font＞ ＜/TD＞＜TD Align="center" BGCOLOR="#ffccff" ＞ ＜font color="#3333ff"＞ ３ ＜/font＞ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

こんなキバツなテーブルもできちゃいます（笑）

枠幅なくせば、↓こういったテーブルも出来ます。

＜TABLE border="0" width="300"＞
＜TR＞＜TD colSpan="2" Align="center" BGCOLOR="#99ffff" ＞ ＜font color="red"＞ １ ＜/font＞ ＜/TD＞＜/TR＞
＜TR＞＜TD Align="center" BGCOLOR="#ffff66" ＞ ＜font color="#00cc00"＞ ２ ＜/font＞ ＜/TD＞＜TD Align="center" BGCOLOR="#ffff66" ＞ ＜font color="#00cc00"＞ ３ ＜/font＞ ＜/TD＞＜/TR＞
＜TR＞＜TD Align="center" BGCOLOR="#ffff66" ＞ ＜font color="#00cc00"＞ ４ ＜/font＞ ＜/TD＞＜TD Align="center" BGCOLOR="#ffff66" ＞ ＜font color="#00cc00"＞ ５ ＜/font＞ ＜/TD＞＜/TR＞
＜TR＞＜TD Align="center" BGCOLOR="#ffff66" ＞ ＜font color="#00cc00"＞ ６ ＜/font＞ ＜/TD＞＜TD Align="center" BGCOLOR="#ffff66" ＞ ＜font color="#00cc00"＞ ７ ＜/font＞ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒


今までのをふまえて、こんなテーブルができますよ。

＜TABLE border="0" （＝枠なし） width="300"＞
＜TR＞＜TD colSpan="2" Align="center" ＞ ＜B＞ （＝太字） こたっぺ☆の好き嫌い ＜/B＞ ＜/TD＞＜/TR＞
＜TR＞＜TD height="30" Align="center" width="150" （＝テーブル幅300の半分） BGCOLOR="#ffccff" ＞ 好き ＜/TD＞＜TD height="30" Align="center" BGCOLOR="#99ffff" ＞ 嫌い ＜/TD＞＜/TR＞
＜TR＞＜TD Align="center"＞ほとんどの動物 ＜/TD＞＜TD Align="center" ＞ 虫とか ＜/TD＞＜/TR＞ ＜TR＞＜TD Align="center"＞豆腐 ＜/TD＞＜TD Align="center" ＞ 納豆 ＜/TD＞＜/TR＞ ＜TR＞＜TD Align="center"＞映画 ＜/TD＞＜TD Align="center" ＞ 怖い映画 ＜/TD＞＜/TR＞＜TR＞＜TD Align="center"＞チキン ＜/TD＞＜TD Align="center" ＞ レバー ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

こたっぺ☆の好き嫌い

好き

嫌い

ほとんどの動物

虫とか

豆腐

納豆

映画

怖い映画

チキン

レバー

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

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

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

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