：2012年06月23日　 ：HTML+CSS　 ：コーディング　 ：この記事は12分程で読めます。

今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[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

このテーブルは配色と[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

このテーブルは[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

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

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

ではこの辺で！