商品比較テーブル テンプレート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>

 

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

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

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

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

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

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

mixhost
mixhost

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

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

コメント