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

■テーブル７

★　テーブル　７　★

★　テーブルを使って画像横に文字　ＮＯ２★

全てのﾀｸﾞに、画像アドレスは外してあります。

★　見本　ＮＯ１　（Ａ）　★

☆文字の位置は、左寄せ上部に指定しています。

この画像はテーブル　６で表示した　見本ＮＯ１の
画像と文字を入れ替えたものです。

ここでは、テーブル幅・高さ指定はしていません。

画像サイズと、文字数でテーブルが形作られています。

NO１（Ａ）

<table border=1 width="px" height="px" cellpadding="0" cellspacing="0" bgcolor="" style="border-color:;border-style:;"><TR><TD><img src="http://画像アドレス"></TD><TD align="left" valign="top"><font size="3"><B>☆文字の位置は、左寄せ上部に指定しています。</font></B> </TD></TR></table>

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

単純な、テーブルでは、真ん中のborder線が出てしまいます。
この線を消すには、テーブルをもう一つ重ねます。

★　見本　ＮＯ１　（Ｂ）　★

☆文字の位置は、左寄せ上部に指定しています。

NO１（Ｂ）

<table border=1 width="px" height="px" cellpadding="0" cellspacing="0" bgcolor="" style="border-color:;border-style:;"><TR><TD><table border=0 width=px cellpadding="0" cellspacing="0" bgcolor="" style="border-color:;border-style:;"><TR><TD><img src="http://画像アドレス"></TD><TD align="left" valign="top"><font size="3"><B>☆文字の位置は、左寄せ上部に指定しています。</font></B> </TD></TR></table></TD></TR></table>

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

★　見本　　ＮＯ２　★

テーブル６の　ＮＯ５と同じものですが
画像と文字を反対にして、

テーブルを重ねて、真ん中の線を消しました。

↓のテーブルは、テーブルの幅・高さ指定をしています。
文字は < BR > で段落しています。
< BR > で、段落をしないと、不自然な箇所で文字が
区切られることがあります。

読みやすいように、綺麗に段落を作ってくださいね。

ただし、日記枠を作る時などで
自動改行（初心者向け）で、作るときは、
< BR > ﾀｸﾞは外してください。

ENTERｷｰを押すことで、段落出来ます。

↓のﾀｸﾞには、 < BR > ﾀｸﾞを入れています

☆文字の位置は
左寄せ中央部に
指定しています。

<table border=1 width="400px" height="250px" cellpadding="0" cellspacing="0" bgcolor="" style="border-color:;border-style:;"><TR><TD> <table border=0 width="400px" height="250px" cellpadding="0" cellspacing="0" bgcolor="#81C0C0" style="border-color:#336666;border-style:double;"><TR><TD><img src="http://画像アドレス"></TD><TD width="150px" align="left" valign="center"><font size="3"><B>☆文字の位置は<BR>左寄せ中央部に<BR>指定しています。</font></B> </TD></TR></table> </TD></TR></table>

■　テーブルを重ねる事で、真ん中の線を消して
周囲の枠を表示することが出来ました。

■　見本NO1の＜NO１＞のﾀｸﾞに、
赤表示で書かれているﾀｸﾞを加えました。

■　border線やborder色は中のテーブルに指定してあります。

■　cellpadding="0" cellspacing="0"　を入れ込むことで
テーブルとテーブルの間に隙間が出来ません。

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

☆　次はこのテーブルに、スクロールを入れて見ましょう　☆

このﾀｸﾞは、日記枠編集用に
自動改行（初心者向け）で書き込んでいます。
ENTERｷｰを押すことで段落していきます。

< BR > は使っていません。

☆文字の位置は
centerに
指定しています。
スクロールは、
文字数が多くなると出てきます

ここでは解りやすくする為
スクロールの色を
見やすくしています。

ﾀｸﾞでは、背景色と同じ色で
お洒落にしてみます。

私の好きな使い方です。

<center><table border=1 width="500px" height="250px" cellpadding="0" cellspacing="0" bgcolor="" style="border-color:;border-style:;"><TR><TD><table border=0 width="500px" height="250px" cellpadding="0" cellspacing="0" bgcolor="#81C0C0" style="border-color:#336666;border-style:double;"><TR><TD><img src="http://から始まる画像アドレス" width="162" height="184"></TD><TD width="250px" style="SCROLLBAR-FACE-COLOR:#81C0C0;SCROLLBAR-ARROW-COLOR:#336666;SCROLLBAR-TRACK-COLOR:#81C0C0;SCROLLBAR-HIGHLIGHT-COLOR:#81C0C0;SCROLLBAR-3DLIGHT-COLOR:#81C0C0;SCROLLBAR-SHADOW-COLOR:#81C0C0;SCROLLBAR-DARKSHADOW-COLOR:#336666;"> <P style="width:250px; height:240px; overflow-y:auto;border:0;" align="center"><font size="3"><B>
☆文字の位置は centerに指定しています。

スクロールは、
文字数が多くなると出てきます

ここでは解りやすくする為
スクロールの色を
見やすくしています。

ﾀｸﾞでは、背景色と同じ色で
お洒落にしてみます。

私の好きな使い方です。

</font></B></P></TD></TR></table></TD></TR></table></center>

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

★　結果　★

■文字の位置は
centerに指定しています。

■スクロールは、
文字数が多くなると出てきます

■文字セルは、
横幅を広げました

■スクロールを付ける時で

横幅を広げた時は
必ず、
赤表示の横幅も広げてください

その時、
同じ幅にすると、
枠ｲｯﾊﾟｲに。

小さくすると、
スクロール幅は狭くなります。

縦の長さも同じことです。
色々試してみてくださいね。