000000 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

ブログ*小鳥ぶらり鹿児島の旅*

4本の線のテイストを変える その2

楽天ブログ＆アフィリエイトで使えるＨＴＭＬ小技集
TABLEタグでもっと自由にレイアウト
●4本の線のテイストをバラバラに変える　その2


前回の例を組み合わせると下記のようになります
● 4本の線種をバラバラに
<table style="border: 1pt #666666;
border-style: solid dotted double dashed;">

<tr><td></td></tr>
</table>
● 4本の線種も太さもバラバラに
<table style="border: #666666;
border-style: solid dotted double dashed;
border-width:7pt 5pt 3pt 1pt;">

<tr><td></td></tr>
</table>
● 4本の線種も太さも色もバラバラに
<table style=
"border-style: solid dotted double dashed;
border-width:7pt 5pt 3pt 1pt;
border-color: #e6001a #ff8700 #669933 #1a6680;">

<tr><td></td></tr> </table>
こんなに長ったらしいHTML使用することは実際のところ少ないかもしれません
何かの参考にしていただけたらと思います
次は実用的な例です
立体的に見えるテーブルをご紹介します
※ただしoperaではborderの色がモノトーンになりますので指定した通りになりません
●ボタン風テーブル(飛び出す)
<table boder="1" bgcolor="#ff661a"
bordercolorlight="#ff9999"
bordercolordark="#e60066">

<tr><td></td></tr> </table>

●ボタン風テーブル(へこむ)
<table boder="1" bgcolor="#ff661a"
bordercolorlight="#e60066"
bordercolordark="#ff9999">

<tr><td></td></tr> </table>
bordercolorlight で上辺と左辺の色を
bordercolordark で下辺と右辺の色を
指定しています
bordercolorlight・bordercolordark・bgcolorの3色を指定する時
3色はすべて同系色にして色の明暗の差を利用するとうまくいくのではと思います
次ページへ進む　テーブルのレイアウト及びＨＴＭＬの具体的
前ページへ戻る　4本の線のテイストをバラバラに変える　その1
楽天ブログ＆アフィリエイトで使えるＨＴＭＬ小技集ＴＯＰへ

© Rakuten Group, Inc.
X