オシャレで可愛いテーブルデザイン【 HTML / CSS 】

女性向けのサイトであれば「もう少しオシャレで可愛い表を使いたい！」っていうこともあると思います。そんなときに使えるテーブルHTML/CSSを作りました。（作った人はおっさんです。そこは可愛く修正できないのでご了承ください。）

コピペですぐに使えます。アフィリエイト用の商品比較表デザインもございます。

頻繁にテーブルを使う方へ
よろしければテーブルの挿入の基本操作がすぐに覚えられる次の記事も合わせてお読みください。当ブログで使っているテーブル構造の作り方が分かればCSSのクラス名を変えるだけでテーブルデザインをすぐに変える事ができます。

おすすめスマホではみ出さないテーブル・表を作成するHTML/CSS

オシャレなテーブル・表

パステルカラーテーブル

カラフルなパステルカラーと角の丸みで女性らしさをアピール。色は濃い目なので目立たせたいときに。

	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を追加したあと、テーブルタグに【osare-table col5t】の２つのクラス名を加えるだけでOK。

<table class="osare-table col5t">
<thead>
<tr>
<th></th>
<th>Goods1</th>
<th>Goods2</th>
<th>Goods3</th>
<th>Goods4</th>
</tr>
</thead>
<tbody>
<tr>
<th>property1</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property2</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property3</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property4</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</tbody>
</table>

<tableclass="osare-table col5t">

<thead>

<tr>

<th>Goods1</th>

<th>Goods2</th>

<th>Goods3</th>

<th>Goods4</th>

</tr>

</thead>

<tbody>

<tr>

<th>property1</th>

</tr>

<tr>

<th>property2</th>

</tr>

<tr>

<th>property3</th>

</tr>

<tr>

<th>property4</th>

</tr>

</tbody>

</table>

CSS

/***　おしゃれテーブル１　パステルカラー ***/
 
.osare-table {
 width:100%;
 table-layout: fixed;
 border: none !important;
 border-collapse: separate;
 border-spacing: 7px 0px;
}
 
.osare-table th {
 border: none !important;
}
 
.osare-table tbody td {
   border: none !important;
  background-color:#FFF9FF !important;
  border-bottom: solid 2px #f9f9f9 !important;
}
 
/* ヘッダー */
.osare-table thead th {
 font-weight: bold;
 border-radius: 10px 10px 0px 0px;
}

/* フッター（比較表と色つけたとき用） */
.osare-table tfoot td {
 border-radius: 0 0 10px 10px;
}
 
 
/* ボディ項目 */
.osare-table tbody th {
 background:#f2f5fc;
 font-weight: bold;
 border-bottom: solid 2px #f9f9f9 !important;
 line-height:4.5em;
}
 
/* フッター項目 */
.osare-table tfoot th {
 background:none;
 line-height:3em;
 font-weight: bold;
}


 
/* ボディデータ */
.osare-table tbody td {
 text-align:center;
}
 
/* ヘッダー行　１列ごとの色変え */
.osare-table thead th:nth-child(1)  {
 background:#81d4fa;
}

.osare-table thead th:nth-child(2)  {
 background: #FFBCFF;
}
.osare-table thead th:nth-child(3)  {
 background: #FFFFB2;
}
.osare-table thead th:nth-child(4)  {
 background: #C4FF89;
}
.osare-table thead th:nth-child(5)  {
 background: #FFB2D8;
}
 
/* 最終行のボーダーをなくす */
.osare-table tbody tr:last-child th,
.osare-table tbody tr:last-child td {
 border-bottom:none !important;
}

/* スマホ調整 */
@media (max-width: 767px) {
	.osare-table thead th,
	.osare-table tbody th {
			padding:0;
	}
	.osare-table tfoot td {
	padding:0;
	font-size:0.9em;
	}
.osare-table tfoot td:nth-child(2) {
	 font-size:1em;
	}
	
}

