きなこの 愉快な 楽天日記枠&miniタグ講座

きなこの 愉快な 楽天日記枠&miniタグ講座

■テーブル7




★ テーブル 7 ★


★ テーブルを使って画像横に文字 NO2★

全てのタグに、画像アドレスは外してあります。



★ 見本 NO1 (A) ★

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





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

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

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


NO1(A)

<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線が出てしまいます。
この線を消すには、テーブルをもう一つ重ねます。


★ 見本 NO1 (B) ★


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




NO1(B)

<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>




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


★ 見本  NO2 ★


テーブル6の NO5と同じものですが
画像と文字を反対にして、

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

↓のテーブルは、テーブルの幅・高さ指定をしています。
文字は < 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の<NO1>のタグに、
赤表示で書かれているタグを加えました。

■ 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に指定しています。


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


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


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

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

その時、
同じ幅にすると、
枠イッパイに。

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

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





テーブル 









© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: