MENU
  1. ホーム
  2. デザイン
  3. オシャレでかわいいテーブルデザイン全12種 HTML/CSSコピペOK

オシャレでかわいいテーブルデザイン全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をコピペするだけ）したいときに。コピペだけで１位推しの比較表が出来上がります。

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
項目商品１商品２
見た目９０点１００点
ニオイ１００点５０点
味１００点５０点
価格１００点５０点

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;
}
デザイン
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

オーランのアバター オーラン

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

関連記事

目次