/*（共通）　項目の多いテーブルの幅を調整*/
@media (max-width: 767px) {
 .col6t th,
 .col6t td{
 font-size:0.4em;
 padding: 10px 0px;
 }
 .col5t th,
 .col5t td{
 font-size:0.5em;
 padding: 10px 0px;
 }
 .col4t th,
 .col4t td{
 font-size:0.7em;
 padding: 10px 5px;
 }
 .col3t th,
 .col3t td{
 font-size:0.8em;
 padding: 10px 10px;
 }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

/***　おしゃれテーブル１　パステルカラー ***/

.osare-table{

width:100%;

table-layout:fixed;

border:none!important;

border-collapse:separate;

border-spacing:7px0px;

}

.osare-tableth{

border:none!important;

}

.osare-tabletbodytd{

border:none!important;

background-color:#FFF9FF !important;

border-bottom:solid2px#f9f9f9 !important;

}

/* ヘッダー */

.osare-tabletheadth{

font-weight:bold;

border-radius:10px10px0px0px;

}

/* フッター（比較表と色つけたとき用） */

.osare-tabletfoottd{

border-radius:0010px10px;

}

/* ボディ項目 */

.osare-tabletbodyth{

background:#f2f5fc;

font-weight:bold;

border-bottom:solid2px#f9f9f9 !important;

line-height:4.5em;

}

/* フッター項目 */

.osare-tabletfootth{

background:none;

line-height:3em;

font-weight:bold;

}

/* ボディデータ */

.osare-tabletbodytd{

text-align:center;

}

/* ヘッダー行　１列ごとの色変え */

.osare-tabletheadth:nth-child(1) {

background:#81d4fa;

}

.osare-tabletheadth:nth-child(2) {

background:#FFBCFF;

}

.osare-tabletheadth:nth-child(3) {

background:#FFFFB2;

}

.osare-tabletheadth:nth-child(4) {

background:#C4FF89;

}

.osare-tabletheadth:nth-child(5) {

background:#FFB2D8;

}

/* 最終行のボーダーをなくす */

.osare-tabletbodytr:last-childth,

.osare-tabletbodytr:last-childtd{

border-bottom:none!important;

}

/* スマホ調整 */

@media(max-width:767px){

.osare-tabletheadth,

.osare-tabletbodyth{

padding:0;

}

.osare-tabletfoottd{

padding:0;

font-size:0.9em;

}

.osare-tabletfoottd:nth-child(2){

font-size:1em;

}

/*（共通）　項目の多いテーブルの幅を調整*/

@media(max-width:767px){

.col6tth,

.col6ttd{

font-size:0.4em;

padding:10px0px;

}

.col5tth,

.col5ttd{

font-size:0.5em;

padding:10px0px;

}

.col4tth,

.col4ttd{

font-size:0.7em;

padding:10px5px;

}

.col3tth,

.col3ttd{

font-size:0.8em;

padding:10px10px;

}

パステルカラーテーブル（比較表）

アフィリエイトの商品比較におすすめ。１位商品をアピール（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を追加したあとテーブルタグにクラス名【osare-table osare-hikaku col5t】の３つを追加するのみでOKです。

<table class="osare-table osare-hikaku col5t">
<tfoot>
<tr>
<th>Price</th>
<td>100yen</td>
<td>200yen</td>
<td>200yen</td>
<td>200yen</td>
</tr>
</tfoot>
<thead>
<tr>
<th></th>
<th>Goods1</th>
<th>Goods2</th>
<th>Goods3</th>
<th>Goods4</th>
</tr>
</thead>
<tbody>
<tr>
<th>property1</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property2</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property3</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property4</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</tbody>
</table>

<tableclass="osare-table osare-hikaku col5t">

<tfoot>

<tr>

<th>Price</th>

</tr>

</tfoot>

<thead>

<tr>

<th>Goods1</th>

<th>Goods2</th>

<th>Goods3</th>

<th>Goods4</th>

</tr>

</thead>

<tbody>

<tr>

<th>property1</th>

</tr>

<tr>

<th>property2</th>

</tr>

<tr>

<th>property3</th>

</tr>

<tr>

<th>property4</th>

</tr>

</tbody>

</table>

CSS

/***　おしゃれテーブル１　パステルカラー ***/
 
.osare-table {
 width:100%;
 table-layout: fixed;
 border: none !important;
 border-collapse: separate;
 border-spacing: 7px 0px;
}
 
.osare-table th {
 border: none !important;
}
 
.osare-table tbody td {
   border: none !important;
  background-color:#FFF9FF !important;
  border-bottom: solid 2px #f9f9f9 !important;
}
 
/* ヘッダー */
.osare-table thead th {
 font-weight: bold;
 border-radius: 10px 10px 0px 0px;
}

/* フッター（比較表と色つけたとき用） */
.osare-table tfoot td {
 border:none;
 border-radius: 0 0 10px 10px;
}
 
 
/* ボディ項目 */
.osare-table tbody th {
 background:#f2f5fc;
 font-weight: bold;
 border-bottom: solid 2px #f9f9f9 !important;
 line-height:4.5em;
}
 
/* フッター項目 */
.osare-table tfoot th {
 background:none;
 line-height:3em;
 font-weight: bold;
}


 
/* ボディデータ */
.osare-table tbody td {
 text-align:center;
}
 
/* ヘッダー行　１列ごとの色変え */
.osare-table thead th:nth-child(1)  {
 background:#81d4fa;
}

.osare-table thead th:nth-child(2)  {
 background: #FFBCFF;
}
.osare-table thead th:nth-child(3)  {
 background: #FFFFB2;
}
.osare-table thead th:nth-child(4)  {
 background: #C4FF89;
}
.osare-table thead th:nth-child(5)  {
 background: #FFB2D8;
}
 
/* 最終行のボーダーをなくす */
.osare-table tbody tr:last-child th,
.osare-table tbody tr:last-child td {
 border-bottom:none !important;
}


/* スマホ調整 */
@media (max-width: 767px) {
	.osare-table thead th,
	.osare-table tbody th {
			padding:0;
	}
	.osare-table tfoot td {
	padding:0;
	font-size:0.9em;
	}
.osare-table tfoot td:nth-child(2) {
	 font-size:1em;
	}
	
}


/***　おしゃれテーブル比較用 ***/
/* おすすめ商品枠 */
.osare-hikaku thead th:nth-child(2)  {
	border-top:solid 3px #f8bbd0 !important;
	border-left:solid 3px #f8bbd0 !important;
	border-right:solid 3px #f8bbd0 !important;
}
.osare-hikaku  td:nth-child(2)  {
	border-left:solid 3px #f8bbd0 !important;
	border-right:solid 3px #f8bbd0 !important;
}
.osare-hikaku tfoot td:nth-child(2)  {
	border-bottom:solid 3px #f8bbd0 !important;
	border-left:solid 3px #f8bbd0 !important;
	border-right:solid 3px #f8bbd0 !important;
}


/*（共通）　項目の多いテーブルの幅を調整*/
@media (max-width: 767px) {
 .col6t th,
 .col6t td{
 font-size:0.4em;
 padding: 10px 0px;
 }
 .col5t th,
 .col5t td{
 font-size:0.5em;
 padding: 10px 0px;
 }
 .col4t th,
 .col4t td{
 font-size:0.7em;
 padding: 10px 5px;
 }
 .col3t th,
 .col3t td{
 font-size:0.8em;
 padding: 10px 10px;
 }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

/***　おしゃれテーブル１　パステルカラー ***/

.osare-table{

width:100%;

table-layout:fixed;

border:none!important;

border-collapse:separate;

border-spacing:7px0px;

}

.osare-table th{

border:none!important;

}

.osare-table tbody td{

border:none!important;

background-color:#FFF9FF!important;

border-bottom:solid2px#f9f9f9!important;

}

/* ヘッダー */

.osare-table thead th{

font-weight:bold;

border-radius:10px10px0px0px;

}

/* フッター（比較表と色つけたとき用） */

.osare-table tfoot td{

border:none;

border-radius:0010px10px;

}

/* ボディ項目 */

.osare-table tbody th{

background:#f2f5fc;

font-weight:bold;

border-bottom:solid2px#f9f9f9!important;

line-height:4.5em;

}

/* フッター項目 */

.osare-table tfoot th{

background:none;

line-height:3em;

font-weight:bold;

}

/* ボディデータ */

.osare-table tbody td{

text-align:center;

}

/* ヘッダー行　１列ごとの色変え */

.osare-table thead th:nth-child(1) {

background:#81d4fa;

}

.osare-table thead th:nth-child(2) {

background:#FFBCFF;

}

.osare-table thead th:nth-child(3) {

background:#FFFFB2;

}

.osare-table thead th:nth-child(4) {

background:#C4FF89;

}

.osare-table thead th:nth-child(5) {

background:#FFB2D8;

}

/* 最終行のボーダーをなくす */

.osare-table tbody tr:last-child th,

.osare-table tbody tr:last-child td{

border-bottom:none!important;

}

/* スマホ調整 */

@media (max-width: 767px){

.osare-table thead th,

.osare-table tbody th{

padding:0;

}

.osare-table tfoot td{

padding:0;

font-size:0.9em;

}

.osare-table tfoot td:nth-child(2){

font-size:1em;

}

/***　おしゃれテーブル比較用 ***/

/* おすすめ商品枠 */

.osare-hikaku thead th:nth-child(2) {

border-top:solid3px#f8bbd0!important;

border-left:solid3px#f8bbd0!important;

border-right:solid3px#f8bbd0!important;

}

.osare-hikaku td:nth-child(2) {

border-left:solid3px#f8bbd0!important;

border-right:solid3px#f8bbd0!important;

}

.osare-hikaku tfoot td:nth-child(2) {

border-bottom:solid3px#f8bbd0!important;

border-left:solid3px#f8bbd0!important;

border-right:solid3px#f8bbd0!important;

}

/*（共通）　項目の多いテーブルの幅を調整*/

@media (max-width: 767px){

.col6t th,

.col6t td{

font-size:0.4em;

padding:10px0px;

}

.col5t th,

.col5t td{

font-size:0.5em;

padding:10px0px;

}

.col4t th,

.col4t td{

font-size:0.7em;

padding:10px5px;

}

.col3t th,

.col3t td{

font-size:0.8em;

padding:10px10px;

}

ポルカドットテーブル

水玉と言ったらダメなのかポルカドットよ。個人的にチョコミントが好きなので緑ベースをチョイスしました。

	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

<table class="osare5-table col5t">
<tfoot>
<tr>
<th>Price</th>
<td>100yen</td>
<td>200yen</td>
<td>200yen</td>
<td>200yen</td>
</tr>
</tfoot>
<thead>
<tr>
<th></th>
<th>Goods1</th>
<th>Goods2</th>
<th>Goods3</th>
<th>Goods4</th>
</tr>
</thead>
<tbody>
<tr>
<th>property1</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property2</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property3</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property4</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</tbody>
</table>

<tableclass="osare5-table col5t">

<tfoot>

<tr>

<th>Price</th>

</tr>

</tfoot>

<thead>

<tr>

<th>Goods1</th>

<th>Goods2</th>

<th>Goods3</th>

<th>Goods4</th>

</tr>

</thead>

<tbody>

<tr>

<th>property1</th>

</tr>

<tr>

<th>property2</th>

</tr>

<tr>

<th>property3</th>

</tr>

<tr>

<th>property4</th>

</tr>

</tbody>

</table>

CSS

/***　おしゃれテーブル5　ポルカドット ***/
 
.osare5-table {
 width:100%;
 table-layout: fixed;
   border: none !important;
    border-collapse: separate;
    border-spacing: 4px 4px;
}


.osare5-table th {
   border: none !important;
}

.osare5-table tbody td {
	border: none !important;
	background-color:#f0fff0 !important;
	border-bottom: solid 2px #f9f9f9 !important;
	background-image: radial-gradient(white 15%, transparent 16%),
	radial-gradient(white 15%, transparent 16%);
	background-size:30px 30px;
	background-position: 0 0, 15px 15px;

}

/* ヘッダー */
.osare5-table thead th {
	font-weight: bold;
	border-radius: 5px 5px 5px 5px;
	background:#f6f0ff;
}

/* フッター（比較表と色つけたとき用） */
.osare5-table tfoot td {
border-radius: 0 0 10px 10px;
}
 
 
/* ボディ項目 */
.osare5-table tbody th {
	border-radius: 5px 5px 5px 5px;
	background:#fffcf0;
	font-weight: bold;
	border-bottom: solid 2px #f9f9f9 !important;
	line-height:4.5em;
}
 
/* フッター項目 */
.osare5-table tfoot th {
 background:none;
 line-height:3em;
 font-weight: bold;
}


/* フッターデータ(フッターがあるときのみ有効) */
.osare5-hikaku tfoot td {
 border: none !important;
 background:none;
 text-align:center;
 font-weight:600;
 font-size:1em;
}

 
/* ボディデータ */
.osare5-table tbody td {
 text-align:center;
}
 
.osare5-table thead th:first-child  {
	background:none;
}

 
/* 最終行のボーダーをなくす */
.osare5-table tbody tr:last-child th,
.osare5-table tbody tr:last-child td {
 border-bottom:none !important;
}

/* スマホ調整 */
@media (max-width: 767px) {
	.osare5-table thead th,
	.osare5-table tbody th {
			padding:0;
	}
	.osare5-table tfoot td {
	padding:0;
	font-size:0.9em;
	}
.osare5-table tfoot td:nth-child(2) {
	 font-size:1em;
	}
	
}

/***　おしゃれテーブル5　ポルカドット ***/

.osare5-table{

width:100%;

table-layout:fixed;

border:none!important;

border-collapse:separate;

border-spacing:4px4px;

}

.osare5-table th{

border:none!important;

}

.osare5-table tbody td{

border:none!important;

background-color:#f0fff0!important;

border-bottom:solid2px#f9f9f9!important;

background-image:radial-gradient(white15%,transparent16%),

radial-gradient(white15%,transparent16%);

background-size:30px30px;

background-position:00,15px15px;

}

/* ヘッダー */

.osare5-table thead th{

font-weight:bold;

border-radius:5px5px5px5px;

background:#f6f0ff;

}

/* フッター（比較表と色つけたとき用） */

.osare5-table tfoot td{

border-radius:0010px10px;

}

/* ボディ項目 */

.osare5-table tbody th{

border-radius:5px5px5px5px;

background:#fffcf0;

font-weight:bold;

border-bottom:solid2px#f9f9f9!important;

line-height:4.5em;

}

/* フッター項目 */

.osare5-table tfoot th{

background:none;

line-height:3em;

font-weight:bold;

}

/* フッターデータ(フッターがあるときのみ有効) */

.osare5-hikaku tfoot td{

border:none!important;

background:none;

text-align:center;

font-weight:600;

font-size:1em;

}

/* ボディデータ */

.osare5-table tbody td{

text-align:center;

}

.osare5-table thead th:first-child {

background:none;

}

/* 最終行のボーダーをなくす */

.osare5-table tbody tr:last-child th,

.osare5-table tbody tr:last-child td{

border-bottom:none!important;

}

/* スマホ調整 */

@media (max-width: 767px){

.osare5-table thead th,

.osare5-table tbody th{

padding:0;

}

.osare5-table tfoot td{

padding:0;

font-size:0.9em;

}

.osare5-table tfoot td:nth-child(2){

font-size:1em;

}

Google Chrome カラーテーブル

SEOに効きそうな Google Chromeカラーのテーブル。ただの縁担ぎテーブル。オシャレでも可愛くもないか。

	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

<table class="osare2-table col5t">
<thead>
<tr>
<th></th>
<th>Goods1</th>
<th>Goods2</th>
<th>Goods3</th>
<th>Goods4</th>
</tr>
</thead>
<tbody>
<tr>
<th>property1</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property2</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property3</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property4</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</tbody>
</table>

<tableclass="osare2-table col5t">

<thead>

<tr>

<th>Goods1</th>

<th>Goods2</th>

<th>Goods3</th>

<th>Goods4</th>

</tr>

</thead>

<tbody>

<tr>

<th>property1</th>

</tr>

<tr>

<th>property2</th>

</tr>

<tr>

<th>property3</th>

</tr>

<tr>

<th>property4</th>

</tr>

</tbody>

</table>

CSS

/***　おしゃれテーブル2　Chromeカラー ***/
 
.osare2-table {
 width:100%;
 table-layout: fixed;
 border: none !important;
 border-collapse: separate;
 border-spacing: 7px 0px;
}

.osare2-table tfoot td {
 border-radius: 0 0 10px 10px;
}

.osare2-table th {
 border: none !important;
 border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
}
 
.osare2-table tbody td {
 border: none !important;
 background-color:#FFF9FF !important;
 border-bottom: solid 2px #f9f9f9 !important;
}
 
/* ヘッダー */
.osare2-table thead th {
 font-weight: bold;
}
 
 
/* ボディ項目・フッター項目 */
.osare2-table tbody th,
.osare2-table tfoot th {
 background:#FFF;
 font-weight: bold;
 border-bottom: solid 2px #f9f9f9 !important;
 line-height:4.5em;
}
 
 
 
/* ボディデータ・フッターデータ */
.osare2-table tbody td,
.osare2-table tfoot td {
 text-align:center;
}
 
/* ヘッダー行　１列ごとの色変え */
.osare2-table thead th:nth-child(1)  {
 background:#FFF;
}
 
.osare2-table thead th:nth-child(2)  {
 background: #1DA462;
}
.osare2-table thead th:nth-child(3)  {
 background: #DD5144;
}
.osare2-table thead th:nth-child(4)  {
 background: #FFCD46;
}
.osare2-table thead th:nth-child(5)  {
 background: #4C8BF5;
}


/* 最終行のボーダーをなくす */
.osare2-table tbody tr:last-child th,
.osare2-table tbody tr:last-child td,
.osare2-table tfoot tr:last-child th{
 border-bottom:none !important;
}

/* スマホ調整 */
@media (max-width: 767px) {
	.osare2-table thead th,
	.osare2-table tbody th {
			padding:0;
	}
	.osare2-table tfoot td {
	padding:0;
	font-size:0.9em;
	}
.osare2-table tfoot td:nth-child(2) {
	 font-size:1em;
	}
	
}

/*（共通）　項目の多いテーブルの幅を調整*/
@media (max-width: 767px) {
 .col6t th,
 .col6t td{
 font-size:0.4em;
 padding: 10px 0px;
 }
 .col5t th,
 .col5t td{
 font-size:0.5em;
 padding: 10px 0px;
 }
 .col4t th,
 .col4t td{
 font-size:0.7em;
 padding: 10px 5px;
 }
 .col3t th,
 .col3t td{
 font-size:0.8em;
 padding: 10px 10px;
 }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

/***　おしゃれテーブル2　Chromeカラー ***/

.osare2-table{

width:100%;

table-layout:fixed;

border:none!important;

border-collapse:separate;

border-spacing:7px0px;

}

.osare2-table tfoot td{

border-radius:0010px10px;

}

.osare2-table th{

border:none!important;

border-radius:10px10px0px0px/10px10px0px0px;

}

.osare2-table tbody td{

border:none!important;

background-color:#FFF9FF!important;

border-bottom:solid2px#f9f9f9!important;

}

/* ヘッダー */

.osare2-table thead th{

font-weight:bold;

}

/* ボディ項目・フッター項目 */

.osare2-table tbody th,

.osare2-table tfoot th{

background:#FFF;

font-weight:bold;

border-bottom:solid2px#f9f9f9!important;

line-height:4.5em;

}

/* ボディデータ・フッターデータ */

.osare2-table tbody td,

.osare2-table tfoot td{

text-align:center;

}

/* ヘッダー行　１列ごとの色変え */

.osare2-table thead th:nth-child(1) {

background:#FFF;

}

.osare2-table thead th:nth-child(2) {

background:#1DA462;

}

.osare2-table thead th:nth-child(3) {

background:#DD5144;

}

.osare2-table thead th:nth-child(4) {

background:#FFCD46;

}

.osare2-table thead th:nth-child(5) {

background:#4C8BF5;

}

/* 最終行のボーダーをなくす */

.osare2-table tbody tr:last-child th,

.osare2-table tbody tr:last-child td,

.osare2-table tfoot tr:last-child th{

border-bottom:none!important;

}

/* スマホ調整 */

@media (max-width: 767px){

.osare2-table thead th,

.osare2-table tbody th{

padding:0;

}

.osare2-table tfoot td{

padding:0;

font-size:0.9em;

}

.osare2-table tfoot td:nth-child(2){

font-size:1em;

}

/*（共通）　項目の多いテーブルの幅を調整*/

@media (max-width: 767px){

.col6t th,

.col6t td{

font-size:0.4em;

padding:10px0px;

}

.col5t th,

.col5t td{

font-size:0.5em;

padding:10px0px;

}

.col4t th,

.col4t td{

font-size:0.7em;

padding:10px5px;

}

.col3t th,

.col3t td{

font-size:0.8em;

padding:10px10px;

}

Google Chrome カラーテーブル（比較表）

Chromeカラーの比較表。一応、安心カラーのグリーンをイチオシしとこ。

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

HTML

<table class="osare2-table osare-hikaku col5t">
<tfoot>
<tr>
<th>Star</th>
<td>★★★</td>
<td>&nbsp;★★</td>
<td>&nbsp;★★</td>
<td>&nbsp;★</td>
</tr>
</tfoot>
<thead>
<tr>
<th></th>
<th>Goods1</th>
<th>Goods2</th>
<th>Goods3</th>
<th>Goods4</th>
</tr>
</thead>
<tbody>
<tr>
<th>property1</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property2</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property3</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property4</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
</tbody>
</table>

<tableclass="osare2-table osare-hikaku col5t">

<tfoot>

<tr>

</tr>

</tfoot>

<thead>

<tr>

<th>Goods1</th>

<th>Goods2</th>

<th>Goods3</th>

<th>Goods4</th>

</tr>

</thead>

<tbody>

<tr>

<th>property1</th>

</tr>

<tr>

<th>property2</th>

</tr>

<tr>

<th>property3</th>

</tr>

<tr>

<th>property4</th>

</tr>

</tbody>

</table>

CSS

/***　おしゃれテーブル2　Chromeカラー ***/
 
.osare2-table {
 width:100%;
 table-layout: fixed;
 border: none !important;
 border-collapse: separate;
 border-spacing: 7px 0px;
}

.osare2-table tfoot td {
 border-radius: 0 0 10px 10px;
}

.osare2-table th {
 border: none !important;
 border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
}
 
.osare2-table tbody td {
 border: none !important;
 background-color:#FFF9FF !important;
 border-bottom: solid 2px #f9f9f9 !important;
}
 
/* ヘッダー */
.osare2-table thead th {
 font-weight: bold;
}
 
 
/* ボディ項目・フッター項目 */
.osare2-table tbody th,
.osare2-table tfoot th {
 background:#FFF;
 font-weight: bold;
 border-bottom: solid 2px #f9f9f9 !important;
 line-height:4.5em;
}
 
 
 
/* ボディデータ・フッターデータ */
.osare2-table tbody td,
.osare2-table tfoot td {
 text-align:center;
}
 
/* ヘッダー行　１列ごとの色変え */
.osare2-table thead th:nth-child(1)  {
 background:#FFF;
}
 
.osare2-table thead th:nth-child(2)  {
 background: #1DA462;
}
.osare2-table thead th:nth-child(3)  {
 background: #DD5144;
}
.osare2-table thead th:nth-child(4)  {
 background: #FFCD46;
}
.osare2-table thead th:nth-child(5)  {
 background: #4C8BF5;
}


/* 最終行のボーダーをなくす */
.osare2-table tbody tr:last-child th,
.osare2-table tbody tr:last-child td,
.osare2-table tfoot tr:last-child th{
 border-bottom:none !important;
}

/***　おしゃれテーブル比較用 ***/
/* おすすめ商品枠 */
.osare-hikaku thead th:nth-child(2)  {
	border-top:solid 3px #f8bbd0 !important;
	border-left:solid 3px #f8bbd0 !important;
	border-right:solid 3px #f8bbd0 !important;
}
.osare-hikaku  td:nth-child(2)  {
	border-left:solid 3px #f8bbd0 !important;
	border-right:solid 3px #f8bbd0 !important;
}
.osare-hikaku tfoot td:nth-child(2)  {
	border-bottom:solid 3px #f8bbd0 !important;
	border-left:solid 3px #f8bbd0 !important;
	border-right:solid 3px #f8bbd0 !important;
}


/* スマホ調整 */
@media (max-width: 767px) {
	.osare2-table thead th,
	.osare2-table tbody th {
			padding:0;
	}
	.osare2-table tfoot td {
	padding:0;
	font-size:0.9em;
	}
.osare2-table tfoot td:nth-child(2) {
	 font-size:1em;
	}
	
}


/*（共通）　項目の多いテーブルの幅を調整*/
@media (max-width: 767px) {
 .col6t th,
 .col6t td{
 font-size:0.4em;
 padding: 10px 0px;
 }
 .col5t th,
 .col5t td{
 font-size:0.5em;
 padding: 10px 0px;
 }
 .col4t th,
 .col4t td{
 font-size:0.7em;
 padding: 10px 5px;
 }
 .col3t th,
 .col3t td{
 font-size:0.8em;
 padding: 10px 10px;
 }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

/***　おしゃれテーブル2　Chromeカラー ***/

.osare2-table{

width:100%;

table-layout:fixed;

border:none!important;

border-collapse:separate;

border-spacing:7px0px;

}

.osare2-table tfoot td{

border-radius:0010px10px;

}

.osare2-table th{

border:none!important;

border-radius:10px10px0px0px/10px10px0px0px;

}

.osare2-table tbody td{

border:none!important;

background-color:#FFF9FF!important;

border-bottom:solid2px#f9f9f9!important;

}

/* ヘッダー */

.osare2-table thead th{

font-weight:bold;

}

/* ボディ項目・フッター項目 */

.osare2-table tbody th,

.osare2-table tfoot th{

background:#FFF;

font-weight:bold;

border-bottom:solid2px#f9f9f9!important;

line-height:4.5em;

}

/* ボディデータ・フッターデータ */

.osare2-table tbody td,

.osare2-table tfoot td{

text-align:center;

}

/* ヘッダー行　１列ごとの色変え */

.osare2-table thead th:nth-child(1) {

background:#FFF;

}

.osare2-table thead th:nth-child(2) {

background:#1DA462;

}

.osare2-table thead th:nth-child(3) {

background:#DD5144;

}

.osare2-table thead th:nth-child(4) {

background:#FFCD46;

}

.osare2-table thead th:nth-child(5) {

background:#4C8BF5;

}

/* 最終行のボーダーをなくす */

.osare2-table tbody tr:last-child th,

.osare2-table tbody tr:last-child td,

.osare2-table tfoot tr:last-child th{

border-bottom:none!important;

}

/***　おしゃれテーブル比較用 ***/

/* おすすめ商品枠 */

.osare-hikaku thead th:nth-child(2) {

border-top:solid3px#f8bbd0!important;

border-left:solid3px#f8bbd0!important;

border-right:solid3px#f8bbd0!important;

}

.osare-hikaku td:nth-child(2) {

border-left:solid3px#f8bbd0!important;

border-right:solid3px#f8bbd0!important;

}

.osare-hikaku tfoot td:nth-child(2) {

border-bottom:solid3px#f8bbd0!important;

border-left:solid3px#f8bbd0!important;

border-right:solid3px#f8bbd0!important;

}

/* スマホ調整 */

@media (max-width: 767px){

.osare2-table thead th,

.osare2-table tbody th{

padding:0;

}

.osare2-table tfoot td{

padding:0;

font-size:0.9em;

}

.osare2-table tfoot td:nth-child(2){

font-size:1em;

}

/*（共通）　項目の多いテーブルの幅を調整*/

@media (max-width: 767px){

.col6t th,

.col6t td{

font-size:0.4em;

padding:10px0px;

}

.col5t th,

.col5t td{

font-size:0.5em;

padding:10px0px;

}

.col4t th,

.col4t td{

font-size:0.7em;

padding:10px5px;

}

.col3t th,

.col3t td{

font-size:0.8em;

padding:10px10px;

}

シアンカラーテーブル

シアンのパステルカラーをヘッダーに一色使ったシンプルなテーブル。横配列に見えるデザインなので商品比較にはあまり向かないかも。商品の機能紹介などに。

	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

<table class="osare3-table col4t">
<thead>
<tr>
<th></th>
<th>Goods1</th>
<th>Goods2</th>
<th>Goods3</th>
<th>Goods4</th>
</tr>
</thead>
<tbody>
<tr>
<th>property1</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property2</th>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th>property3</th>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th>property4</th>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>

<tableclass="osare3-table col4t">

<thead>

<tr>

<th>Goods1</th>

<th>Goods2</th>

<th>Goods3</th>

<th>Goods4</th>

</tr>

</thead>

<tbody>

<tr>

<th>property1</th>

</tr>

<tr>

<th>property2</th>

</tr>

<tr>

<th>property3</th>

</tr>

<tr>

<th>property4</th>

</tr>

</tbody>

</table>

CSS

/***　おしゃれテーブル3 シアンカラー　***/
.osare3-table {
 width:100%;
 border-collapse: separate; 
 border: none;
 border-spacing: 0px 10px ;
}

.osare3-table tbody td, 
.osare3-table tfoot td {
 text-align: center;
}

/* 上部ヘッダー（背景：パステルカラー） */
.osare3-table thead th {
 color: #FFF; 
 font-weight: bold;
 background:#00BCD4;
}

/* 上部ヘッダーの丸み */
.osare3-table thead th:nth-child(2) {
 border-radius: 10px 0 0 0;
}
.osare3-table thead th:last-child  {
 border-radius: 0 10px  0 0;
}

.osare3-table th,
.osare3-table td {
 border: 0 none !important;
}

/* １行ずつ色変更　不要なら削除 even:奇数行　odd:偶数行 */
.osare3-table tr:nth-child(even) td { 
 background: #f5f5f5; 
} 
.osare3-table tr:nth-child(odd) td {
 background: #FDFDFD; 
}

/* ヘッダーセル先頭・ボディ項目・フッター項目 */
.osare3-table tbody th,
.osare3-table tfoot th,
.osare3-table thead th:first-child {
 background:none;
 color:#666;
 font-weight: bold;
 line-height:4.5em;
 text-align:right;
}


/*（共通）　項目の多いテーブルの幅を調整*/
@media (max-width: 767px) {
 .col6t th,
 .col6t td{
 font-size:0.4em;
 padding: 10px 0px;
 }
 .col5t th,
 .col5t td{
 font-size:0.5em;
 padding: 10px 0px;
 }
 .col4t th,
 .col4t td{
 font-size:0.7em;
 padding: 10px 5px;
 }
 .col3t th,
 .col3t td{
 font-size:0.8em;
 padding: 10px 10px;
 }
}

/***　おしゃれテーブル3 シアンカラー　***/

.osare3-table{

width:100%;

border-collapse:separate;

border:none;

border-spacing:0px10px;

}

.osare3-table tbody td,

.osare3-table tfoot td{

text-align:center;

}

/* 上部ヘッダー（背景：パステルカラー） */

.osare3-table thead th{

color:#FFF;

font-weight:bold;

background:#00BCD4;

}

/* 上部ヘッダーの丸み */

.osare3-table thead th:nth-child(2){

border-radius:10px000;

}

.osare3-table thead th:last-child {

border-radius:010px 00;

}

.osare3-table th,

.osare3-table td{

border:0none!important;

}

/* １行ずつ色変更　不要なら削除 even:奇数行　odd:偶数行 */

.osare3-table tr:nth-child(even) td{

background:#f5f5f5;

}

.osare3-table tr:nth-child(odd) td{

background:#FDFDFD;

}

/* ヘッダーセル先頭・ボディ項目・フッター項目 */

.osare3-table tbody th,

.osare3-table tfoot th,

.osare3-table thead th:first-child{

background:none;

color:#666;

font-weight:bold;

line-height:4.5em;

text-align:right;

}

/*（共通）　項目の多いテーブルの幅を調整*/

@media (max-width: 767px){

.col6t th,

.col6t td{

font-size:0.4em;

padding:10px0px;

}

.col5t th,

.col5t td{

font-size:0.5em;

padding:10px0px;

}

.col4t th,

.col4t td{

font-size:0.7em;

padding:10px5px;

}

.col3t th,

.col3t td{

font-size:0.8em;

padding:10px10px;

}

マゼンダカラーテーブル

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

	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

<table class="osare4-table col4t">
<thead>
<tr>
<th></th>
<th>Goods1</th>
<th>Goods2</th>
<th>Goods3</th>
<th>Goods4</th>
</tr>
</thead>
<tbody>
<tr>
<th>property1</th>
<td>100</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>property2</th>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th>property3</th>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th>property4</th>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>

<tableclass="osare4-table col4t">

<thead>

<tr>

<th>Goods1</th>

<th>Goods2</th>

<th>Goods3</th>

<th>Goods4</th>

</tr>

</thead>

<tbody>

<tr>

<th>property1</th>

</tr>

<tr>

<th>property2</th>

</tr>

<tr>

<th>property3</th>

</tr>

<tr>

<th>property4</th>

</tr>

</tbody>

</table>

CSS

/***　おしゃれテーブル4 マゼンダカラー　***/
.osare4-table {
 width:100%;
 border-collapse: separate; 
 border: none;
 border-spacing: 0px 10px ;
}

.osare4-table tbody td, 
.osare4-table tfoot td {
 text-align: center;
}

/* 上部ヘッダー（背景：パステルカラー） */
.osare4-table thead th {
 color: #FFF; 
 font-weight: bold;
 background:#E91E63;
}

/* 上部ヘッダーの丸み */
.osare4-table thead th:nth-child(2) {
 border-radius: 10px 0 0 0;
}
.osare4-table thead th:last-child  {
 border-radius: 0 10px  0 0;
}

.osare4-table th,
.osare4-table td {
 border: 0 none !important;
}

/* １行ずつ色変更　不要なら削除 even:奇数行　odd:偶数行 */
.osare4-table tr:nth-child(even) td { 
 background: #fff9fc; 
} 
.osare4-table tr:nth-child(odd) td {
 background: #fff9ff; 
}

/* ヘッダーセル先頭・ボディ項目・フッター項目 */
.osare4-table tbody th,
.osare4-table tfoot th,
.osare4-table thead th:first-child {
 background:none;
 color:#666;
 font-weight: bold;
 line-height:4.5em;
 text-align:right;
}


/*（共通）　項目の多いテーブルの幅を調整*/
@media (max-width: 767px) {
 .col6t th,
 .col6t td{
 font-size:0.4em;
 padding: 10px 0px;
 }
 .col5t th,
 .col5t td{
 font-size:0.5em;
 padding: 10px 0px;
 }
 .col4t th,
 .col4t td{
 font-size:0.7em;
 padding: 10px 5px;
 }
 .col3t th,
 .col3t td{
 font-size:0.8em;
 padding: 10px 10px;
 }
}

/***　おしゃれテーブル4 マゼンダカラー　***/

.osare4-table{

width:100%;

border-collapse:separate;

border:none;

border-spacing:0px10px;

}

.osare4-tabletbodytd,

.osare4-tabletfoottd{

text-align:center;

}

/* 上部ヘッダー（背景：パステルカラー） */

.osare4-tabletheadth{

color:#FFF;

font-weight:bold;

background:#E91E63;

}

/* 上部ヘッダーの丸み */

.osare4-tabletheadth:nth-child(2){

border-radius:10px000;

}

.osare4-tabletheadth:last-child {

border-radius:010px 00;

}

.osare4-tableth,

.osare4-tabletd{

border:0none!important;

}

/* １行ずつ色変更　不要なら削除 even:奇数行　odd:偶数行 */

.osare4-tabletr:nth-child(even)td{

background:#fff9fc;

}

.osare4-tabletr:nth-child(odd)td{

background:#fff9ff;

}

/* ヘッダーセル先頭・ボディ項目・フッター項目 */

.osare4-tabletbodyth,

.osare4-tabletfootth,

.osare4-tabletheadth:first-child{

background:none;

color:#666;

font-weight:bold;

line-height:4.5em;

text-align:right;

}

/*（共通）　項目の多いテーブルの幅を調整*/

@media(max-width:767px){

.col6tth,

.col6ttd{

font-size:0.4em;

padding:10px0px;

}

.col5tth,

.col5ttd{

font-size:0.5em;

padding:10px0px;

}

.col4tth,

.col4ttd{

font-size:0.7em;

padding:10px5px;

}

.col3tth,

.col3ttd{

font-size:0.8em;

padding:10px10px;

}

日本の伝統色を使ったテーブルデザインもオススメです。