テーブル・枠一覧

テーブル・枠のサンプルです。

テーブルサンプル枠1

タイトル	タイトル	タイトル
サンプル	サンプル	サンプル
サンプル	サンプル	サンプル

ソースコード

<div> <table border="1" style="border-collapse: collapse;"> <tbody> <tr> <th>タイトル</th> <th>タイトル</th> <th>タイトル</th> </tr> <tr> <td>サンプル</td> <td>サンプル</td> <td>サンプル</td> </tr> <tr> <td>サンプル</td> <td>サンプル</td> <td>サンプル</td> </tr> </tbody> </table> </div>

テーブルサンプル枠2

タイトル	タイトル	タイトル
サンプル	サンプル	サンプル
サンプル	サンプル	サンプル

ソースコード

<div> <table border="2" style="border-collapse: collapse;"> <tbody> <tr> <th>タイトル</th> <th>タイトル</th> <th>タイトル</th> </tr> <tr> <td>サンプル</td> <td>サンプル</td> <td>サンプル</td> </tr> <tr> <td>サンプル</td> <td>サンプル</td> <td>サンプル</td> </tr> </tbody> </table> </div>

テーブルサンプル枠3

タイトル	タイトル	タイトル
サンプル	サンプル	サンプル
サンプル	サンプル	サンプル

ソースコード

<div> <table border="3" style="border-collapse: collapse;"> <tbody> <tr> <th>タイトル</th> <th>タイトル</th> <th>タイトル</th> </tr> <tr> <td>サンプル</td> <td>サンプル</td> <td>サンプル</td> </tr> <tr> <td>サンプル</td> <td>サンプル</td> <td>サンプル</td> </tr> </tbody> </table> </div>

タグ紹介用枠

タイトル

タグ

説明 サンプルボタン

ソースコード

<style type="text/css"> .gbtn0007{ border:1px solid #8A66F4;-webkit-box-shadow: #CCCCCC 0px 1px 0px inset;-moz-box-shadow: #CCCCCC 0px 1px 0px inset; box-shadow: #CCCCCC 0px 1px 0px inset; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius:30px;font-size:15px;font-family:arial, helvetica, sans-serif; padding: 5px 20px 5px 20px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF; background-color: #ff00ff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff00ff), to(#F0FFF0)); background-image: -webkit-linear-gradient(top, #ff00ff, #F0FFF0); background-image: -moz-linear-gradient(top, #ff00ff, #F0FFF0); background-image: -ms-linear-gradient(top, #ff00ff, #F0FFF0); background-image: -o-linear-gradient(top, #ff00ff, #F0FFF0); background-image: linear-gradient(to bottom, #ff00ff, #F0FFF0);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff00ff, endColorstr=#F0FFF0); } .gbtn0007:hover{ border:1px solid #9174ED; background-color: #cc00cc; background-image: -webkit-gradient(linear, left top, left bottom, from(#cc00cc), to(#bdffbd)); background-image: -webkit-linear-gradient(top, #cc00cc, #bdffbd); background-image: -moz-linear-gradient(top, #cc00cc, #bdffbd); background-image: -ms-linear-gradient(top, #cc00cc, #bdffbd); background-image: -o-linear-gradient(top, #cc00cc, #bdffbd); background-image: linear-gradient(to bottom, #cc00cc, #bdffbd);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cc00cc, endColorstr=#bdffbd); } </style> <!--情報紹介枠開始--> <div> <table border="3"> <tbody> <tr> <td> <!--タイトル開始--> タイトル <!--タイトル終了--> </td> </tr> <tr> <td> <!--ダクエリア開始--> タグ <!--ダクエリア終了--> </td> </tr> <tr> <td> <!--説明開始--> 説明 <br/> <!--説明終了--> <!--ボタン開始--> <div style="margin-top: 2px; padding: 10px;"> <a class="gbtn0007" href="#"><span style="color: #FFFFFF;">サンプルボタン</span></a> </div> <!--ボタン終了--> <br /> </td> </tr> </tbody> </table> </div> <!--情報紹介枠終了-->

広告枠

広告

サンプルサンプル

ソースコード

<div> <span style="background-color: white; color: #cccccc; font-size: xx-small; left: 20px; position: relative; ">広告</span> <br /> <table border="1" style="border-collapse: collapse;"> <tbody> <tr> <td> <div> <!--広告ダクエリア開始--> サンプルサンプル <!--広告ダクエリア終了--> </div> </td> </tr> </tbody> </table> </div>

以下は、今後の追加用

ボタンタイプ0001
ソースコード

ソースコード

ボタンタイプ0001
ソースコード

ソースコード

ボタンタイプ0001
ソースコード

ソースコード

ボタンタイプ0001
ソースコード

ソースコード

ボタンタイプ0001
ソースコード

ソースコード