オシャレでかわいいテーブルデザイン全12種 HTML/CSSコピペOK

女性向けのサイトであれば「もう少しオシャレで可愛い表を使いたい！」っていうこともあると思います。そんなときに使えるテーブルHTML/CSSを全部で12種類作りました。２ページ目もあるのでどうぞ最後までお付き合いください。

コピペですぐに使えます。商品比較表デザインもあります。

このページに書いてあること

オシャレでかわいいテーブルデザイン

オシャレでかわいいテーブルデザイン

シアンカラーテーブル

シアンのパステルカラーをヘッダーに一色使ったシンプルなテーブル。

	Goods1	Goods2	Goods3	Goods4
property1	100	90	80	70
property2	text	text	text	text
property3	text	text	text	text
property4	text	text	text	text

See the Pen Fashionable Table 7 by orank (@orank) on CodePen.

マゼンダカラーテーブル

マゼンダのパステルカラーをヘッダーに一色使ったシンプルなテーブル。

	Goods1	Goods2	Goods3	Goods4
property1	100	90	80	70
property2	text	text	text	text
property3	text	text	text	text
property4	text	text	text	text

HTML/CSS

See the Pen Fashionable Table 8 by orank (@orank) on CodePen.

パステルカラーテーブル

	Goods1	Goods2	Goods3	Goods4
property1	100	90	80	70
property2	100	90	80	70
property3	100	90	80	70
property4	100	90	80	70

HTML / CSS

See the Pen おしゃれテーブル1 by orank (@orank) on CodePen.

アフィリエイトの商品比較バージョンも作ってみました。１位商品をアピール（HTMLとCSSをコピペするだけ）したいときに。コピペだけで１位推しの比較表が出来上がります。

	Goods1	Goods2	Goods3	Goods4
Price	100yen	200yen	200yen	200yen
property1	100	90	80	70
property2	100	90	80	70
property3	100	90	80	70
property4	100	90	80	70

HTML / CSS

See the Pen Fashionable Table 2 by orank (@orank) on CodePen.

ポルカドットテーブル

	Goods1	Goods2	Goods3	Goods4
property1	100	90	80	70
property2	100	90	80	70
property3	100	90	80	70
property4	100	90	80	70

HTML/CSS

See the Pen LmrZdo by orank (@orank) on CodePen.

ここから先は、カラーを変えたテーブルデザインです。

日本の美しい伝統色を紹介されている「伝統色のいろは(-Traditional colors of Japan-)」さんの日本の色を使ってテーブルのCSSデザインを作ってみました。

古代の色テーブル

ヘッダーカラー：緑青（ろくしょう）
ボディ・フッター見出しカラー：白練（しろねり）

項目	商品１	商品２
一言	選ぶならコレ	見た目はGood
見た目	９０点	１００点
ニオイ	１００点	５０点
味	１００点	５０点
価格	１００点	５０点

HTML

<table class="kodai-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>９０点</td>
<td>１００点</td>
</tr>
<tr><th>ニオイ</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>味</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>価格</th>
<td>１００点</td>
<td>５０点</td>
</tr>
</tbody>
</table>

CSS

/***　古代カラー　***/

.kodai-table {
	table-layout: fixed;
}


/* ヘッダー */
.kodai-table thead th {
	background:#5BAD92;
	font-weight: bold;
	color:#fff;
}

/* ボディ項目・フッター項目 */
.kodai-table tbody th,
.kodai-table tfoot th {
	background:#FCFAF2;
}

/* ボディデータ・フッターデータ */
.kodai-table tbody td,
.kodai-table tfoot td {
	text-align:center;
}

奈良の色テーブル

ヘッダーカラー：紅の八塩（くれないのやしお）

項目	商品１	商品２
一言	選ぶならコレ	見た目はGood
見た目	９０点	１００点
ニオイ	１００点	５０点
味	１００点	５０点
価格	１００点	５０点

HTML

<table class="nara-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>９０点</td>
<td>１００点</td>
</tr>
<tr><th>ニオイ</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>味</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>価格</th>
<td>１００点</td>
<td>５０点</td>
</tr>
</tbody>
</table>

CSS

/***　奈良カラー　***/

.nara-table {
	table-layout: fixed;
}


/* ヘッダー */
.nara-table thead th {
	background:#AD002D;
	font-weight: bold;
	color:#fff;
}

