ＨＴＭＬ簡単講座５時間目
※以下のタグのカッコ＜＞は、タグ変化しないよう全部全角になってます。毎度毎度お手数お掛けしてすいませんが、使うとき、全部半角に変えてくださいね。
では、そろそろ午後の授業に行きましょう（笑） 久々ＵＰの５時間目です。
テーブルの難しさに頭を抱えているでしょうが、 テーブルは本当に利用価値のある便利なタグだということがわかれば、 「もう使わずにはいられないわっっ（涙目）」と思わずにいられないでしょう（ウソ） ４時間目より さらに ややこしくなりますが、前回同様、基本ルールを覚えていれば、 大丈夫・・・・・かなぁ・・・（笑）
【基本ルール】
１ タグは必ず＜☆＞ ＜/☆＞ このように＜/＞で閉めること。
２ タグの閉める順番は、タグをつけた順番の逆。＜１＞＜２＞＜３＞＜/３＞＜/２＞＜/１＞
３ タグは必ず 半角英数字 で書くこと。
４ ＜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＞ ⇒
こたっぺ☆の好き嫌い
好き
嫌い
ほとんどの動物
虫とか
豆腐
納豆
映画
怖い映画
チキン
レバー
ＨＴＭＬ簡単講座１時間目へ
ＨＴＭＬ簡単講座２時間目へ
ＨＴＭＬ簡単講座３時間目へ
ＨＴＭＬ簡単講座４時間目へ
© Rakuten Group, Inc.
