Plastic HTML


[TABLE]


ホームページの全体的なバランスやデザインをもっと良くしようとした時に１番役にたつタグは[TABLE]です。普通は枠を使っての表や仕切に使いますが、その仕切を表示せずにバランスだけ整える事もできます。また、TABELに色を付ける事によってデザイン的にも使い方次第で相当凄いものも作れます。
TABLEタグについてまだあまりしらない方はTABLE基本法へどうぞ。


-TABLEタグで良いデザインを目指す時の基本的なタグの説明-

まず基本は＜TABLE＞です。
その＜TABLE＞に様々な追加をすることで色々な効果を望みます。
＜TABLE BORDER=0＞
BORDERはTABLEを仕切る枠の太さの事で、数値によって枠の太さが自由にかえられます。0にすれば枠は無くなり、数値を大きくすれば枠の大きい「額」の様なTABLEができあがります。
例
Plastic HTML[TABLE編]邪悪HTML
BBSホームページ作成法
メールを管理人に送るYoritomo
これはBORDERを0にしたTABLEです。HTMLソース
＜TABLE BORDER=0＞＜TR＞＜TD＞Plastic HTML[TABLE編]＜TD＞邪悪HTML
＜TR＞＜TD＞BBS＜TD＞ホームページ作成法
＜TR＞＜TD＞メールを管理人に送る＜TD＞Yoritomo
＜/TABLE＞


次はTABLEに色をつけます。この時に背景の色が重要になってきますのでバランスを考えてつけましょう。
＜TABLE BGCOLOR=ffd700＞
BGCOLORの数値で色を変える事ができます。また、枠毎にTABLEの色を変えたい場合は＜TD＞のところに
＜TD BGCOLOR=000088＞として下さい。
例
BBS邪悪HTML
Plastic HTMLHP作成講座
これはBGCOLORを66ccffにしたTABLEです。HTMLソース
＜TABLE BGCOLOR=66ccff＞
＜TR＞＜TD＞BBS＜TD＞邪悪HTML
＜TR＞＜TD＞Plastic HTML＜TD>HP作成講座
＜/TABLE＞
枠毎に色をつけた場合
BBS Plastic HTML
よりとも HP作成講座
HTMLソース
＜TABLE＞＜TR＞＜TD BGCOLOR=66ccff＞BBS
＜TD BGCOLOR=66ffcc＞Plastic HTML
＜TR＞＜TD BGCOLOR=ff8833＞よりとも
＜TD BGCOLOR=ffc720＞HP作成講座
＜/TABLE＞


TABLEと文字との間隔を調整する。

CELLPADDINGというものを使用します。
＜TABLE CELLPADDING=30＞
CELLPADDINGの数値が大きくなればなるほどTABLEと文字との間隔が広くなります。
例
Plastic HTML
HTMLソース
＜TABLE CELLPADDING=35 BGCOLOR=ccffff＞
＜TR＞＜TD＞Plastic HTML
＜/TABLE＞


次はTABLEの枠と枠をくっつけてしまう方法です。
CELLSPACINGという、枠と枠との間隔を調整するものですがこれの数値をゼロにするとTABLE同士がくっつきます。
＜TABLE CELLSPACING=0＞
これで縞模様等も作れます。
例
Plastic HTML 邪悪HTML
BBS HP作成
HTMLソース
＜TABLE CELLPADDING=20 CELLSPACING=0＞＜TR＞＜TD BGCOLOR=cc0000＞
＜FONT COLOR=000000＞Plastic HTML＜/FONT＞
＜TD BGCOLOR=aaff00＞邪悪HTML
＜TR＞＜TD BGCOLOR=aaff00＞BBS
＜TD BGCOLOR=cc0000＞
＜FONT COLOR=000000＞HP作成＜/FONT＞
＜/TABLE＞

例2
BBS 　
　Plastic HTML
HTMLソース
＜TABLE CELLPADDING=50 CELLSPACING=0＞
＜TR＞＜TD＞BBS
＜TD BGCOLOR=bbf0f0＞■＜TR＞＜TD BGCOLOR=bbf0f0＞■＜TD＞Plastic HTML
＜/TABLE＞

■のあるところに全角の空白をいれる事でなんの表示もない色だけのTABLEを作る事ができます。

[二重TABLEによる色付の枠]

TABLEを二つ連続で使う事によって色付の枠を作成することができます。この時に最初のTABLEのBGCOLORを枠に使いたい色にします。次のTABLEのBGCOLORを背景の色と同じものにします。
例

Plastic HTML

HTMLソース
＜TABLE BGCOLOR=70dbff＞＜TR＞＜TD＞
＜TABLE BGCOLOR=ffffff CELLPADDING=6＞＜TR＞＜TD＞
Plastic HTML
＜/TABLE＞＜/TABLE＞


TABLEを使用したサンプルトップページ

TABLEは使い方によって様々な効果を生みます。自分で色々試して極めれば凄いものができると思います。
質問等ありましたらメールか掲示板でお願いします。