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

今回はCSSだけでデザインするtableのアイデアを2つ紹介したいと思います。
画像を作ったテーブルも多く見ますが、画像を使わずにも、なかなかカッコいいテーブルができますので、ぜひ参考にしてみてください。ここでは、線と塗りだけで表現するシンプルなテーブルを作ってみます。
7/22に第二段として[CSSだけで作るtableデザインテクニックVer.02(おまけ付き)]を公開しましたので、コチラもぜひ見てみてください！
またテーブルはSEO的に良くないと考えている方がいましたら、tableタグはSEOに不利というデマコチラの記事もあわせて読んでみてください。

元となるHTML

<table summary="会社案内表">
  <tr>
    <th class="t_top" width="180">会社名</th>
    <td class="t_top">株式会社○○○</td>
  </tr>
  <tr>
    <th>代表者名</th>
    <td>山本　太郎</td>
  </tr>
  <tr>
    <th>所在地</th>
    <td>〒000-0000　東京都新宿区西新宿00-00</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td>000-0000-0000</td>
  </tr>
  <tr>
    <th>メールアドレス</th>
    <td>000@000.com</td>
  </tr>
</table>

CSSデザインタイプ01

table {
	border-collapse: collapse;
	width:100%;
}
th.t_top {
    border-top: #be1309 4px solid;
}
th {
	border-bottom: #e3e3e3 1px dotted;
	text-align: left;
	padding: 10px;
	font-weight: normal;
}
td.t_top {
	border-top: #b3b3b3 4px solid;
}
td {
	border-bottom: #e3e3e3 1px dotted;
	text-align: left;
	padding: 10px;
}
tr:hover {
    background: #3D80DF;
    color: #FFFFFF;
}

CSSデザインタイプ01　プレビュー

いかがでしょうか？それなりにカッコいいと思いませんか？ダメですか？　ならもう1パターン作ったんでどうぞ！↓↓

CSSデザインタイプ02

table {
	width: 100%;
	border-collapse: collapse;
}
th.t_top {
    border-top: #b3b3b3 4px solid;
}
th {
	border-bottom: #e3e3e3 1px solid;
	border-left: #e3e3e3 1px solid;
	text-align: left;
	background: #f7f7f7;
	padding: 10px;
	font-weight: normal;
}
td.t_top {
	border-top: #be1309 4px solid;
}
td {
	border-bottom: #e3e3e3 1px solid;
	border-right: #e3e3e3 1px solid;
	text-align: left;
	padding: 10px;
}

CSSデザインタイプ02　プレビュー

こんな感じになります。CSSだけでもカッコいいテーブルが出来上がったと思います。皆さんも色々とチャレンジしてカッコいいテーブルを作ってみてください！その際この記事が皆さんの役に当てば幸いです。

7/22に第二段として[CSSだけで作るtableデザインテクニックVer.02(おまけ付き)]を公開しましたので、コチラもぜひ見てみてください！

では、この辺で！