テーブル作成法 まとめと応用
テーブルタグや、カラーコード（カラーネーム）を色々と組合す事によって、自分だけのオリジナルテーブルを作る事ができるよ〜！！
ココでは、ほんのちょっとテーブル作成の応用を紹介！
ちょっと高度(?)な技だけど、例えばアイコンをテーブルタグを使ってラインに見せたり、ライン画像の長さを自由自在に変えたりも出来るよ。
←素材ハナコチャ
例えば、上の画像をラインにしたい場合、
まずは画像の上で右クリックをして、画像の横幅と高さを調べる。
上の画像の場合は横幅が7ピクセル。高さも7ピクセルです。
この↑ラインを短くしたい場合も、アイコンをラインに見せる時と同じ。
このラインも高さが 7ピクセルなので HEIGHT="7" に指定します。
アイコンをラインにする時の応用で、アイコンを使い、画像テーブルを作る事も出来ます。
また上のアイコンを使って、テーブルを作ってみましょう。
ココでは、ほんのちょっとテーブル作成の応用を紹介！
| <TABLE BORDER BORDERCOLOR="#FFC0CB"
BGCOLOR="skyblue"> <TR> <TD>１</TD> <TD>２</TD> <TD>３</TD> </TR> <TR> <TD>４</TD> <TD>５</TD> <TD>６</TD> </TR> </TABLE> |
背景色をスカイブルーに指定しました。 左のように書いたのを表示させるとこうなります。
| ||||||||||||
| <TABLE BORDER=0 BGCOLOR="skyblue">
<TR BGCOLOR="white"> <TD>１</TD> <TD>２</TD> <TD>３</TD> </TR> <TR BGCOLOR="white"> <TD>４</TD> <TD>５</TD> <TD>６</TD> </TR> </TABLE> |
テーブル全体の背景色をスカイブルーに １列目と２列目の背景色を白に 指定しました。 左のように書いたのを表示させるとこうなります。
| ||||||||||||
| <TABLE BORDER=0 BGCOLOR="#FFA500"
CELLPADDING="5" WIDTH="200" > <TR BGCOLOR="#FFFF00"> <TD>１</TD> <TD>２</TD> <TD>３</TD> </TR> <TR BGCOLOR="white"> <TD>４</TD> <TD>５</TD> <TD>６</TD> </TR> </TABLE> |
テーブル全体の背景色をオレンジに 枠と中身の間隔を５に テーブルの大きさを２００ピクセルに 上の段の１列の背景色を黄色に 下の段の一列の背景色を白に 指定しました。 ちょっとややこしいかな？？ 左のように書いたのを表示させるとこうなります。
ここでは、BORDER=0 を書いてますが、０の場合は書かなくてもOK！ | ||||||||||||
| <TABLE CELLSPACING="5" CELLPADDING="5"
BGCOLOR="#FFA500" WIDTH="200" > <TR BGCOLOR="#FFFF00"> <TD>１</TD> <TD>２</TD> </TR> <TR BGCOLOR="white"> <TD>３</TD> <TD>４</TD> </TR> </TABLE> |
テーブル全体の背景色をオレンジに 枠と中身の間隔を５に テーブルの大きさを２００ピクセルに 上の段の１列の背景色を黄色に 下の段の一列の背景色を白に 指定しました。 上のテーブルと同じようなカンジだね 左のように書いたのを表示させるとこうなります。
| ||||||||||||
| <TABLE BORDER BORDERCOLOR="#FFC0CB"
BGCOLOR="#FF00FF"> <TR> <TD> <TABLE BORDER BORDERCOLOR="#FFC0CB" BGCOLOR="#EE82EE"> <TR> <TD> <TABLE BORDER BORDERCOLOR="#FFC0CB" BGCOLOR="White"> <TR> <TD> グラデーションぽいテーブル </TD> </TR> </TABLE> </TD> </TR> </TABLE> </TD> </TR> </TABLE> |
３つのテーブルを重ねて グラデーションぽくしました。 ３つのテーブル共、枠の色はピンク 背景色は３つ共変えてみました。 左のように書いたのを表示させるとこうなります。
| ||||||||||||
| <TABLE
BGCOLOR="blue"> <TR> <TD> <TABLE BGCOLOR="deepskyblue"> <TR> <TD> <TABLE BGCOLOR="skyblue"> <TR> <TD> <TABLE BGCOLOR="White"> <TR> <TD> グラデーションぽいテーブル その２ </TD> </TR> </TABLE> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </TD> </TR> </TABLE> |
今度は枠ナシのテーブルを４つ重ねてみました。 左のように書いたのを表示させるとこうなります。
| ||||||||||||
| <TABLE
BGCOLOR="black"> <TR> <TD> <TABLE BGCOLOR="White"> <TR> <TD> グラデーションの応用 </TD> </TR> </TABLE> </TD> </TR> </TABLE> |
枠ナシの白いテーブルを 重ねてみました。 黒いふちのテーブルみたいでしょ？ 左のように書いたのを表示させるとこうなります。
| ||||||||||||
| <TABLE CELLSPACING="1" BGCOLOR="black"
WIDTH="100"> <TR> <TD BGCOLOR="White"> 細い枠</TD> </TR> </TABLE> |
テーブルの背景色を黒に テーブルの横幅を２００ピクセルに マス目の背景色を白にしました。 左のように書いたのを表示させるとこうなります。
| ||||||||||||
| <TABLE CELLSPACING="1" BGCOLOR="#FF1493"
WIDTH="200" HEIGHT="100"> <TR> <TD BGCOLOR="White">１</TD> <TD BGCOLOR="yellow">２</TD> <TD BGCOLOR="White">３</TD> </TR> </TABLE> |
テーブルの背景色をピンクに テーブルの横幅を２００ピクセルに テーブルの高さを１００ピクセルに １のマスを白に ２のマスを黄色に ３のマスを白に指定 左のように書いたのを表示させるとこうなります。
| ||||||||||||
| <TABLE CELLPADDING="1" CELLSPACING="1"
BGCOLOR="black"> <TR> <TD BGCOLOR="deeppink"></TD> <TD BGCOLOR="hotpink"></TD> <TD BGCOLOR="pink"></TD> <TD BGCOLOR="White">ここに文字</TD> </TR> </TABLE> |
テーブルの枠の太さをCELLSPACING="1"に テーブルの背景色を黒に マス目の背景色をピンク系でそれぞれ３つ(３マス） 文字を書いたマス目は白に指定 左のように書いたのを表示させるとこうなります。
おまけ テーブルの枠と中身の間隔 （CELLPADDING） を２に指定すると
テーブルの枠の太さを CELLSPACING="2" に指定すると
|
ちょっと高度(?)な技だけど、例えばアイコンをテーブルタグを使ってラインに見せたり、ライン画像の長さを自由自在に変えたりも出来るよ。
←素材ハナコチャ
例えば、上の画像をラインにしたい場合、
まずは画像の上で右クリックをして、画像の横幅と高さを調べる。
上の画像の場合は横幅が7ピクセル。高さも7ピクセルです。
| <TABLE BORDER="0" CELLPADDING="0"
CELLSPACING="0"> <TR> <TD BACKGROUND="画像ＵＲＬ" WIDTH="ラインの長さ" HEIGHT="7"> </TD></TR></TABLE> |
ラインの長さを 100 にしました。 HEIGHT="7" これは、高さを表しているのですが、7 に指定してあるのは、画像の高さが 7ピクセルだからです。 画像によっては、横幅（WIDTH="ラインの長さ"）を、画像の横幅の倍数にしないと、レイアウトが崩れるモノもあるので、注意してね。 |
この↑ラインを短くしたい場合も、アイコンをラインに見せる時と同じ。
このラインも高さが 7ピクセルなので HEIGHT="7" に指定します。
| <TABLE BORDER="0" CELLPADDING="0"
CELLSPACING="0"> <TR> <TD BACKGROUND="画像ＵＲＬ" WIDTH="ラインの長さ" HEIGHT="7"> </TD></TR></TABLE> |
今度はラインの長さを150 に指定しました。 ラインの長さを調節したい場合、同じ形が並んでるラインにして下さい。 そうじゃないと、途中で途切れてしまう形になっちゃって、変です。 |
アイコンをラインにする時の応用で、アイコンを使い、画像テーブルを作る事も出来ます。
また上のアイコンを使って、テーブルを作ってみましょう。
| <TABLE BORDER="0" CELLPADDING="0"
CELLSPACING="0"> <TR> <TD COLSPAN="3" BACKGROUND="画像ＵＲＬ" WIDTH="141" HEIGHT="7"> </TD></TR>
<TR>
<TD BACKGROUND="画像ＵＲＬ" WIDTH="6" HEIGHT="139">
</TD><TD>
文字を書く場所
</TD>
<TD BACKGROUND="画像ＵＲＬ" WIDTH="6"
HEIGHT="139"> </TD>
</TR><TR>
<TD COLSPAN="3" BACKGROUND="画像ＵＲＬ" WIDTH="141"
HEIGHT="7">
</TD></TR></TABLE> |
画像の横幅や高さを基準として、ピッタリ合う WIDTH="横幅" と HEIGHT="高さ" を見つけなくちゃだからねぇ。 かなりメンドイよねぇ？？（笑） でも、こうやってアイコンからテーブルを作る事も可能っていう見本として。 | |||||||||
