コピペでテーブルCSSデザイン色々

webデザイン

コピペで出来る!!
テーブルデザインのスタイルシート(CSS)まとめ

随時更新

HTML

基本のHTML

このHTMLを使用して様々なパターンのテーブルデザインCSSを適用していきましょう!!

<table class="tbl_00">
<tr>
<th>テキスト</th>
<th>テキスト</th>
<th>テキスト</th>
<th>テキスト</th>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>

テーブルCSS サンプル01

一番スタンダードなテーブルCSS

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
.tbl_01 {
	width: 100%;
	margin: 5px 0px 10px;
	border-collapse: collapse;
}

.tbl_01 th {
	width: 25%;
	text-align: left;
	padding: 10px 5px 5px 25px;
	border: 1px solid #e3e3e3;
	font-weight: normal;
	vertical-align: middle;
	background-color: #f6f6f6;
}

.tbl_01 td {
	vertical-align: middle;
	background: #FFF;
	padding: 10px 5px 5px 25px;
	border: 1px solid #e3e3e3;
}

テーブルCSS サンプル02

tdの区切り線がないバージョン

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
.tbl_02 {
	width: 100%;
	margin: 5px 0px 10px;
	border: 1px solid #e3e3e3;
}

.tbl_02 th {
	width: 25%;
	text-align: left;
	padding: 10px 5px 5px 25px;
	border: 1px solid #e3e3e3;
	font-weight: normal;
	vertical-align: middle;
	background-color: #f6f6f6;
}

.tbl_02 td {
	vertical-align: middle;
	background: #FFF;
	padding: 10px 5px 5px 25px;
	border: 1px solid #e3e3e3;
	border-style: solid none;
}

テーブルCSS サンプル03

borderを使わず、余白で区切ってるバージョン

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
.tbl_03 {
	width: 100%;
	margin: 5px 0px 10px;
	border-collapse: collapse;
	border-collapse: separate;
	border-spacing: 2px;
}

.tbl_03 th {
	width: 25%;
	text-align: left;
	padding: 10px 5px 5px 25px;
	font-weight: normal;
	vertical-align: middle;
	background-color: #f6f6f6;
}

.tbl_03 td {
	vertical-align: middle;
	background: #ebeeff;
	padding: 10px 5px 5px 25px;
}

テーブルCSS サンプル04

tdがマウスオーバーで色が変わるバージョン

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
.tbl_04 {
	width: 100%;
	margin: 5px 0px 10px;
	border: 1px solid #e3e3e3;
}

.tbl_04 th {
	width: 25%;
	text-align: left;
	padding: 10px 5px 5px 25px;
	border: 1px solid #e3e3e3;
	font-weight: normal;
	vertical-align: middle;
	background-color: #f6f6f6;
}

.tbl_04 td {
	vertical-align: middle;
	background: #FFF;
	padding: 10px 5px 5px 25px;
	border: 1px solid #e3e3e3;
}

.tbl_04 td:hover {
	background: #ffebf5;
	font-weight: bold;
}

テーブルCSS サンプル05

trがマウスオーバーで色が変わるバージョン

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
.tbl_05 {
	width: 100%;
	margin: 5px 0px 10px;
	border: 1px solid #e3e3e3;
	border-collapse: collapse;
}

.tbl_05 th {
	width: 25%;
	text-align: left;
	padding: 10px 5px 5px 25px;
	border: 1px solid #e3e3e3;
	font-weight: normal;
	vertical-align: middle;
	background-color: #f6f6f6;
}

.tbl_05 td {
	vertical-align: middle;
	padding: 10px 5px 5px 25px;
	border: 1px solid #e3e3e3;
}

table.tbl_05 tr:hover {
	background: #ffebf5;
	font-weight: bold;
}