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

おしゃれでかわいいテーブル

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

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

目次

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

シアンカラーテーブル

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

  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.

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

Price 100yen 200yen 200yen 200yen
  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 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
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点

HTML

<table class="kodai-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>90点</td>
<td>100点</td>
</tr>
<tr><th>ニオイ</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>味</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>価格</th>
<td>100点</td>
<td>50点</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
項目 商品1 商品2
見た目 90点 100点
ニオイ 100点 50点
100点 50点
価格 100点 50点

HTML

<table class="nara-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>90点</td>
<td>100点</td>
</tr>
<tr><th>ニオイ</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>味</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>価格</th>
<td>100点</td>
<td>50点</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;
}


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

平安の色テーブル

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

一言 選ぶならコレ 見た目はGood
項目 商品1 商品2
見た目 90点 100点
ニオイ 100点 50点
100点 50点
価格 100点 50点

HTML

<table class="heian-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>90点</td>
<td>100点</td>
</tr>
<tr><th>ニオイ</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>味</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>価格</th>
<td>100点</td>
<td>50点</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;
}


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

鎌倉の色テーブル

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

一言 選ぶならコレ 見た目はGood
項目 商品1 商品2
見た目 90点 100点
ニオイ 100点 50点
100点 50点
価格 100点 50点

HTML

<table class="kamakura-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>90点</td>
<td>100点</td>
</tr>
<tr><th>ニオイ</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>味</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>価格</th>
<td>100点</td>
<td>50点</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;
}

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

安土桃山の色テーブル

ヘッダーカラー:群青色(ぐんじょういろ)

一言 選ぶならコレ 見た目はGood
項目 商品1 商品2
見た目 90点 100点
ニオイ 100点 50点
100点 50点
価格 100点 50点

HTML

<table class="momoyama-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>90点</td>
<td>100点</td>
</tr>
<tr><th>ニオイ</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>味</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>価格</th>
<td>100点</td>
<td>50点</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;
}

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

江戸の色テーブル

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

一言 選ぶならコレ 見た目はGood
項目 商品1 商品2
見た目 90点 100点
ニオイ 100点 50点
100点 50点
価格 100点 50点

HTML

<table class="momoyama-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>90点</td>
<td>100点</td>
</tr>
<tr><th>ニオイ</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>味</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>価格</th>
<td>100点</td>
<td>50点</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;
}

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

明治の色テーブル

ヘッダーカラー:薔薇色(ばらいろ)

一言 選ぶならコレ 見た目はGood
項目 商品1 商品2
見た目 90点 100点
ニオイ 100点 50点
100点 50点
価格 100点 50点

HTML

<table class="meiji-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>90点</td>
<td>100点</td>
</tr>
<tr><th>ニオイ</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>味</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>価格</th>
<td>100点</td>
<td>50点</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;
}

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

近代の色テーブル

ヘッダーカラー:若葉色(わかばいろ)

一言 選ぶならコレ 見た目はGood
項目 商品1 商品2
見た目 90点 100点
ニオイ 100点 50点
100点 50点
価格 100点 50点

HTML

<table class="kindai-table">
<tfoot>
<tr>
<th>一言</th>
<td>選ぶならコレ</td>
<td>見た目はGood</td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td>90点</td>
<td>100点</td>
</tr>
<tr><th>ニオイ</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>味</th>
<td>100点</td>
<td>50点</td>
</tr>
<tr>
<th>価格</th>
<td>100点</td>
<td>50点</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;
}

/* 偶数行 1行ごとの色変えが不要なら削除 */
.kindai-table tr:nth-child(2n) td {
    background: #FBFBF6;
}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ドメイン千年戦争を生きた騎士オーラン。中古ランプを手に入れて中古ドメインでペラ量産しまくる騎士。武器はペラサイト流星剣。

目次