〃2

テーブルで遊ぶ2


今日も、テーブル(table)タグを使って、色々とやってみたいと思います♪

*** テーブル2重~3重枠 ***

ココで使うタグはこれ。。。

<table border=" 8 " bordercolor="★1" cellspacing="0" cellspadding="0">
<td>
<table border=" 5 " bordercolor="★2" cellspacing="0" cellspadding="0">

<td>
<table border=" 2 " bordercolor="★3" width="☆" height="☆">
<td rowspan="1" colspan="1">
<●ここに画像や文字●>
</td></td></td></table></table></table>

上記の説明をすると…

青文字 それぞれ枠の太さ
★1 一番外側の枠色を指定
★2 真ん中の枠色を指定
★3 一番内側の枠色を指定
枠の大きさを指定(ココでは共に100)
●~● 画像の倉庫から、<img src="~">を貼り付け

上のタグでは、3重枠の説明をしていますが、二重枠にする場合、『★2』の真ん中の赤色で表示してあるタグを省いて下さい。

では この効果を見てみましょう’☆,。:*:・゚

この画像は、背景が透過加工したあるので、画像を入れる前の
『<td rowspan="1" colspan="1">』
の中に、『bgcolor="#ffffff"』(白色)を入れて
『<td rowspan="1" colspan="1" bgcolor="#ffffff" >』
としてあります。


*** 枠色を個別に指定 ***

次は、枠の色を 個別に変えてみましょう♪
上の『bordercolor』は、四辺共同色になってしまい、
額縁らしくないでしょう?(笑)

ここで使うタグはこれ。。。

<style="border-top-color:★1;border-left-color:★2;
border-bottom-color:★3;border-right-color:★4">

説明をしてみると…

★1 上の枠色を指定
★2 左の枠色を指定
★3 下の枠色を指定
★4 右の枠色を指定

このタグを、各『 <table> 』の中に入れて使いますが、
*上・左・・・薄い色を指定
*下・右・・・濃い色になります。


↓こんな感じ。

monroe
Marilyn Monroe

…となります。
通常、個別に色指定は出来るのですが、
楽天では 下・右が自動的に濃い色になるようです★(○`ε´○)ぶーっ

ややこしいので、コピーして使って下さい。。。``r(^^;)ポリポリ今日はこれでお終い!(^^)/~~~



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