FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【css】 table_css 1

sample
table1

img
table_background.gif
table1_backg

html

<table class="sakinfo">
<caption>Infomation</caption>
<tr class="odd">
<th scope="row">ジャンル</th>
<td>game</td>
</tr>
<tr>
<th scope="row">会社名</th>
<td><a href="">NitroPlus</a></td>
</tr>
<tr class="odd">
<th scope="row">原画名</th>
<td><a href="">矢野口君</a></td>
</tr>
<tr>
<th scope="row">ライター</th>
<td><a href="">虚淵玄</a></td>
</tr>
</table>



css

.sakinfo {
width:50%;
border-top:1px solid #e3f1fe;
border-right:1px solid #e3f1fe;
margin:1em auto;
border-collapse:collapse;
}
caption {
color: #9ba9b4;
font-size:.94em;
letter-spacing:.1em;
padding:0;
margin:1em 0 0 0;
margin-bottom:0;
caption-side:top;
text-align:center;
}
.sakinfo td {
color:#678197;
border-bottom: 1px solid #e3f1fe;
border-left:1px solid #e5eff8;
padding:.3em 1em;
text-align:center;
}
.sakinfo th {
font-weight:normal;
color: #678197;
text-align:left;
border-bottom: 1px solid #e3f1fe;
border-left:1px solid #e5eff8;
padding:.3em 1em;
}
tr.odd th,
tr.odd td{
background:#f4f9fe url(table_background.gif) no-repeat;
}
.sakinfo a:link {
color:#d42945;
text-decoration:none;
border-bottom:1px dotted #ffbac8;
}
.sakinfo a:visited {
color:#d42945;
border-bottom:none;
text-decoration:none;
}
.sakinfo a:hover,
.sakinfo a:focus {
color:#f03b58;
border-bottom:1px solid #f03b58;
text-decoration:none;
}




スポンサーサイト

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

コメントの投稿

Private :

カウンター
   
プロフィール

glasses

Author:glasses
物事をすぐ忘れる自分のためのブログ。

カテゴリ
カレンダー(月別)
09 ≪│2018/10│≫ 11
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
最新記事
最新コメント
検索フォーム
リンク
サービス
track feed track あわせて読みたいブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。