/* ボディ項目・フッター項目 */
.nara-table tbody th,
.nara-table tfoot th {
	background:#FFF;
}

/* ボディデータ・フッターデータ */
.nara-table tbody td,
.nara-table tfoot td {
	text-align:center;
}


/* 偶数行　１行ごとの色変えが不要なら削除 */
.nara-table tr:nth-child(2n) th, 
.nara-table tr:nth-child(2n) td {
    background: #FBFBF6;
}

平安の色テーブル

ヘッダーカラー：浅紫（あさむらさき）
ボディ・フッター見出しカラー（奇数行）：桜色（さくらいろ）
ボディ・フッター見出しカラー（偶数行）：聴色（ゆるしいろ）
データカラー（偶数行）：卯の花色（うのはないろ）

項目	商品１	商品２
一言	選ぶならコレ	見た目はGood
見た目	９０点	１００点
ニオイ	１００点	５０点
味	１００点	５０点
価格	１００点	５０点

HTML

<table class="heian-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>９０点</td>
<td>１００点</td>
</tr>
<tr><th>ニオイ</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>味</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>価格</th>
<td>１００点</td>
<td>５０点</td>
</tr>
</tbody>
</table>

CSS

/***　平安カラー　***/

.heian-table {
	table-layout: fixed;
}


/* ヘッダー */
.heian-table thead th {
	background:#C4A3BF;
	font-weight: bold;

}


/* ボディ項目・フッター項目 */
.heian-table tbody th,
.heian-table tfoot th {
	background:#FEEEED;
}

/* ボディデータ・フッターデータ */
.heian-table tbody td,
.heian-table tfoot td {
	text-align:center;
}


/* 偶数行　１行ごとの色変えが不要なら削除 */
.heian-table tr:nth-child(2n) td {
    background: #FBFBF6;
}
/* 偶数行の項目 １行ごとの色変えが不要なら削除 */
.heian-table tr:nth-child(2n) th {
    background: #FCD4D5;
}

鎌倉の色テーブル

ヘッダーカラー：勝色（かついろ）
ボディ・フッター見出しカラー：胡粉色（ごふんいろ）

項目	商品１	商品２
一言	選ぶならコレ	見た目はGood
見た目	９０点	１００点
ニオイ	１００点	５０点
味	１００点	５０点
価格	１００点	５０点

HTML

<table class="kamakura-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>９０点</td>
<td>１００点</td>
</tr>
<tr><th>ニオイ</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>味</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>価格</th>
<td>１００点</td>
<td>５０点</td>
</tr>
</tbody>
</table>

CSS

/***　鎌倉カラー　***/

.kamakura-table {
	table-layout: fixed;
}

/* ヘッダー */
.kamakura-table thead th {
	background:#181B39;
	font-weight: bold;
	color:#fff;
}


/* ボディ項目・フッター項目 */
.kamakura-table tbody th,
.kamakura-table tfoot th {
	background:#FFFFFC;
	font-weight: bold;
}

/* ボディデータ・フッターデータ */
.kamakura-table tbody td,
.kamakura-table tfoot td {
	text-align:center;
}

/* 偶数行　１行ごとの色変えが不要なら削除 */
.kamakura-table tr:nth-child(2n) td {
    background: #FBFBF6;
}

安土桃山の色テーブル

ヘッダーカラー：群青色（ぐんじょういろ）

項目	商品１	商品２
一言	選ぶならコレ	見た目はGood
見た目	９０点	１００点
ニオイ	１００点	５０点
味	１００点	５０点
価格	１００点	５０点

HTML

<table class="momoyama-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>９０点</td>
<td>１００点</td>
</tr>
<tr><th>ニオイ</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>味</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>価格</th>
<td>１００点</td>
<td>５０点</td>
</tr>
</tbody>
</table>

CSS

/***　安土桃山カラー　***/

.momoyama-table {
	table-layout: fixed;
}

/* ヘッダー */
.momoyama-table thead th {
	background:#005baa;
font-weight: bold;
	color:#fff;
}

/* ボディ項目・フッター項目 */
.momoyama-table tbody th,
.momoyama-table tfoot th {
	background:#fff;
}

/* ボディデータ・フッターデータ */
.momoyama-table tbody td,
.momoyama-table tfoot td {
	text-align:center;
}

