記事の書き方

テーブルテンプレート

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

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

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

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

 

ビフォーアフター

テーブル用CSS(共通)

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

テーブルデザインCSS

 

スマホ文字調整CSS

 

検証端末

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

 

 

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

 

 

4列テーブル

おすすめ★★★★★★★★★★★★
項目商品1商品2商品3
見た目90点100点50点
ニオイ100点50点50点
100点50点50点
価格1,000円1,500円2,000円
HTML

 

 

3列テーブル

おすすめ★★★★★★★★★
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格1,000円1,500円
HTML

 

商品数が多い比較表

 

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

 

5列テーブル

商品名ニオイ価格おすすめ
商品1100点100点1,000円★★★★★
商品250点50点1,500円★★★★
商品350点50点2,000円★★★
商品450点50点2,500円★★
商品550点50点3,000円
HTML

 

 

4列テーブル

商品名価格おすすめ
商品1100点1,000円★★★★★
商品250点1,500円★★★★
商品350点2,000円★★★
商品450点2,500円★★
商品550点3,000円
HTML

 

 

3列テーブル

商品名価格おすすめ
商品11,000円★★★★★
商品21,500円★★★★
商品32,000円★★★
商品42,500円★★
商品53,000円
HTML

 

2列テーブル

商品名おすすめ
商品1★★★★★
商品2★★★★
商品3★★★
商品4★★
商品5
HTML

 

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

教育を受けられない子どもたちに愛の手を。

child fund japan
最近の記事 おすすめ記事
  1. 感覚SEO
  2. アフィリエイトの目的
  3. カテゴリーページでショートコードが使えない
  4. オシャレで可愛いテーブルデザイン HTML / CSS
  1. アフィリエイト防災
  2. アフィリエイトのキーワード選び
  3. アフィリエイト革命
PAGE TOP