このサイトはJavaScriptがオンになっていないと正常に表示されません

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

アーカイブ:2012年06月23日  カテゴリーHTML+CSS  タグ  タグ:この記事は12分程で読めます。

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

やっぱり画像を使うと「デザインされてる!」って感じがしますね。一応このテーブルに使った画像素材をダウンロードできるようにしておきました。
ダウンロード

気に入ったデザインがありましたらぜひ使ってください。もちろんカスタマイズして自由に使っていただいてかまいません。

ではこの辺で!


関連記事
この記事へのコメント
現在、この記事へのコメントはありません。
コメントをどうぞ

名前:(必須)

メールアドレス: (公開されません) (必須)

コメント本文:

この記事へのトラックバックとピンバック
トラックバックURL