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

■テーブル　１

☆テーブルを作ろうNO1☆

テーブルとは,簡単に言ってしまえば　「枠」のことです。

基本のテーブルでも色をつけたり、
アイコンを足したりするだけでとても可愛くなりますよ☆

まずは基本の１行１列のテーブルからお勉強して見ましょう。

☆基本篇☆

見本　１

<TABLE BORDER><TR><TD>きなこのﾏﾏ</TD></TR></TABLE>

きなこのﾏﾏ

見本　２

<TABLE BORDER=" 10 "><TR><TD>きなこのﾏﾏ</TD></TR></TABLE>

きなこのﾏﾏ

☆注意書き☆

テーブルを作る時はタグに、順番があります。

< TABLE > → < TR > → < TD >
ここに文字
</ TD > → </ TR > → </ TABLE >

< TR > を必ず先に書いて下さいね。
閉じる時は < /TR > は後です。

ページを編集する時は、
自動改行なし（BRタグで指定）
で、作るようにして下さい。

自動改行（初心者向け）
で、書き込むと、
おかしな空白が出来てしまいます。

■　ただし、日記で使う場合は、
自動改行（初心者向け）で作成し
タグ文字に隙間を作らず、詰めて書き込んでください。
後に、自分で日記枠を作る時このやり方になります。

< TR > は　行　を表します。
< TD > は　列　を表します。

見本１・見本２　の違いは、周囲の枠の太さです。

☆テーブルを増やしてみよう☆

●テーブルの列をを増やす

<TABLE BORDER><TR> <TD>文字1</TD> <TD>文字2</TD> <TD>文字3</TD> </TR></TABLE>

文字1

文字2

文字3

< TD > 文字 < /TD > を増やせば
テーブルはいくらでも増やせます。

●テーブルの行をを増やす

<TABLE BORDER> <TR> <TD>一行目文字1</TD><TD>一行目文字2</TD> </TR> <TR> <TD>二行目文字1</TD><TD>二行目文字2</TD> </TR> </TABLE>

一行目文字1	一行目文字2
二行目文字1	二行目文字2

< TR > ～ < /TR > までの所を増やせば何行にでもなるよ☆

< /TABLE > の前に書き加えていきます。

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

アレンジ版はこちらから

<TABLE BORDER =枠の太さ bgcolor=背景色 bordercolor=左・上の淡い色 bordercolordark=右・下の濃い色(影の部分）> < TR > <TD>文字</TD> < /TR > </TABLE>

枠の太さは1以上にしてください。

この様になりますよ

見本のタグは　↓です。

<TABLE BORDER=5 bgcolor=#FFFF37 bordercolor=#CA8EFF bordercolordark=#5B00AE><TR><TD>文字</TD></TR></TABLE>

☆補足☆

< TABLE BORDER > は
BORDERの数字を指定する事で
枠の太さを変えることが出来ます。

数字を指定しないと　 BORDER=1 　と同じです。

枠を表示しないときは
< TABLE BORDER=0 > にします。

カラーサンプルサイト１

カラーサンプルサイト２

カラーコードを使う時は　#　からコピーして使ってくださいね。

☆テーブルを変化させてみよう☆

★テーブル全体の大きさを決めるには、Width="○" Height="○"を入れます。

★見本１★

<TABLE BORDER=枠の太さ WIDTH=幅 HEIGHT=高さ><TD>Kinako</TD></TABLE>

Kinako

枠の太さ、幅、高さには、
それぞれ指定する長さを数字で入力してください。

(数字%でもいいですよ～。)

見本は、BORDER=5 WIDTH=200px HEIGHT=100px　にしています。

★見本２★

<TABLE BORDER=5 WIDTH=200 HEIGHT=100 bgcolor=#FFFF37 bordercolor=#CA8EFF bordercolordark=#5B00AE><TD> <center><FONT size=4 face="Comic Sans MS" color=red> < b > 文字</font> < /b > </center> </TD></TABLE>

文字