テーブルって情報の可読性を目的としたものなので、ごくごくシンプルなデザイン性になりやすいですよね。それに、装飾できるパーツも線や背景色や文字色に限られるので、各種サイトごとにテーブルのデザインが似たような(色違いとか)ものになる場合が多いです。

なので、私は基本となる自作コードをいくつかストックしてまして、案件に応じてそれらコードからカスタマイズするようにしています。ここでは、その中からごくごくシンプルかつ汎用性の高いものをご紹介します。

tableのサンプルコード

線のみ

シンプルな実線のみのデザインです。プレーンデザインが一番カスタムしやすいです。
table01

html

<table class="type01">
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
</table>

css

table.type01 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
}
table.type01 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border: 1px solid #ccc;
}
table.type01 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border: 1px solid #ccc;
}

見出し背景色&立体型

見出しに背景色を指定し、グレーと白の2種類の線でセルを少し立体な感じに見せています。色はシンプルですが、のっぺりとした平面のものよりも少し豪華な感じで、良く使われるタイプです。
table02

html

<table class="type02">
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
</table>

css

table.type02 {
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
table.type02 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	background: #eee;
}
table.type02 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

テーブル左側に太線

単調な色合いに少しアクセントを付けるため、テーブル左に太線でライン付け。同系色で見出しの文字色を合わせると見出しが強調されて意味合いも可読性もアップしますね。
table03

html

<table class="type03">
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
</table>

css

table.type03 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 3px solid #369;
}
table.type03 th {
	width: 147px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #153d73;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

}
table.type03 td {
	width: 349px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

上下線のみ

本当にシンプルな上下の区切り線のみのタイプ。このタイプのテーブルは、デザインでも結構多いです。
table04

html

<table class="type04">
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
</table>

css

table.type04 {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
}
table.type04 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}
table.type04 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}

上下線&見出し背景色

上のデザインに見出しの背景色を立体的につけたタイプ。これもよく使うデザインの表組みです。
table05

html

<table class="type05">
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
</table>

css

table.type05 {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
}
table.type05 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #efefef;
}
table.type05 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}

偶数行に背景色

線はテーブル上下の2箇所のみで、あとは偶数行には背景色だけが付いているタイプ。スタイリッシュなデザインに合う可読性に優れたテーブルデザインです。
table06

html

<table class="type06">
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row" class="even">項目名</th>
		<td class="even">内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
</table>

css

table.type06 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
table.type06 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
}
table.type06 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
}
table.type06 .even {
	background: #efefef;
}

2wayヘッダ 基本形

1行目にテーブルヘッダが入り、各行左に見出しがくるタイプの基本形です。
table07

html

<table class="type07">
	<thead>
	<tr>
		<th scope="cols">タイトル</th>
		<th scope="cols">内容</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	</tbody>
</table>

css

table.type07 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border: 1px solid #ccc;
}
table.type07 thead {
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #04162e;
}
table.type07 thead th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #fff;
}
table.type07 tbody th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #efefef;
}
table.type07 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}

2wayヘッダ&ラインアクセントA

テーブルヘッダをはじめ全体的に色が弱い時は、ラインアクセントをヘッダ下に入れてヘッダとボディの境を明確にしたり。
table08

<table class="type08">
	<thead>
	<tr>
		<th scope="cols">タイトル</th>
		<th scope="cols">内容</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	</tbody>
</table>

css

table.type08 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-left: 1px solid #ccc;
}

table.type08 thead th {
	padding: 10px;
	font-weight: bold;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 2px solid #c00;
	background: #dcdcd1;
}
table.type08 tbody th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #ececec;
}
table.type08 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

2wayヘッダ&ラインアクセントB

上のヘッダ無背景色タイプ。これもよく使います。
table09

html

<table class="type09">
	<thead>
	<tr>
		<th scope="cols">タイトル</th>
		<th scope="cols">内容</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	</tbody>
</table>

css

table.type09 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;

}
table.type09 thead th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #369;
	border-bottom: 3px solid #036;
}
table.type09 tbody th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #f3f6f7;
}
table.type09 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}

2wayヘッダ&偶数行に背景色

ヘッダの背景色は強めにして、偶数行の背景色は淡い色合いの感じにするタイプ。これもよく使います。
table10

<table class="type10">
	<thead>
	<tr>
		<th scope="cols">タイトル</th>
		<th scope="cols">内容</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row" class="even">項目名</th>
		<td class="even">内容がはいります。</td>
	</tr>
	<tr>
		<th scope="row">項目名</th>
		<td>内容がはいります。</td>
	</tr>
	</tbody>
</table>

css

table.type10 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
table.type10 thead th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #fff;
	background: #04162e;
}
table.type10 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
}
table.type10 .even {
	background: #f3f6f7;
}

1wayヘッダ

1行目のみ見出しがくるタイプ。
table11

html

<table class="type11">
	<thead>
	<tr>
		<th scope="cols">タイトル</th>
		<th scope="cols">タイトル</th>
		<th scope="cols">タイトル</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>内容</th>
		<td>内容</th>
		<td>内容</th>
	</tr>
	<tr>
		<td>内容</th>
		<td>内容</th>
		<td>内容</th>
	</tr>
	<tr>
		<td>内容</th>
		<td>内容</th>
		<td>内容</th>
	</tr>
	</tbody>
</table>

css

table.type11 {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: center;
	line-height: 1.5;
}
table.type11 th {
	width: 155px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #fff;
	background: #036;
}
table.type11 td {
	width: 155px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #eee;
}

おまけ

上のタイプをタイル状にしたタイプ。あまり使用頻度は高くないんですが、一応作っておいたり。
table12

html

<table class="type12">
	<thead>
	<tr>
		<th scope="cols" class="col01">タイトル</th>
		<th scope="cols" class="col02">タイトル</th>
		<th scope="cols" class="col03">タイトル</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td class="col01">内容</th>
		<td class="col02">内容</th>
		<td class="col03">内容</th>
	</tr>
	<tr>
		<td class="col01">内容</th>
		<td class="col02">内容</th>
		<td class="col03">内容</th>
	</tr>
	<tr>
		<td class="col01">内容</th>
		<td class="col02">内容</th>
		<td class="col03">内容</th>
	</tr>
	</tbody>
</table>

css

table.type12 {
	border-collapse: separate;
	border-spacing: 3px;
	text-align: center;
	line-height: 1.5;
}
table.type12 th {
	width: 155px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #fff;
	background: #666;
}
table.type12 td {
	width: 155px;
	padding: 30px 10px;
	vertical-align: top;
	background: #eee;
}
table.type12 th.col01 {background: #060;}
table.type12 td.col01 {background: #cfc;}
table.type12 th.col02 {background: #f60;}
table.type12 td.col02 {background: #fc9;}
table.type12 th.col03 {background: #036;}
table.type12 td.col03 {background: #e2eeff;}

tableタグってエディタで書くときに結構手間ですよね。なので、こういうカスタム前提のコードをストックしておくと、仕事が捗るのでオススメです。