FC2ブログ
05.05
Fri
・応用編


■ 色々なテーブル枠3

前回は、テーブルの枠の色を徐々に変えてみました。
今回は、もっと特殊な枠たちです。






groove」をつかって枠に濃い影を。

ここに文章や画像をいれます




入力ソースはこちら。
<table width="300" height="50" style="border:10px groove #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>





ridge」をつかって枠にうすい影を。
ここに文章や画像をいれます




入力ソースはこちら。
<table width="300" height="50" style="border:10px ridge #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







inset」をつかって枠を立体的に。

ここに文章や画像をいれます




入力ソースはこちら。
<table width="300" height="50" style="border:6px inset #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>





outset」をつかって枠を立体的に。(「inset」の逆バージョン)
ここに文章や画像をいれます




入力ソースはこちら。
<table width="300" height="50" style="border:6px outset #c0c0c0;background-color:#ffccff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







このように、スタイルシートをテーブルに組み合わせることによって、
枠のバリエーションを一気に増やすことができました。

次回は、テーブルの背景を半透明にする方法です。
関連記事
スポンサーサイト




comment 0 trackback 0
トラックバックURL
http://oyedihawakisi.blog37.fc2.com/tb.php/165-5787e637
トラックバック
コメント
管理者にだけ表示を許可する
 

 New Favorite blog Entries 最新記事 33サイト掲載中

back-to-top