きなこの　愉快な　楽天日記枠＆miniﾀｸﾞ講座

■テーブル　３　　

☆テーブルを作ろう　NO3☆

☆テーブルの中の文字位置　１☆

<TABLE BORDER><TR><TH>☆テーブル☆</TH><TH>☆タグ講座☆</TH><TH>☆文字位置☆</TH></TR>< TR ALIGN=CENTER><TD>中央</TD><TD>中央</TD><TD>中央</TD></TR><TR>< TD ALIGN=right>右寄せ</TD>< TD ALIGN=CENTER>中央</TD>< TD ALIGN=LEFT>この文字は左寄せ</TD></TR></TABLE>

☆テーブル☆	☆タグ講座☆	☆文字位置☆
中央	中央	中央
右寄せ	中央	この文字は左寄せ

テーブルNO2の見出しを作ろうで、説明した < TH > タグと
ALIGN=LEFT・RIGHT・CENTER を使っています。

ALIGN=LEFT・CENTER・RIGHTを指定すると
文字がセルの中でそれぞれ左・中央・右寄せで表示されます。

< TR align=center > にすると、
その行にあるセルの文字は全て中央に表示されます。

< TD align=center > だと
そのセルの文字だけが中央に表示されます。

☆　注　☆

テーブルのサイズを指定していないと
列は文字が一番長いセルにあわせて表示されます

つまり左に寄せていても文字が長いので
セルいっぱいになっていますね。

☆テーブルの中の文字位置　２☆

<TABLE BORDER><TR VALIGN= top ><TD>この行のセルの文字は、全て上の位置に表示されます。</TD><TD>上の位置です</TD><TD>ここも上</TD></TR><TR><TD VALIGN= middle >ここは中</TD><TD VALIGN= bottom >このセルの文字は
下の位置に表示されてます
分かりづらいですね</TD><TD VALIGN=bottom>これも下</TD></TR></TABLE>

この行のセルの文字は、全て上の位置に表示されます。	上の位置です	ここも上
ここは中	このセルの文字は下の位置に表示されてます分かりづらいですね	これも下

↑で、説明したように、セル幅を決めていないので
セルは、文字数の多いものに合わせて、広がっています。

文字位置　１は、横方向でしたが
今度は縦方向の位置を指定します。

valign= top でセルの上位置に表示

valign= middle は中央に

valign= bottom は下位置です。

☆セルの幅を指定しよう☆

<TABLE BORDER WIDTH="400px"> <TR><TD>Width=200px</TD><TD>Width=200px</TD> </TR><TR><TD>3</TD><TD>4</TD></TR> </TABLE>

Width=200px	Width=200px
3	4

TABLE WIDTH=○pxで、全体の長さを入れます
＜TD＞で指定したい幅をいれます。
左に＜300px＞とすれば、右は＜100px＞となります。

px で幅を決めて下さいね

★　見本　★

↓のテーブルのタグは上と同じもので、幅指定していません。
文字が多いと、セルは文字にあわせた大きさになります。

文字が多いと、セルは文字に合わせた大きさになりますよ。	2
3	4

・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:

これを、文字でセルの長さが変わらないように
TD WIDTH=200pxでセルの幅を決めてみます。

これでセルの幅は同じになります。

文字が多いセルは文字に合わせたサイズになります	2
3	4

<TABLE BORDER WIDTH="400px"><TR><TD width=300px>文字が多いセルは文字に合わせたサイズになります</TD><TD width=300px>2</TD></TR><TR><TD >3</TD><TD>4</TD></TR></TABLE>

☆セルの幅・高さを指定しよう☆

<TABLE BORDER width="400px" HEIGHT="100px"><TR HEIGHT="50px"><TD width="200px">セル1</TD><TD width="200px">セル 2</TD></TR><TR HEIGHT="50px"><TD>3</TD><TD>4</TD></TR></TABLE>

セル1	セル 2
3	4

HEIGHT=100pxでテーブルの高さを指定しています。

☆テーブルの中にテーブルを☆

<TABLE BORDER><TR> <TD> Cell 1 <TABLE BORDER><TR><TD>A</TD><TD>B</TD> </TR><TR><TD>C</TD><TD>D</TD> </TR></TABLE> </TD> <TD>Cell2</TD><TD>Cell 3 <TR><TD>Cell4</TD> <TD>Cell5</TD><TD>Cell6</TD></TR></TABLE>

Cell 1

A	B
C	D

Cell 2

Cell 3

↑のタグに幅・高さを入れて表示してみます。
よく見て、ご自分で勉強してください。

★　見本　☆

Cell 1

A	B
C	D

Cell2

Cell 3

Cell4

Cell5

Cell6

<TABLE BORDER width="150px" HEIGHT="150px"><TR HEIGHT="100px"> <TD width="50px"> Cell 1<TABLE BORDER width="40px" HEIGHT=70px"><TR HEIGHT="35px"><TD width="20px">A</TD><TD width="20px">B</TD></TR><TR HEIGHT="35px"><TD>C</TD><TD>D</TD></TR></TABLE> </TD> <TD width="50px">Cell2</TD><TD width="50px">Cell 3 <TR HEIGHT="50px"><TD>Cell4</TD><TD>Cell5</TD><TD>Cell6</TD></TR></TABLE>

