複数のプランや商品を並べて比較してもらいたい時、標準のtableタグのままだと、線が細くて見づらいことがあります。
この記事では、コピペするだけで使える比較表・料金表デザインを20個まとめました。
シンプルな罫線タイプから、おすすめ列を強調したもの、ダークテーマまで、幅広く用意しています。
見積もりツールの記事とも相性がよいテーマです。
カード・リストなどの記事と同じく、HTMLとCSSを分けて掲載しています。
今回も20個、結構なボリュームだね！
うん、使い方だけ先に説明するから、そのあとは気になるところから見てね。
使い方｜HTMLとCSSをそれぞれ貼り付ける
CSSのコードを、サイトのスタイルシートに追加します。
続いて、HTMLのコードを、表を表示したい場所に貼り付けます。表はtableタグで作っているので、行や列を増やしたい時は、trタグ（行）やtd・thタグ（列）を追加してください。
スマホで表が横にはみ出す場合は、tableを囲む要素にoverflow-x: auto;を指定すると、横スクロールで見られるようになります。
01. シンプル罫線の比較表
細い罫線だけで区切った、もっとも基本の比較表です。
実際の見た目
| ライト | スタンダード | |
|---|---|---|
| 月額 | ¥980 | ¥2,980 |
| 容量 | 5GB | 50GB |
HTMLコード
<table class="kts-tbl01"> <tr><th></th><th>ライト</th><th>スタンダード</th></tr> <tr><td>月額</td><td>¥980</td><td>¥2,980</td></tr> <tr><td>容量</td><td>5GB</td><td>50GB</td></tr> </table>CSSコード
.kts-tbl01 { border-collapse: collapse; font-family: sans-serif; font-size: 13px; } .kts-tbl01 th, .kts-tbl01 td { border: 1px solid #D8DCE1; padding: 10px 16px; text-align: center; } .kts-tbl01 th { background: #F1F3F5; color: #1F2933; }02. 縞模様（ストライプ）テーブル
1行おきに背景色を変えて、横のつながりを見やすくします。
実際の見た目
| 項目 | 内容 |
|---|---|
| 対応OS | Windows / Mac |
| サポート | 平日9-18時 |
| 無料期間 | 14日間 |
HTMLコード
<table class="kts-tbl02"> <tr><th>項目</th><th>内容</th></tr> <tr><td>対応OS</td><td>Windows / Mac</td></tr> <tr><td>サポート</td><td>平日9-18時</td></tr> <tr><td>無料期間</td><td>14日間</td></tr> </table>CSSコード
.kts-tbl02 { border-collapse: collapse; width: 280px; font-family: sans-serif; font-size: 13px; } .kts-tbl02 th, .kts-tbl02 td { padding: 10px 14px; text-align: left; } .kts-tbl02 th { background: #1F2933; color: #fff; } .kts-tbl02 tr:nth-child(even) td { background: #F1F3F5; } .kts-tbl02 tr:nth-child(odd) td { background: #fff; }03. ヘッダー色付きテーブル
見出し行に色を敷いて、項目名をはっきり示すテーブルです。
実際の見た目
| プラン | 料金 |
|---|---|
| 個人 | ¥500 |
| チーム | ¥2,000 |
HTMLコード
<table class="kts-tbl03"> <tr><th>プラン</th><th>料金</th></tr> <tr><td>個人</td><td>¥500</td></tr> <tr><td>チーム</td><td>¥2,000</td></tr> </table>CSSコード
.kts-tbl03 { border-collapse: collapse; font-family: sans-serif; font-size: 13px; } .kts-tbl03 th, .kts-tbl03 td { border: 1px solid #E4E4E4; padding: 10px 20px; } .kts-tbl03 th { background: #2E6F5E; color: #fff; }04. 角丸の比較表
外枠を角丸にした、やわらかい印象の比較表です。
実際の見た目
| 機能 | あり／なし |
|---|---|
| API連携 | ○ |
| 複数アカウント | × |
HTMLコード
<table class="kts-tbl04"> <tr><th>機能</th><th>あり／なし</th></tr> <tr><td>API連携</td><td>○</td></tr> <tr><td>複数アカウント</td><td>×</td></tr> </table>CSSコード
.kts-tbl04 { border-collapse: separate; border-spacing: 0; width: 260px; border: 1px solid #D8DCE1; border-radius: 10px; overflow: hidden; font-family: sans-serif; font-size: 13px; } .kts-tbl04 th, .kts-tbl04 td { padding: 10px 14px; border-bottom: 1px solid #E4E4E4; text-align: left; } .kts-tbl04 th { background: #F9FAFB; } .kts-tbl04 tr:last-child td { border-bottom: none; }05. おすすめ列をハイライトした表
おすすめのプラン列だけ色を変えて、目立たせる比較表です。
実際の見た目
| ライト | スタンダード | プロ | |
|---|---|---|---|
| 月額 | ¥980 | ¥1,980 | ¥3,980 |
| サポート | メール | チャット | 電話 |
HTMLコード
<table class="kts-tbl05"> <tr><th></th><th>ライト</th><th class="rec">スタンダード</th><th>プロ</th></tr> <tr><td>月額</td><td>¥980</td><td class="rec">¥1,980</td><td>¥3,980</td></tr> <tr><td>サポート</td><td>メール</td><td class="rec">チャット</td><td>電話</td></tr> </table>CSSコード
.kts-tbl05 { border-collapse: collapse; font-family: sans-serif; font-size: 13px; } .kts-tbl05 th, .kts-tbl05 td { border: 1px solid #E4E4E4; padding: 10px 16px; text-align: center; } .kts-tbl05 th { background: #F1F3F5; } .kts-tbl05 .rec { background: #EFF6F3; color: #2E6F5E; font-weight: 700; }06. ホバーで行がハイライトする表
カーソルを合わせた行だけ、背景色が変わる比較表です。
実際の見た目
| 商品名 | 価格 |
|---|---|
| スタンダードコース | ¥3,000 |
| プレミアムコース | ¥5,000 |
HTMLコード
<table class="kts-tbl06"> <tr><th>商品名</th><th>価格</th></tr> <tr><td>スタンダードコース</td><td>¥3,000</td></tr> <tr><td>プレミアムコース</td><td>¥5,000</td></tr> </table>CSSコード
.kts-tbl06 { border-collapse: collapse; width: 280px; font-family: sans-serif; font-size: 13px; } .kts-tbl06 th, .kts-tbl06 td { padding: 10px 14px; border-bottom: 1px solid #E4E4E4; text-align: left; } .kts-tbl06 th { background: #F9FAFB; } .kts-tbl06 tbody tr:hover td, .kts-tbl06 tr:hover td { background: #EFF6F3; }07. チェック・バツ記号付き比較表
○と×の代わりに、色付きの記号で対応状況を示す表です。
実際の見た目
| 機能 | 無料 | 有料 |
|---|---|---|
| 基本機能 | ✓ | ✓ |
| 広告非表示 | ✗ | ✓ |
HTMLコード
<table class="kts-tbl07"> <tr><th>機能</th><th>無料</th><th>有料</th></tr> <tr><td>基本機能</td><td class="yes">✓</td><td class="yes">✓</td></tr> <tr><td>広告非表示</td><td class="no">✗</td><td class="yes">✓</td></tr> </table>CSSコード
.kts-tbl07 { border-collapse: collapse; font-family: sans-serif; font-size: 13px; } .kts-tbl07 th, .kts-tbl07 td { border: 1px solid #E4E4E4; padding: 10px 18px; text-align: center; } .kts-tbl07 th { background: #1F2933; color: #fff; } .kts-tbl07 .yes { color: #2E9E5B; font-weight: 700; } .kts-tbl07 .no { color: #C0392B; font-weight: 700; }08. 3プラン横並びの料金テーブル
縦の表ではなく、3つのプランを横に並べて見せる形式です。
実際の見た目
ライト
¥980
- 基本機能
スタンダード
¥1,980
- 基本機能
- チャット対応
プロ
¥3,980
- 基本機能
- チャット対応
- 電話対応
HTMLコード
<div class="kts-tbl08"> <div class="col"><h3>ライト</h3><p class="price">¥980</p><ul><li>基本機能</li></ul></div> <div class="col"><h3>スタンダード</h3><p class="price">¥1,980</p><ul><li>基本機能</li><li>チャット対応</li></ul></div> <div class="col"><h3>プロ</h3><p class="price">¥3,980</p><ul><li>基本機能</li><li>チャット対応</li><li>電話対応</li></ul></div> </div>CSSコード
.kts-tbl08 { display: flex; gap: 12px; font-family: sans-serif; } .kts-tbl08 .col { width: 130px; padding: 16px; background: #fff; border: 1px solid #E4E4E4; border-radius: 8px; text-align: center; } .kts-tbl08 h3 { font-size: 14px; margin: 0 0 6px; color: #1F2933; } .kts-tbl08 .price { font-size: 18px; font-weight: 800; color: #2E6F5E; margin: 0 0 10px; } .kts-tbl08 ul { list-style: none; padding: 0; margin: 0; font-size: 11px; color: #666; text-align: left; } .kts-tbl08 li { padding: 3px 0; }09. 影付きで浮き上がる表
外枠に影を付けて、背景から浮き上がって見える比較表です。
実際の見た目
| コース | 時間 |
|---|---|
| ショート | 30分 |
| ロング | 60分 |
HTMLコード
<table class="kts-tbl09"> <tr><th>コース</th><th>時間</th></tr> <tr><td>ショート</td><td>30分</td></tr> <tr><td>ロング</td><td>60分</td></tr> </table>CSSコード
.kts-tbl09 { border-collapse: separate; border-spacing: 0; width: 260px; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.08); font-family: sans-serif; font-size: 13px; } .kts-tbl09 th, .kts-tbl09 td { padding: 10px 14px; text-align: left; } .kts-tbl09 th { background: #3F8CFF; color: #fff; } .kts-tbl09 td { background: #fff; border-bottom: 1px solid #F1F3F5; }10. 横スクロール対応テーブル
列数が多い表を、はみ出さずスマホでも見られるようにする形です。
実際の見た目
| 項目 | A | B | C | D |
|---|---|---|---|---|
| 価格 | ¥500 | ¥800 | ¥1,200 | ¥2,000 |
HTMLコード
<div class="kts-tbl10-wrap"> <table class="kts-tbl10"> <tr><th>項目</th><th>A</th><th>B</th><th>C</th><th>D</th></tr> <tr><td>価格</td><td>¥500</td><td>¥800</td><td>¥1,200</td><td>¥2,000</td></tr> </table> </div>CSSコード
.kts-tbl10-wrap { max-width: 260px; overflow-x: auto; } .kts-tbl10 { border-collapse: collapse; white-space: nowrap; font-family: sans-serif; font-size: 13px; } .kts-tbl10 th, .kts-tbl10 td { border: 1px solid #E4E4E4; padding: 8px 14px; } .kts-tbl10 th { background: #F1F3F5; }11. 価格を大きく見せる表
料金の数字だけを大きくして、目立たせる比較表です。
実際の見た目
| プラン | 料金 |
|---|---|
| ベーシック | ¥1,000 |
| プレミアム | ¥3,000 |
HTMLコード
<table class="kts-tbl11"> <tr><th>プラン</th><th>料金</th></tr> <tr><td>ベーシック</td><td class="price">¥1,000</td></tr> <tr><td>プレミアム</td><td class="price">¥3,000</td></tr> </table>CSSコード
.kts-tbl11 { border-collapse: collapse; width: 260px; font-family: sans-serif; font-size: 13px; } .kts-tbl11 th, .kts-tbl11 td { padding: 12px 16px; border-bottom: 1px solid #E4E4E4; text-align: left; } .kts-tbl11 .price { font-size: 20px; font-weight: 800; color: #D97757; }12. ダークテーマの比較表
暗い背景に合わせた配色の比較表です。
実際の見た目
| 項目 | 内容 |
|---|---|
| 稼働率 | 99.9% |
| バックアップ | 毎日自動 |
HTMLコード
<table class="kts-tbl12"> <tr><th>項目</th><th>内容</th></tr> <tr><td>稼働率</td><td>99.9%</td></tr> <tr><td>バックアップ</td><td>毎日自動</td></tr> </table>CSSコード
.kts-tbl12 { border-collapse: collapse; width: 260px; font-family: sans-serif; font-size: 13px; background: #1B1F24; } .kts-tbl12 th, .kts-tbl12 td { padding: 10px 14px; border-bottom: 1px solid #2E343B; text-align: left; color: #E6E9EC; } .kts-tbl12 th { color: #4CE0D2; }13. グラデーションヘッダーの表
見出し行にグラデーションを使った、華やかな比較表です。
実際の見た目
| プラン | おすすめ度 |
|---|---|
| スタンダード | ★★★★☆ |
HTMLコード
<table class="kts-tbl13"> <tr><th>プラン</th><th>おすすめ度</th></tr> <tr><td>スタンダード</td><td>★★★★☆</td></tr> </table>CSSコード
.kts-tbl13 { border-collapse: collapse; width: 260px; font-family: sans-serif; font-size: 13px; } .kts-tbl13 th, .kts-tbl13 td { padding: 10px 14px; border: 1px solid #E4E4E4; text-align: left; } .kts-tbl13 th { background: linear-gradient(90deg, #6C63FF, #3F8CFF); color: #fff; }14. 左端ラベル固定風の表
1列目だけ色を変えて、項目名の列だと分かりやすくした表です。
実際の見た目
| 項目 | プランA | プランB |
|---|---|---|
| 容量 | 10GB | 50GB |
HTMLコード
<table class="kts-tbl14"> <tr><th>項目</th><td>プランA</td><td>プランB</td></tr> <tr><th>容量</th><td>10GB</td><td>50GB</td></tr> </table>CSSコード
.kts-tbl14 { border-collapse: collapse; font-family: sans-serif; font-size: 13px; } .kts-tbl14 th, .kts-tbl14 td { border: 1px solid #E4E4E4; padding: 10px 16px; } .kts-tbl14 th { background: #F1F3F5; text-align: left; color: #1F2933; }15. アイコン付き項目名の表
項目名の横にアイコンを添えて、内容をイメージしやすくした表です。
実際の見た目
| 料金 | ¥1,980 |
|---|---|
| 容量 | 30GB |
HTMLコード
<table class="kts-tbl15"> <tr><th><span aria-hidden="true">💰</span>料金</th><td>¥1,980</td></tr> <tr><th><span aria-hidden="true">📦</span>容量</th><td>30GB</td></tr> </table>CSSコード
.kts-tbl15 { border-collapse: collapse; font-family: sans-serif; font-size: 13px; } .kts-tbl15 th, .kts-tbl15 td { border: 1px solid #E4E4E4; padding: 10px 16px; text-align: left; } .kts-tbl15 th { background: #F9FAFB; } .kts-tbl15 span { margin-right: 6px; }16. バッジ付きの縞模様テーブル
特定の行に「人気」のようなバッジを添えたテーブルです。
実際の見た目
| プラン | 料金 |
|---|---|
| ライト | ¥500 |
| スタンダード人気 | ¥1,500 |
| プロ | ¥3,000 |
HTMLコード
<table class="kts-tbl16"> <tr><th>プラン</th><th>料金</th></tr> <tr><td>ライト</td><td>¥500</td></tr> <tr class="rec"><td>スタンダード<span class="badge">人気</span></td><td>¥1,500</td></tr> <tr><td>プロ</td><td>¥3,000</td></tr> </table>CSSコード
.kts-tbl16 { border-collapse: collapse; width: 260px; font-family: sans-serif; font-size: 13px; } .kts-tbl16 th, .kts-tbl16 td { padding: 10px 14px; text-align: left; } .kts-tbl16 th { background: #1F2933; color: #fff; } .kts-tbl16 tr:nth-child(odd) td { background: #F9FAFB; } .kts-tbl16 .rec td { background: #FFF6DD; } .kts-tbl16 .badge { display: inline-block; margin-left: 6px; background: #D97757; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }17. 罫線なしのミニマル表
縦の罫線を省き、下線だけで区切ったすっきりした表です。
実際の見た目
| 項目 | 内容 |
|---|---|
| 対応言語 | 日本語 / 英語 |
| 更新頻度 | 月1回 |
HTMLコード
<table class="kts-tbl17"> <tr><th>項目</th><th>内容</th></tr> <tr><td>対応言語</td><td>日本語 / 英語</td></tr> <tr><td>更新頻度</td><td>月1回</td></tr> </table>CSSコード
.kts-tbl17 { border-collapse: collapse; width: 280px; font-family: sans-serif; font-size: 13px; } .kts-tbl17 th, .kts-tbl17 td { padding: 10px 4px; border-bottom: 1px solid #E4E4E4; text-align: left; } .kts-tbl17 th { color: #8A94A0; font-weight: 400; font-size: 12px; }18. バッジを乗せた人気プラン表
1つの列の上に、バッジを重ねて表示する形式です。
実際の見た目
おすすめ
| スタンダード |
|---|
| ¥1,980 / 月 |
| チャットサポート付き |
HTMLコード
<div class="kts-tbl18-wrap"> <span class="badge">おすすめ</span> <table class="kts-tbl18"> <tr><th>スタンダード</th></tr> <tr><td>¥1,980 / 月</td></tr> <tr><td>チャットサポート付き</td></tr> </table> </div>CSSコード
.kts-tbl18-wrap { position: relative; width: 180px; font-family: sans-serif; } .kts-tbl18-wrap .badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #D97757; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 999px; z-index: 1; } .kts-tbl18 { border-collapse: collapse; width: 100%; border: 2px solid #D97757; border-radius: 8px; overflow: hidden; } .kts-tbl18 th, .kts-tbl18 td { padding: 10px; text-align: center; font-size: 13px; } .kts-tbl18 th { background: #D97757; color: #fff; } .kts-tbl18 td { border-top: 1px solid #F1E4DC; }19. 二列比較（Vs形式）テーブル
2つの選択肢を、中央のVSを挟んで見せる形です。
実際の見た目
| A社 | VS | B社 |
|---|---|---|
| ¥3,000 | ¥2,500 | |
| 対応が丁寧 | 価格が安い |
HTMLコード
<table class="kts-tbl19"> <tr><th>A社</th><th class="vs">VS</th><th>B社</th></tr> <tr><td>¥3,000</td><td class="vs"></td><td>¥2,500</td></tr> <tr><td>対応が丁寧</td><td class="vs"></td><td>価格が安い</td></tr> </table>CSSコード
.kts-tbl19 { border-collapse: collapse; font-family: sans-serif; font-size: 13px; } .kts-tbl19 th, .kts-tbl19 td { border: 1px solid #E4E4E4; padding: 10px 16px; text-align: center; } .kts-tbl19 th { background: #F1F3F5; } .kts-tbl19 .vs { background: #1F2933; color: #fff; font-weight: 700; width: 30px; }20. 合計行を強調したテーブル
最後に合計金額の行を、色を変えて強調する形です。
実際の見た目
| 商品A | ¥1,000 |
| 商品B | ¥2,000 |
| 合計 | ¥3,000 |
HTMLコード
<table class="kts-tbl20"> <tr><td>商品A</td><td>¥1,000</td></tr> <tr><td>商品B</td><td>¥2,000</td></tr> <tr class="total"><td>合計</td><td>¥3,000</td></tr> </table>CSSコード
.kts-tbl20 { border-collapse: collapse; width: 240px; font-family: sans-serif; font-size: 13px; } .kts-tbl20 td { padding: 10px 14px; border-bottom: 1px solid #E4E4E4; } .kts-tbl20 tr:last-child td { border-bottom: none; } .kts-tbl20 .total td { background: #1F2933; color: #fff; font-weight: 700; }カスタマイズの小ワザ
- 行や列を増やしたい時は、tr（行）やtd・th（列）のタグをコピーして追加してください。
- スマホで表が見切れる時は、10番のように table を div で囲み、その div に overflow-x: auto を指定してください。
- 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。
- 18番のようにバッジを重ねるタイプは、親要素に position: relative が必要です。
- 文字や数値を変えたい時は、HTMLコード内のテキスト部分を書き換えてください。
まとめ｜早見表
| 用途 | 該当するテーブル |
|---|---|
| シンプルな比較 | 01, 02, 03, 17 |
| 料金プラン | 08, 11, 18, 20 |
| おすすめを目立たせる | 05, 16, 18 |
| 対応状況を示す | 07, 14, 15, 19 |
| 見た目重視 | 04, 09, 12, 13 |
| スマホ対応 | 10 |
表って、色の使い方だけでこんなに印象が変わるんだね！
うん、おすすめのプランを目立たせたい時は05番や18番が使いやすいよ。見積もりツールの記事と組み合わせてみてね。
20個の比較表は、シンプルな一覧から、おすすめ列を強調したものまで、用途に応じて使い分けられる。スマホでは横スクロール対応も忘れずに用意しておきたい。
