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

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

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

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


お昼ご飯まであと少し(笑)４時間目です。

でも、ここから かなり 難しくというか、ややこしくなります。（脅し（笑））

ここで、みなさんにしっかりと頭にいれておいて欲しいのが、基本です。
１　タグは必ず＜☆＞ ＜/☆＞ このように＜/＞で閉めること。
２　タグの閉める順番は、タグをつけた順番の逆。＜１＞＜２＞＜３＞＜/３＞＜/２＞＜/１＞
３　タグは必ず 半角英数字 で書くこと。
４　＜TR＞＜/TR＞は、一つの行、＜TD＞＜/TD＞は、一つの列をあらわす。


今度はテーブルを応用してみましょう。

まず、この３つのテーブルを比べてみてください。





どうです？長さが違うでしょ？
これは、長さを設定したからです。
普通、長さを設定しないと、ＨＰの幅や、１行の文字数に合わせた枠ができあがります。
でも、このように長さを変えることもできるんですね～

では、実際変えてみましょ。
長さを調節するタグは「width="☆"」です。
この「"☆"」には、 ピクセル の数値か、 ％ （パーセント）が入ります。
ピクセルとは、写真や画像なんかでも使われているサイズをあらわす単位です。
パーセントは、ＨＰのページの幅に対するテーブルの長さのパーセンテージです。

ピクセルで設定する場合です。
＜TABLE border="3" width="400"＞
＜TR＞＜TD＞ ボトルコーヒーもいいねぇ ＜/TD＞＜/TR＞＜/TABLE＞
⇒

こうなります。
次にパーセントでやってみます。

＜TABLE border="3" width="80%"＞
＜TR＞＜TD＞ ボトルコーヒーもいいねぇ ＜/TD＞＜/TR＞＜/TABLE＞
⇒

上は、 ピクセル であらわした４００ピクセルの長さ。
下は、このページの幅の８０％の長さ。

ピクセルは、わかりにくいので、パーセントのほうが使いやすいかもしれないね。


次行ってみよ～

次のテーブルをご覧下さい。



これは、当ＨＰの『竜馬におまかせ！』ページから抜粋したテーブルです。
このように、一部のテーブルのセル（ひとつの枠）を統合させて表示したい場合は、
このようにします。さっきのピクセルも使ってみましょう。

＜TABLE border="1" width="300"＞
＜TR＞＜TD rowSpan=2＞ １ ＜/TD＞＜TD＞ ２ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

この「rowSpan=2」の２の数字は、統合するセルの数です。
右側の段を増やしたいときは、ここに作りたい段数をいれ、
＜TR＞＜TD＞のタグで段を増やしていきます。

＜TABLE border="1" width="300"＞
＜TR＞＜TD rowSpan=3＞ １ ＜/TD＞＜TD＞ ２ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ３ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ４ ＜/TD＞＜/TR＞
＜/TABLE＞ ⇒

また、「rowSpan=2」を「colSpan=2」に変えれば、このようにもできます。

＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan=2＞ １ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ２ ＜/TD＞＜TD＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan=3＞ １ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ２ ＜/TD＞＜TD＞ ３ ＜/TD＞＜TD＞ ４ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒



では、さらに応用です。


＜TABLE border="1" width="300"＞
＜TR＞＜TD rowSpan=2＞ １ ＜/TD＞＜TD＞ ２ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒
このテーブルの１の欄の長さを変えてみましょう。
これも、ピクセルか％で設定します。
ただし、％の場合は、今度はページの幅に対して、ではなく、このテーブル自体の幅に対しての数値です。
＜TABLE border="1" width="300"(このテーブル自体の長さ）＞
＜TR＞＜TD rowSpan=2 width="100"（左側のセルの幅）＞ １ ＜/TD＞＜TD＞ ２ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒

＜TABLE border="1" width="80%"(ページに対するこのテーブル自体の長さ）＞
＜TR＞＜TD rowSpan=2 width="20%"（左側のセルの幅）＞ １ ＜/TD＞＜TD＞ ２ ＜/TD＞＜/TR＞
＜TR＞＜TD＞ ３ ＜/TD＞＜/TR＞＜/TABLE＞ ⇒



これを使って


こんなこともできますね。



では、続きは午後の５時間目に～。


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

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

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

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