CSSだけで作るtableデザインテクニックVer.02(おまけ付き)

今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます!
こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです!!予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました!
気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ!
CSSテーブルデザインテクニック01
HTML テクニック01
<table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top">table title02</th> </tr> <tr> <td class="t_line01">01</td> <td class="t_line01">textarea</td> <td class="t_line01">textarea</td> </tr> <tr> <td class="t_line02">02</td> <td class="t_line02">textarea</td> <td class="t_line02">textarea</td> </tr> <tr> <td class="t_line01">03</td> <td class="t_line01">textarea</td> <td class="t_line01">textarea</td> </tr> </table>
CSS テクニック01
table { border: #2D0F09 1px solid; border-collapse: collapse; font-size: 11px; width: 100%; color: #F6ECEF; } table th.t_top { border: #A84673 1px dashed; background-color: #35140C; text-align: left; padding: 10px; font: bold; } table td.t_line01 { border: #A84673 1px dashed; background-color: #601A32; vertical-align: top; text-align: left; padding: 10px; } table td.t_line02 { border: #A84673 1px dashed; background-color: #752241; vertical-align: top; text-align: left; padding: 10px; }
プレビュー テクニック01
No. | table title01 | table title02 |
---|---|---|
01 | textarea | textarea |
02 | textarea | textarea |
03 | textarea | textarea |
このテーブルは配色と[border: #A84673 1px dashed]がポイントですね。イギリス土産の洋服のタグがこんな感じのデザインで、特に配色が私の好みだったので、今回こうしてテーブルデザインに反映させて見ました。おしゃれです。
CSSテーブルデザインテクニック02
HTML テクニック02
<table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top">table title02</th> </tr> <tr> <td class="t_line01">01</td> <td class="t_line01">textarea</td> <td class="t_line01">textarea</td> </tr> <tr> <td class="t_line02">02</td> <td class="t_line02">textarea</td> <td class="t_line02">textarea</td> </tr> <tr> <td class="t_line01">03</td> <td class="t_line01">textarea</td> <td class="t_line01">textarea</td> </tr> </table>
CSS テクニック02
table { background-color: #ffffff; border-top:#ffffff 3px double; border-collapse: collapse; font-size: 11px; width: 100%; color:#333333; } table th.t_top { border-bottom: #dcdddd 1px solid; background-color: #efefef; text-align: left; padding: 10px; } table td.t_line01 { background-color: #fff; text-align: left; padding: 10px; vertical-align: top; } table td.t_line02 { background-color: #f7f8f8; text-align: left; padding: 10px; vertical-align: top; }
プレビュー テクニック02
No. | table title01 | table title02 |
---|---|---|
01 | textarea | textarea |
02 | textarea | textarea |
03 | textarea | textarea |
このテーブルは[border-top:#ffffff 3px double]がポイントです。これのおかげで1pxラインが表現できています。薄いグレーで作りましたが、淡いブルーでもいい感じのデザインになると思います。
CSSテーブルデザインテクニック03(おまけ)
HTML テクニック03
<table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top">table title02</th> </tr> <tr> <td class="t_line01">01</td> <td class="t_line01 no_img">textarea</td> <td class="t_line01 no_img">textarea</td> </tr> <tr> <td class="t_line02">02</td> <td class="t_line02 no_img">textarea</td> <td class="t_line02 no_img">textarea</td> </tr> <tr> <td class="t_line01">03</td> <td class="t_line01 no_img">textarea</td> <td class="t_line01 no_img">textarea</td> </tr> </table>
CSS テクニック03
table { background: #ffffff; border-left: #cccccc 1px solid; border-collapse: collapse; width: 100%; font-size: 11px; color:#333333; } table th.t_top { background:#333333 url(bg_header.jpg); border-bottom: #cccccc 1px solid; border-top: #cccccc 1px solid; border-right:#cccccc 1px solid; text-align: center; padding:10px; color:#ffffff; } table td.t_line01 { background: #ffffff url(line1.gif) no-repeat; border-bottom:#cccccc 1px solid; border-right:#cccccc 1px solid; text-align: right; padding: 10px; } table td.t_line02 { background: #f2f2f2 url(line2.gif) no-repeat; border-bottom:#cccccc 1px solid; border-right:#cccccc 1px solid; text-align: right; padding: 10px; } table td.no_img{background-image:none;}
プレビュー テクニック03
No. | table title01 | table title02 |
---|---|---|
01 | textarea | textarea |
02 | textarea | textarea |
03 | textarea | textarea |
やっぱり画像を使うと「デザインされてる!」って感じがしますね。一応このテーブルに使った画像素材をダウンロードできるようにしておきました。
気に入ったデザインがありましたらぜひ使ってください。もちろんカスタマイズして自由に使っていただいてかまいません。
ではこの辺で!
-
[...] http://creators-manual.com/tablecss02/ [...]
-
[...] CSSだけで作るtableデザインテクニックVer.02(おまけ付き) [...]
-
[...] CSSだけで作るtableデザインテクニック |web creators manual CSSだけで作るtableデザインテクニックVer.02(おまけ付き) |web creators manual [...]