table de 飾りつけ
■■■ |
★★★ ライン・サイズ・カラー ★★★
|
■■■ |
|
|
■ |
★単純に簡単に整理がした~い という方 おかたづけ
|
■ |
★ラインもサイズ・カラーは? という方 の ページ 飾りつけ
|
■ |
★
|
■ |
★
|
■ |
★
|
|
|
|
*始める前に 楽天の編集ページには
自動改行(初心者向け)と自動改行なし(<BR>タグで指定)がありますが
改行なしで作成されることを基準にして説明しますのでご了承ください
では早速はじめましょう♪
でももぅこのページ見て読むのヤダ~という人は
青枠のタグをコピーして使うのもOKです
では本題に
おかたづけ
のページでテーブルの棚に整理できましたか?
では今度は少し色気と知性を付けて上げましょう(なんのこっちゃ)
この↓↓
色気より食い気表を
色っぽくしましょう
|
左記のHTMLは
<table border="1"><tr><td>
画像どらやきを入れたよ
img...で始まるよ
</td><td>
ここにはどやらきの説明文
改行は<BR>ね^^
</td></tr>
<tr><td>
ここは左のスイートポテトの
場所になるよ
</td><td>
スイートポテトの宣伝だ~
</td></tr></table>
|
青枠の中のタグをコピーして
赤い字のところに
好きな文字や画像を入れてみてね♪
|
では色気の前にボディーサイズを指定しましょう
ウエストは?ではなくセルサイズ指定です^^
table要素のサイズを指定する属性 width「横幅」 height「高さ」を使います
いずれもピクセルか%で表します
例えば
<table width="500" height="300" border="3">
<tr><td>
291×192の画像いれました
</td><td>
今日はブラウニーとチーズケーキを作りました。美味しいミルクティーと幸せな時間 </td></tr></table>
|
⇒ ⇒
どうですか?
|
|
今日はブラウニーとチーズケーキを作りました。美味しいミルクティーと幸せな時間 |
|
td にも指定できます
<table width="500" height="300" border="3">
<tr><td width="300" height="200" bgcolor="green">
291×192の画像
</td><td>
今日はブラウニーとチーズケーキを作りました。美味しいミルクティーと幸せな時間 </td></tr></table>
|
⇒ ⇒
どうですか?違いがわかりますか?
指定されているので文字を入れたほうは 狭いですね^^;
そして見やすいようにバックに カラーをいれてみました
赤い字で書いてある所です↑↑bgcolor="green"って
|
|
今日はブラウニーとチーズケーキを作りました。美味しいミルクティーと幸せな時間 |
|
では最初の
色気より食い気表をアレンジ
<table width="400" height="300" border="3"
bordercolor="blue"><tr><td width="150" height="150" bgcolor="green">
ドラ焼きの画像
</td><td>
ドラ焼きの説明
</td></tr><tr><td width="150" height="150"
bgcolor="#ffb34a">
ポテトの画像
</td><td>
ポテトの説明
</td></tr></table>
そしてまたまた赤い字で書いてある所
bordercolor というのは ラインのカラー指定です
bgcolor というのは 背景のカラー指定です
#ffb34a はWEBセーフカラーの数値です
でも カラーネーム red blue green black purple pink などでもOKなのです
楽天では↓見かけたことあるかしら?
では今日はここまで
ぜひお試しあれ!
お疲れ様でした~~~~~
次は何したい?