【HTML/CSS】 和のテーブルデザイン Japanese Table Design

和のテーブルデザイン レイアウト(HTML/CSS)
スポンサーリンク

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

伝統色のいろはさんでは時代ごとに色の説明が解説されています。色の説明を見ているとなんだか昔の日本の生活の様子はどうな感じだったろうかと思いを馳せて気持ちがほっこりとしました。

I made Japanese table design with “IROHA -Traditional colors of Japan-“.  You can see Japanese color’s details on IROHA’s page. I think you can imagine how japanese people lived the old time.

WordPressでのテーブル・表の作り方はこちらの記事をご覧ください。

日本の伝統色で作るテーブルデザイン

 

古代の色テーブル(Ancient times)

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

一言選ぶならコレ見た目はGood
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点
HTML
<table class="kodai-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;
}

 

奈良の色テーブル(Nara period | AD 710 to 794)

ヘッダーカラー:紅の八塩(くれないのやしお)

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

→ 奈良の色(伝統色のいろは)

HTML
<table class="nara-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;
}

 

平安の色テーブル(Heian period | AD 794 to 1185)

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

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

→ 平安の色(伝統色のいろは)

HTML
<table class="heian-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;
}

 

鎌倉の色テーブル(Kamakura period | AD 1185 to 1333)

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

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

→ 鎌倉の色(伝統色のいろは)

HTML
<table class="kamakura-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;
}

 

安土桃山の色テーブル(Azuchi-Momoyama period | AD 1573 to 1603)

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

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

→ 安土桃山の色(伝統色のいろは)

HTML
<table class="momoyama-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;
}

 

江戸の色テーブル(Edo period | AD 1603 to 1868)

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

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

→ 江戸の色(伝統色のいろは)

HTML
<table class="edo-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;
}

 

明治の色テーブル(Meiji period | AD 1868 to 1912)

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

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

→ 明治の色(伝統色のいろは)

HTML
<table class="meiji-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;
}

 

近代の色テーブル(modern period)

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

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

→ 近代の色(伝統色のいろは)

HTML
<table class="kindai-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;
}

 

▼可愛いテーブルデザインも作りました▼

 

この記事を書いた人
がんちゃん

Wordpress de アフィリエイト運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。

がんちゃんをフォローする
レイアウト(HTML/CSS)
初心者向けレンタルサーバー
wpX
wpX

・wordpress専用レンタルサーバー
・とにかく速い
・1サーバーあたりドメイン10個まで
・負荷に強く安定感抜群
・わかりやすい管理画面
・メインサイトにおすすめ

エックスサーバー
エックスサーバー

・使い勝手がいい
・ドメイン数無制限(実質上限50サイト)
・初心者に分かりやすいと好評の管理画面
・速度もそこそこ早く月額が安い
・メイン、サテライトともにおすすめ

mixhost
mixhost

・当サイトで使用中
・アダルトOKなサーバーでは最速
・プランがいつでも変更可能
・プレミアムプラン以上はwpX程度の速度
・管理画面が分かりづらい(cPanel)
・ドメイン数無制限(データベースも無制限でエックスサーバーより入る数は多い)
・メイン、サテライトともにおすすめ

がんちゃんをフォローする
がんちゃんブログ

コメント