すこし複雑な感じがしますが
要するに < TD > と < /TD > の中に
テーブルタグを入れるだけ！！簡単ですよ～☆

☆cellpadding　&　cellspacing ☆ でも
テーブルの中にテーブルを組み込んでいます。

●　おまけ　●

☆cellpadding　&　cellspacing ☆で使ったテーブルinテーブルのタグです。

<TABLE BORDER><TD> <TABLE BORDER=1 bgcolor=#FFF0AC> <CAPTION ALIGN=top><font size="2">数字（小）＜・・・・CELLPADDING・・・・＞数字（大）</font></CAPTION><TR><TD><TABLE BORDER=5 CELLPADDING=1 CELLSPACING=0><CAPTION ALIGN=top><font size="2"><B>CELLPADDING=1</font></B></CAPTION><TR><TD>きなこ</TD><TD>グルメ</TD></TR> <TR><TD>テーブル</TD><TD>講座</TD></TR> </TABLE></TD> <TD><TABLE BORDER=5 CELLPADDING=5 CELLSPACING=0><CAPTION ALIGN=top><font size="2"><B>CELLPADDING=5</font></B></CAPTION> <TR><TD>きなこ</TD><TD>グルメ</TD></TR><TR><TD>テーブル</TD><TD>講座</TD></TR> </TABLE></TD> <TD><TABLE BORDER=5px CELLPADDING=20 CELLSPACING=0><CAPTION ALIGN=top><font size="2"><B>CELLPADDING=20</font></B></CAPTION><TR><TD>きなこ</TD><TD>グルメ</TD></TR> <TR><TD>テーブル</TD><TD>講座</TD></TR></TABLE></TD></table></TD></TR></TD></TABLE>

☆テーブルに色を付けてみよう☆

基本篇・テーブルに色をつけよう
と同じですが、セルが多くなった時の色付けです。

★　見本1 ★

<table border="5" width="200PX" HEIGHT="100px" BGCOLOR="#ffb5b5" style=border-style:double;border-color:pink;"> <TR HEIGHT="50px"><TD width="100px">Cell1</TD><TD width="100px">Cell2</TD></TR><TR HEIGHT="50px"><TD>Cell3</TD><TD>Cell4</TD></TR></TABLE>

Cell1	Cell2
Cell3	Cell4

★　見本２ ★

<table border="5" width="200PX" HEIGHT="100px" BGCOLOR="#ffb5b5" style=border-style:double;border-color:pink;"><TR HEIGHT="50px"><TD width="100px" BGCOLOR="#FFFF93">Cell1</TD><TD width="100px">Cell2</TD></TR><TR HEIGHT="50px"><TD>Cell3</TD><TD BGCOLOR="#CA8EFF">Cell4</TD></TR></TABLE>

Cell1	Cell2
Cell3	Cell4

テーブル全体に色を付ける場合は
< TABLE BGCOLOR="#" >
この場合枠にも色が付きます。

セルに色を付けるときは
< TD BGCOLOR="#" > にします。

☆文字に色をつけよう☆

★　見本１　★

<table border="5" width="200PX" HEIGHT="100px" BGCOLOR="#555555" style=border-style:double;border-color:pink;"><TR><TD>Cell 1</TD><TD><FONT COLOR="#FFFFFF">Cell 2</FONT></TD></TR><TR><TD><FONT COLOR="#F9F900">Cell ３</FONT></TD><TD><FONT COLOR="#FF0000">Cell ４</FONT></TD></TR><TR><TD>Cell ５</TD><TD><FONT COLOR="#00FFFF">Cell ６</FONT></TD></TR></TABLE>

Cell 1	Cell 2
Cell ３	Cell ４
Cell ５	Cell ６

↑はセルの文字にそれぞれ色を指定する方法です。
設定したい、セルに < FONT COLOR="色" > を書き込みます。

★　見本２　★

<TABLE BGCOLOR='#555555' style='color:#FFFFFF' border=1> <TR><TD>Cell 1</TD><TD>Cell 2</TD></TR> <TR style='color:#00FFFF'> <TD>Cell ３</TD><TD>Cell ４</TD></TR> <TR><TD>Cell ５</TD><TD>Cell ６</TD></TR> </TABLE>

Cell 1	Cell 2
Cell ３	Cell ４
Cell ５	Cell ６

一行だけ色を変える場合は
< TR style='color:#00FFFF' > の様に
＜TR＞に指定する事で、
その行の文字色だけを変更できます。

同じ色で設定をするなら、
< style='color:#FFFFFF' > の様に
＜style＞に指定すれば
一度でテーブル内の文字色を変更出来ます。

☆枠に色をつけよう　１☆

★　見本１　★

BORDER=2に設定しています。

