商品比較テーブル テンプレートHTML/CSS

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

レスポンシブテーブルデザインのHTML / CSS のテンプレート置き場。ご自由にお使いください。

WordPressのTinyMCE Advancedでレスポンシブテーブルを作っても列が多すぎると画面からはみ出てしまいます。今回作ったレスポンシブテーブルは列の長さに合わせて文字とスペースを調整してスマホでも画面をはみ出すことがありません。

標準的なデザインはここに置いていますが、変わったデザインをお探しの方はこちらの記事もおすすめ▼

 

ビフォーアフター

テーブル用CSS(共通)

以下のCSSをテーマCSSに追加してください。

テーブルデザインCSS
/*** 奈良カラー ***/

.nara-table {
	table-layout: fixed;
	width:100%;
}


/* ヘッダー */
.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;
}

 

スマホ文字調整CSS
/*(スマホ対応)項目の多いテーブルの幅を調整*/
@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;
	}
}

 

検証端末

Chrome Developer Toolsにて

iPhone5 / iPhone6 / iPhone7 / iPhone8 / iPhone X

を検証済。

比較項目が多い比較表

 

6列テーブル

おすすめ★★★★★★★★★★★★★★
項目商品1商品2商品3商品4商品5
見た目90点100点50点50点50点
ニオイ100点50点50点50点50点
100点50点50点50点50点
価格1,000円1,500円2,000円2,500円3,000円
HTML
<table class="nara-table col6t">
<tfoot>
<tr>
<th>おすすめ</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
<th>商品3</th>
<th>商品4</th>
<th>商品5</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>ニオイ</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>味</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>価格</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

 

 

5列テーブル

おすすめ★★★★★★★★★★★★★★
項目商品1商品2商品3商品4
見た目90点100点50点50点
ニオイ100点50点50点50点
100点50点50点50点
価格1,000円1,500円2,000円2,500円
HTML
<table class="nara-table col5t">
<tfoot>
<tr>
<th>おすすめ</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
<th>商品3</th>
<th>商品4</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>ニオイ</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>味</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>価格</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

 

 

4列テーブル

おすすめ★★★★★★★★★★★★
項目商品1商品2商品3
見た目90点100点50点
ニオイ100点50点50点
100点50点50点
価格1,000円1,500円2,000円
HTML
<table class="nara-table col4t">
<tfoot>
<tr>
<th>おすすめ</th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</th>
<th>商品3</th>
</tr>
</thead>
<tbody>
<tr>
<th>見た目</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>ニオイ</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>味</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>価格</th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

 

 

3列テーブル

おすすめ★★★★★★★★★
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格1,000円1,500円
HTML
<table class="nara-table col3t">
<tfoot>
<tr>
<th>おすすめ</th>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<th>項目</th>
<th>商品1</th>
<th>商品2</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>

 

商品数が多い比較表

 

6列テーブル

商品名見た目ニオイ価格おすすめ
商品190点100点100点1,000円★★★★★
商品2100点50点50点1,500円★★★★
商品3100点50点50点2,000円★★★
商品4100点50点50点2,500円★★
商品5100点50点50点3,000円
HTML
<table class="nara-table col6t">
<thead>
<tr>
<th>商品名</th>
<th>見た目</th>
<th>ニオイ</th>
<th>味</th>
<th>価格</th>
<th>おすすめ</th>
</tr>
</thead>
<tbody>
<tr>
<th>商品1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品3</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

 

5列テーブル

商品名ニオイ価格おすすめ
商品1100点100点1,000円★★★★★
商品250点50点1,500円★★★★
商品350点50点2,000円★★★
商品450点50点2,500円★★
商品550点50点3,000円
HTML
<table class="nara-table col5t">
<thead>
<tr>
<th>商品名</th>
<th>ニオイ</th>
<th>味</th>
<th>価格</th>
<th>おすすめ</th>
</tr>
</thead>
<tbody>
<tr>
<th>商品1</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品2</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品3</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品4</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品5</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

 

 

4列テーブル

商品名価格おすすめ
商品1100点1,000円★★★★★
商品250点1,500円★★★★
商品350点2,000円★★★
商品450点2,500円★★
商品550点3,000円
HTML
<table class="nara-table col4t">
<thead>
<tr>
<th>商品名</th>
<th>味</th>
<th>価格</th>
<th>おすすめ</th>
</tr>
</thead>
<tbody>
<tr>
<th>商品1</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品2</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品3</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品4</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>商品5</th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

 

 

3列テーブル

商品名価格おすすめ
商品11,000円★★★★★
商品21,500円★★★★
商品32,000円★★★
商品42,500円★★
商品53,000円
HTML
<table class="nara-table">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>おすすめ</th>
</tr>
</thead>
<tbody>
<tr>
<th>商品1</th>
<td></td>
<td></td>
</tr>
<tr>
<th>商品2</th>
<td></td>
<td></td>
</tr>
<tr>
<th>商品3</th>
<td></td>
<td></td>
</tr>
<tr>
<th>商品4</th>
<td></td>
<td></td>
</tr>
<tr>
<th>商品5</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>

 

2列テーブル

商品名おすすめ
商品1★★★★★
商品2★★★★
商品3★★★
商品4★★
商品5
HTML
<table class="nara-table">
<thead>
<tr>
<th>商品名</th>
<th>おすすめ</th>
</tr>
</thead>
<tbody>
<tr>
<th>商品1</th>
<td></td>
</tr>
<tr>
<th>商品2</th>
<td></td>
</tr>
<tr>
<th>商品3</th>
<td></td>
</tr>
<tr>
<th>商品4</th>
<td></td>
</tr>
<tr>
<th>商品5</th>
<td></td>
</tr>
</tbody>
</table>

 

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

がんちゃんブログ運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。アフィリエイトにランチェスター戦略を取り入れた経営を目指しています。

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

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

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

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

mixhost
mixhost

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

おすすめ記事
レンタルサーバー速度比較
レンタルサーバー速度計測を本格的に行いました。今一番おすすめのレンタルサーバーは・・・
がんちゃんブログ

コメント