/* 偶数行　１行ごとの色変えが不要なら削除 */
.momoyama-table tr:nth-child(2n) th,
.momoyama-table tr:nth-child(2n) td  {
    background: #FBFBF6;
}

江戸の色テーブル

ヘッダーカラー：紺鼠（こんねず）
ボディ・フッター見出しカラー：小町鼠（こまちねず）

項目	商品１	商品２
一言	選ぶならコレ	見た目はGood
見た目	９０点	１００点
ニオイ	１００点	５０点
味	１００点	５０点
価格	１００点	５０点

HTML

<table class="momoyama-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>９０点</td>
<td>１００点</td>
</tr>
<tr><th>ニオイ</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>味</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>価格</th>
<td>１００点</td>
<td>５０点</td>
</tr>
</tbody>
</table>

CSS

/***　江戸カラー　***/

.edo-table {
	table-layout: fixed;
}

/* ヘッダー */
.edo-table thead th {
	background:#3F4551;
	font-weight: bold;
	color:#fff;
}


/* ボディ項目・フッター項目 */
.edo-table tbody th,
.edo-table tfoot th {
	background:#E5E2E4;
	font-weight: bold;
}

/* ボディデータ・フッターデータ */
.edo-table tbody td,
.edo-table tfoot td {
	text-align:center;
}

/* 偶数行　１行ごとの色変えが不要なら削除 */
.edo-table tr:nth-child(2n) td {
    background: #FBFBF6;
}
/* 偶数行の項目 １行ごとの色変えが不要なら削除 */
.edo-table tr:nth-child(2n) th {
    background: #E6E6E6;
}

明治の色テーブル

ヘッダーカラー：薔薇色（ばらいろ）

項目	商品１	商品２
一言	選ぶならコレ	見た目はGood
見た目	９０点	１００点
ニオイ	１００点	５０点
味	１００点	５０点
価格	１００点	５０点

HTML

<table class="meiji-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>９０点</td>
<td>１００点</td>
</tr>
<tr><th>ニオイ</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>味</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>価格</th>
<td>１００点</td>
<td>５０点</td>
</tr>
</tbody>
</table>

CSS

/***　明治カラー　***/

.meiji-table {
	table-layout: fixed;
}

/* ヘッダー */
.meiji-table thead th {
	background:#E73275;
	font-weight: bold;
	color:#fff;
}


/* ボディ項目・フッター項目 */
.meiji-table tbody th,
.meiji-table tfoot th {
	background:#FFF;
	font-weight: bold;
}

/* ボディデータ・フッターデータ */
.meiji-table tbody td,
.meiji-table tfoot td {
	text-align:center;
}

/* 偶数行　１行ごとの色変えが不要なら削除 */
.meiji-table tr:nth-child(2n) td {
    background: #FBFBF6;
}
/* 偶数行の項目 １行ごとの色変えが不要なら削除 */
.meiji-table tr:nth-child(2n) th {
    background: #FBFBF6;
}

近代の色テーブル

ヘッダーカラー：若葉色（わかばいろ）

項目	商品１	商品２
一言	選ぶならコレ	見た目はGood
見た目	９０点	１００点
ニオイ	１００点	５０点
味	１００点	５０点
価格	１００点	５０点

HTML

<table class="kindai-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品１</th>
<th>商品２</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>９０点</td>
<td>１００点</td>
</tr>
<tr><th>ニオイ</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>味</th>
<td>１００点</td>
<td>５０点</td>
</tr>
<tr>
<th>価格</th>
<td>１００点</td>
<td>５０点</td>
</tr>
</tbody>
</table>

CSS

/***　近代カラー　***/

.kindai-table {
	table-layout: fixed;
}

/* ヘッダー */
.kindai-table thead th {
	background:#A4CA68;
	font-weight: bold;
	color:#fff;
}


/* ボディ項目・フッター項目 */
.kindai-table tbody th,
.kindai-table tfoot th {
	background:#F7EFE3;
	font-weight: bold;
}

/* ボディデータ・フッターデータ */
.kindai-table tbody td,
.kindai-table tfoot td {
	text-align:center;
}

/* 偶数行　１行ごとの色変えが不要なら削除 */
.kindai-table tr:nth-child(2n) td {
    background: #FBFBF6;
}