<TABLE BORDER= 2 BORDERCOLOR ="#FF5151"> <TR><TD>Cell 1</TD><TD>Cell 2</TD></TR> <TR><TD>Cell 3</TD><TD>Cell 4</TD></TR></TABLE>

Cell 1	Cell 2
Cell 3	Cell 4

★　見本２　★

BORDER=１０に設定しています。

<TABLE BORDER= 10px BORDERCOLOR ="#6F00D2"> <TR BGCOLOR="#F9F900"><TD>Cell 1</TD><TD>Cell 2</TD></TR> <TR><TD>Cell 3</TD><TD>Cell 4</TD></TR></TABLE>

Cell 1	Cell 2
Cell 3	Cell 4

☆枠に色をつけよう　２☆

★　見本１　★

BORDER=2に設定しています。

<TABLE BORDER=2px BORDERCOLORLIGHT ="#6F00D2F" B ORDERCOLORDARK ="#F9F900"> <TR><TD>Cell 1</TD><TD>Cell 2</TD></TR> <TR><TD>Cell 3</TD><TD>Cell 4</TD></TR> </TABLE>

Cell 1	Cell 2
Cell 3	Cell 4

★　見本２　★

BORDER=2に設定しています。

<TABLE BORDER=10px BORDERCOLORLIGHT ="#6F00D2F" BORDERCOLORDARK ="#F9F900"> <TR><TD>Cell 1</TD><TD>Cell 2</TD></TR> <TR><TD>Cell 3</TD><TD>Cell 4</TD></TR></TABLE>

Cell 1	Cell 2
Cell 3	Cell 4

枠の明るい部分と影の部分に色を付けています。
BORDERCOLORLIGHT="色" 　で明るい部分の色です。（紫色） BORDERCOLORDARK="色" 　で影になる部分の色です。(黄色）

☆　枠のスタイルを変えてみようNO1　☆

★　見本１　★

<TABLE BORDER=0 BORDERCOLOR="#6F00D2F" style=border-style: dashed; border-width:5px;> <TR><TD>Cell 1</TD><TD>Cell 2</TD></TR> <TR><TD>Cell 3</TD><TD>Cell 4</TD></TR> </TABLE>

Cell 1	Cell 2
Cell 3	Cell 4

★　見本２　★

< TABLE BORDER=0 BORDERCOLOR="#6F00D2F" style=border-style: dotted; border-width:3px;> <TR><TD>Cell 1</TD><TD>Cell 2</TD></TR> <TR><TD>Cell 3</TD><TD>Cell 4</TD></TR> </TABLE>

Cell 1	Cell 2
Cell 3	Cell 4

ここでは、外枠が解かり易い様に
＜TABLE BORDER=0＞にしています。
数字を入れると、セル毎に枠が付きますよ。

外枠の指定は
style=border-style: dotted; border-width:3px;
この部分です。

青で書かれている枠の種類を
色々変えてみて下さいね。
ラインの表示を参考にしてね～

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

☆ 枠のスタイルを変えてみよう NO2 ☆

★　見本１　★

Cell 1	Cell 2
Cell 3	Cell 4

★　見本2　★

Cell 1	Cell 2
Cell 3	Cell 4

★　見本3　★

Cell 1	Cell 2
Cell 3	Cell 4

■　見本１は、＜ｽﾀｲﾙを変えてみようNO1＞のタグにプラスして
＜TD＞自体にもﾎﾞｰﾀﾞｰｽﾀｲﾙを入れました。

＜TD＞セル１・・左＆上　　　＜TD＞セル２・・右＆上
＜TD＞セル３・・左＆下　　　＜TD＞セル４・・右＆下

■　見本2は、テーブル自体のﾎﾞｰﾀﾞｰを入れないで
＜TD＞のみ、ﾎﾞｰﾀﾞｰｽﾀｲﾙを入れました。
（指定した箇所は、↑と同じです）

■　見本1・見本2では、セルに隙間があきます。
この隙間を作らないようにするには、

cellspacing="0" cellpadding="0"

これを入れることで解消します。

見本3は、cellspacing="0" cellpadding="0"を入れた例です。

■　見本1のタグ　■

<table border=0 width=300 bordercolor="#6F00D2F" style=border-style:dashed;border-width:5px;> <TR><TD style="border-left:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 1</TD><TD style="border-right:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 2</TD></TR> <TR><TD style="border-left:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 3</TD><TD style="border-right:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 4</TD></TR> </TABLE>

■　見本２のタグ　■

<table border=0 width=300> <TR><TD style="border-left:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 1</TD><TD style="border-right:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 2</TD></TR> <TR><TD style="border-left:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 3</TD><TD style="border-right:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 4</TD></TR> </TABLE>

■　見本３のタグ　■

<table border=0 width=300 cellspacing="0" cellpadding="0" > <TR><TD style="border-left:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 1</TD><TD style="border-right:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 2</TD></TR> <TR><TD style="border-left:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 3</TD><TD style="border-right:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 4</TD></TR> </TABLE>

テーブル　１・２・４・５・６・７