プログラミングの独学サイトです。

CSS

CSSテーブルデザイン集｜見やすい表とスマホ対応の作り方

CSSでtableを見やすくするデザイン集です。シンプルな表、ストライプ表、見出し固定風、スマホ横スクロール対応、料金表、比較表など、コピペしやすいHTMLとCSSを20個紹介します。

更新 2026.07.12公開 2026.07.08 30分で読めます
この記事の目次
  1. 1. 基本の見やすいテーブル
  2. 2. 横線だけのシンプルテーブル
  3. 3. 罫線がはっきりした表
  4. 4. ストライプテーブル
  5. 5. 行ホバーつきテーブル
  6. 6. 見出し行に色を付けたテーブル
  7. 7. 角丸のカード風テーブル
  8. 8. スマホで横スクロールするテーブル
  9. 9. 固定見出し風のスクロールテーブル
  10. 10. 料金表テーブル
  11. 11. おすすめ列を目立たせる比較表
  12. 12. 仕様表・会社概要向けの2列テーブル
  13. 13. スマホでカード化するテーブル
  14. 14. コンパクトな小さめテーブル
  15. 15. 数字を右揃えにするテーブル
  16. 16. ステータスバッジ入りテーブル
  17. 17. 長い文字を折り返すテーブル
  18. 18. 画像入りの商品テーブル
  19. 19. フッター合計行つきテーブル
  20. 20. CSS変数で色を変えやすいテーブル
  21. テーブルデザインで失敗しやすいポイント
  22. 横スクロールとカード化の使い分け
  23. まとめ

HTMLの表は、CSSで余白、罫線、背景色、スマホ対応を整えるだけでかなり読みやすくなります。

この記事では、CSSで使えるテーブルデザインを20個まとめました。シンプルな表、ストライプ表、料金表、比較表、スマホ用の横スクロール、カード型レスポンシブまで、コピーして使いやすい形で紹介します。

1. 基本の見やすいテーブル

まずは、罫線と余白を整えた基本形です。多くの表はこの形から始めると作りやすいです。

<table class="table-basic">
  <thead>
    <tr>
      <th>項目</th>
      <th>内容</th>
      <th>備考</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>料金</td>
      <td>月額1,000円</td>
      <td>税込</td>
    </tr>
    <tr>
      <td>サポート</td>
      <td>メール対応</td>
      <td>平日のみ</td>
    </tr>
  </tbody>
</table>
.table-basic {
  width: 100%;
  border-collapse: collapse;
}

.table-basic th,
.table-basic td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid #e5e7eb;
}

.table-basic th {
  font-weight: 700;
  background: #f9fafb;
}

border-collapse: collapse; を指定すると、セルの境界線がすっきりまとまります。

2. 横線だけのシンプルテーブル

罫線を強く出したくない場合は、横線だけにするとすっきり見えます。

<table class="table-line">
  <tr>
    <th>プラン</th>
    <th>料金</th>
  </tr>
  <tr>
    <td>ライト</td>
    <td>1,000円</td>
  </tr>
  <tr>
    <td>スタンダード</td>
    <td>2,000円</td>
  </tr>
</table>
.table-line {
  width: 100%;
  border-collapse: collapse;
}

.table-line th,
.table-line td {
  padding: 14px 8px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.table-line th {
  color: #475569;
  font-size: 14px;
}

記事本文の中に置く小さな表なら、線を少なめにした方がなじみます。

3. 罫線がはっきりした表

比較項目が多い表や資料っぽい表は、全セルに罫線を入れると読みやすくなります。

<table class="table-bordered">
  <tr>
    <th>項目</th>
    <th>A案</th>
    <th>B案</th>
  </tr>
  <tr>
    <td>費用</td>
    <td>低い</td>
    <td>高い</td>
  </tr>
  <tr>
    <td>自由度</td>
    <td>標準</td>
    <td>高い</td>
  </tr>
</table>
.table-bordered {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cbd5e1;
}

.table-bordered th,
.table-bordered td {
  padding: 12px 14px;
  text-align: center;
  border: 1px solid #cbd5e1;
}

.table-bordered th {
  background: #f1f5f9;
}

罫線が多い表では、背景色を薄くして重くなりすぎないようにします。

4. ストライプテーブル

行数が多い表は、1行おきに背景色を付けると視線を追いやすくなります。

<table class="table-stripe">
  <thead>
    <tr>
      <th>名前</th>
      <th>役割</th>
      <th>状態</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>佐藤</td><td>制作</td><td>進行中</td></tr>
    <tr><td>田中</td><td>確認</td><td>未対応</td></tr>
    <tr><td>山田</td><td>公開</td><td>完了</td></tr>
  </tbody>
</table>
.table-stripe {
  width: 100%;
  border-collapse: collapse;
}

.table-stripe th,
.table-stripe td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.table-stripe tbody tr:nth-child(even) {
  background: #f8fafc;
}

:nth-child(even) で偶数行だけに背景色を付けています。

5. 行ホバーつきテーブル

管理画面や一覧表では、マウスを乗せた行がわかると操作しやすくなります。

<table class="table-hover">
  <tr>
    <th>ページ</th>
    <th>状態</th>
  </tr>
  <tr>
    <td>トップページ</td>
    <td>公開中</td>
  </tr>
  <tr>
    <td>お問い合わせ</td>
    <td>下書き</td>
  </tr>
</table>
.table-hover {
  width: 100%;
  border-collapse: collapse;
}

.table-hover th,
.table-hover td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.table-hover tbody tr {
  transition: background-color 0.2s;
}

.table-hover tbody tr:hover {
  background: #eff6ff;
}

ホバーは便利ですが、スマホでは伝わりにくいので、重要な情報は色だけに頼らないようにします。

6. 見出し行に色を付けたテーブル

見出し行を濃い色にすると、列の意味がわかりやすくなります。

<table class="table-head-color">
  <thead>
    <tr>
      <th>プラン</th>
      <th>月額</th>
      <th>おすすめ</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>ライト</td><td>1,000円</td><td>個人向け</td></tr>
    <tr><td>ビジネス</td><td>3,000円</td><td>法人向け</td></tr>
  </tbody>
</table>
.table-head-color {
  width: 100%;
  border-collapse: collapse;
}

.table-head-color th,
.table-head-color td {
  padding: 13px 16px;
  text-align: left;
  border: 1px solid #dbeafe;
}

.table-head-color th {
  color: #fff;
  background: #2563eb;
}

背景が濃い場合は、文字色を白にしてコントラストを確保します。

7. 角丸のカード風テーブル

表全体をカードのように見せたいときは、border-collapse: separate; が便利です。

<table class="table-rounded">
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>納期</td>
    <td>約2週間</td>
  </tr>
  <tr>
    <td>対応</td>
    <td>メール・チャット</td>
  </tr>
</table>
.table-rounded {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
}

.table-rounded th,
.table-rounded td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.table-rounded tr:last-child th,
.table-rounded tr:last-child td {
  border-bottom: 0;
}

.table-rounded th {
  background: #f8fafc;
}

角丸が効かない場合は、表全体に overflow: hidden; を指定します。

8. スマホで横スクロールするテーブル

列数が多い表は、スマホで無理に縮めるより横スクロールにした方が読みやすいです。

<div class="table-scroll">
  <table>
    <tr>
      <th>プラン</th>
      <th>料金</th>
      <th>容量</th>
      <th>サポート</th>
      <th>契約期間</th>
    </tr>
    <tr>
      <td>ライト</td>
      <td>1,000円</td>
      <td>10GB</td>
      <td>メール</td>
      <td>月契約</td>
    </tr>
  </table>
</div>
.table-scroll {
  overflow-x: auto;
}

.table-scroll table {
  min-width: 720px;
  width: 100%;
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
  padding: 12px 16px;
  white-space: nowrap;
  border: 1px solid #e5e7eb;
}

スマホでは、外側の div に overflow-x: auto; を指定します。

9. 固定見出し風のスクロールテーブル

縦に長い表では、見出し行を上に固定すると内容を追いやすくなります。

<div class="table-sticky-wrap">
  <table class="table-sticky">
    <thead>
      <tr>
        <th>日付</th>
        <th>内容</th>
        <th>担当</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>7/1</td><td>確認</td><td>佐藤</td></tr>
      <tr><td>7/2</td><td>修正</td><td>田中</td></tr>
      <tr><td>7/3</td><td>公開</td><td>山田</td></tr>
    </tbody>
  </table>
</div>
.table-sticky-wrap {
  max-height: 260px;
  overflow: auto;
  border: 1px solid #e5e7eb;
}

.table-sticky {
  width: 100%;
  border-collapse: collapse;
}

.table-sticky th,
.table-sticky td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.table-sticky th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
}

position: sticky; を使うと、スクロール領域内で見出しを固定できます。

10. 料金表テーブル

料金プランを横に比較したいときのテーブルです。

<table class="table-price">
  <thead>
    <tr>
      <th>プラン</th>
      <th>ライト</th>
      <th>ビジネス</th>
    </tr>
  </thead>
  <tbody>
    <tr><th>月額</th><td>1,000円</td><td>3,000円</td></tr>
    <tr><th>容量</th><td>10GB</td><td>50GB</td></tr>
    <tr><th>サポート</th><td>メール</td><td>チャット</td></tr>
  </tbody>
</table>
.table-price {
  width: 100%;
  border-collapse: collapse;
}

.table-price th,
.table-price td {
  padding: 14px 16px;
  text-align: center;
  border: 1px solid #dbeafe;
}

.table-price thead th {
  color: #fff;
  background: #2563eb;
}

.table-price tbody th {
  background: #eff6ff;
}

料金表では、行見出しにも th を使うと項目の意味が伝わりやすくなります。

11. おすすめ列を目立たせる比較表

複数プランの中でおすすめを強調したい場合のデザインです。

<table class="table-recommend">
  <tr>
    <th>項目</th>
    <th>ライト</th>
    <th class="is-recommend">おすすめ</th>
  </tr>
  <tr>
    <td>料金</td>
    <td>1,000円</td>
    <td class="is-recommend">3,000円</td>
  </tr>
  <tr>
    <td>機能</td>
    <td>基本</td>
    <td class="is-recommend">充実</td>
  </tr>
</table>
.table-recommend {
  width: 100%;
  border-collapse: collapse;
}

.table-recommend th,
.table-recommend td {
  padding: 14px 16px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.table-recommend .is-recommend {
  background: #fef3c7;
}

.table-recommend th.is-recommend {
  color: #92400e;
}

おすすめを目立たせるときも、価格や機能の説明は必ずテキストで書きます。

12. 仕様表・会社概要向けの2列テーブル

項目名と内容を並べる表は、会社概要、商品仕様、プロフィールに使いやすいです。

<table class="table-spec">
  <tr>
    <th>会社名</th>
    <td>サンプル株式会社</td>
  </tr>
  <tr>
    <th>所在地</th>
    <td>東京都渋谷区</td>
  </tr>
  <tr>
    <th>事業内容</th>
    <td>Webサイト制作</td>
  </tr>
</table>
.table-spec {
  width: 100%;
  border-collapse: collapse;
}

.table-spec th,
.table-spec td {
  padding: 15px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.table-spec th {
  width: 180px;
  background: #f8fafc;
}

@media (max-width: 600px) {
  .table-spec th {
    width: 120px;
  }
}

スマホで項目名が長い場合は、次のカード型レスポンシブも検討します。

13. スマホでカード化するテーブル

横スクロールではなく、スマホでは1行ずつカードのように見せる方法です。

<table class="table-card-sp">
  <thead>
    <tr>
      <th>項目</th>
      <th>内容</th>
      <th>状態</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="項目">原稿</td>
      <td data-label="内容">トップページ</td>
      <td data-label="状態">確認中</td>
    </tr>
    <tr>
      <td data-label="項目">画像</td>
      <td data-label="内容">メインビジュアル</td>
      <td data-label="状態">未対応</td>
    </tr>
  </tbody>
</table>
.table-card-sp {
  width: 100%;
  border-collapse: collapse;
}

.table-card-sp th,
.table-card-sp td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid #e5e7eb;
}

@media (max-width: 600px) {
  .table-card-sp thead {
    display: none;
  }

  .table-card-sp tr,
  .table-card-sp td {
    display: block;
  }

  .table-card-sp tr {
    margin-bottom: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  .table-card-sp td {
    border: 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .table-card-sp td::before {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    content: attr(data-label);
  }
}

カード化する場合は、各 td に data-label を入れて見出しを補います。

14. コンパクトな小さめテーブル

補足情報や簡単な一覧では、余白を少し小さくすると収まりがよくなります。

<table class="table-compact">
  <tr>
    <th>サイズ</th>
    <th>幅</th>
    <th>高さ</th>
  </tr>
  <tr>
    <td>S</td>
    <td>320px</td>
    <td>180px</td>
  </tr>
  <tr>
    <td>M</td>
    <td>640px</td>
    <td>360px</td>
  </tr>
</table>
.table-compact {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-compact th,
.table-compact td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.table-compact th {
  background: #f9fafb;
}

文字サイズを小さくしすぎると読みにくいため、本文より少し小さい程度にします。

15. 数字を右揃えにするテーブル

金額、件数、割合などの数字は右揃えにすると比較しやすくなります。

<table class="table-number">
  <tr>
    <th>月</th>
    <th>売上</th>
    <th>件数</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>120,000円</td>
    <td>32件</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>98,000円</td>
    <td>27件</td>
  </tr>
</table>
.table-number {
  width: 100%;
  border-collapse: collapse;
}

.table-number th,
.table-number td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.table-number th:first-child,
.table-number td:first-child {
  text-align: left;
}

.table-number th:not(:first-child),
.table-number td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

font-variant-numeric: tabular-nums; を使うと、数字の桁がそろいやすくなります。

16. ステータスバッジ入りテーブル

管理表や進捗表では、状態をバッジで見せるとすぐ判別できます。

<table class="table-status">
  <tr>
    <th>タスク</th>
    <th>状態</th>
  </tr>
  <tr>
    <td>原稿作成</td>
    <td><span class="status is-done">完了</span></td>
  </tr>
  <tr>
    <td>画像選定</td>
    <td><span class="status is-progress">進行中</span></td>
  </tr>
</table>
.table-status {
  width: 100%;
  border-collapse: collapse;
}

.table-status th,
.table-status td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.status {
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9999px;
}

.status.is-done {
  color: #166534;
  background: #dcfce7;
}

.status.is-progress {
  color: #92400e;
  background: #fef3c7;
}

バッジ単体のデザインは、CSSバッジ・ラベル・タグデザイン集 と内部リンクできます。

17. 長い文字を折り返すテーブル

URLや英数字が長いと、セルからはみ出ることがあります。折り返し指定を入れておきます。

<table class="table-wrap-text">
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>URL</td>
    <td>https://example.com/very-long-page-name-for-sample</td>
  </tr>
</table>
.table-wrap-text {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.table-wrap-text th,
.table-wrap-text td {
  padding: 12px 16px;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
  border: 1px solid #e5e7eb;
}

td が改行されない原因は、HTMLのtableでtdが改行されない原因 でも詳しく扱えます。

18. 画像入りの商品テーブル

商品一覧や資料一覧では、画像とテキストを同じセルに入れることがあります。

<table class="table-product">
  <tr>
    <th>商品</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>
      <div class="product-cell">
        <img src="https://placehold.co/80x80" alt="">
        <span>サンプル商品</span>
      </div>
    </td>
    <td>2,980円</td>
  </tr>
</table>
.table-product {
  width: 100%;
  border-collapse: collapse;
}

.table-product th,
.table-product td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.product-cell {
  display: flex;
  gap: 12px;
  align-items: center;
}

.product-cell img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}

画像サイズを固定しておくと、行の高さが不自然にずれにくくなります。

19. フッター合計行つきテーブル

金額表や集計表では、合計行だけを少し強調します。

<table class="table-total">
  <thead>
    <tr>
      <th>項目</th>
      <th>金額</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>制作費</td><td>80,000円</td></tr>
    <tr><td>保守費</td><td>20,000円</td></tr>
  </tbody>
  <tfoot>
    <tr><th>合計</th><td>100,000円</td></tr>
  </tfoot>
</table>
.table-total {
  width: 100%;
  border-collapse: collapse;
}

.table-total th,
.table-total td {
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
}

.table-total td {
  text-align: right;
}

.table-total tfoot th,
.table-total tfoot td {
  font-weight: 700;
  background: #fef3c7;
}

tfoot を使うと、合計や注釈などの意味がHTML上でもわかりやすくなります。

20. CSS変数で色を変えやすいテーブル

同じテーブルデザインを複数ページで使うなら、色や余白をCSS変数にしておくと便利です。

<table class="table-variable">
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>カラー</td>
    <td>変数で変更</td>
  </tr>
  <tr>
    <td>余白</td>
    <td>変数で調整</td>
  </tr>
</table>
.table-variable {
  --table-main: #0f766e;
  --table-border: #ccfbf1;
  --table-bg: #f0fdfa;
  --table-padding: 13px 16px;

  width: 100%;
  border-collapse: collapse;
}

.table-variable th,
.table-variable td {
  padding: var(--table-padding);
  text-align: left;
  border: 1px solid var(--table-border);
}

.table-variable th {
  color: #fff;
  background: var(--table-main);
}

.table-variable td {
  background: var(--table-bg);
}

色を変えたいときは、--table-main、--table-border、--table-bg を調整します。

テーブルデザインで失敗しやすいポイント

  • スマホで横にはみ出るのに、横スクロールやカード化を用意していない
  • セルの余白が狭く、文字が詰まって見える
  • 見出しセルと通常セルの違いがわかりにくい
  • 長いURLや英数字が折り返されず、レイアウトが崩れる
  • 表ではないレイアウト目的で table を使ってしまう

横スクロールとカード化の使い分け

  • 列同士を比較したい表は、横スクロールが向いています。
  • 1行ごとに情報を読ませたい表は、スマホでカード化すると読みやすいです。
  • 列数が少ない2列の仕様表なら、そのまま幅調整だけでも対応できます。

まとめ

CSSテーブルデザインは、まず「罫線」「余白」「見出し背景」「スマホ対応」を整えるのが基本です。

列数が多い表は横スクロール、1行ごとに読ませる表はカード化、数字が多い表は右揃えにすると、実務でも使いやすい表になります。

RELATED

あわせて読みたい記事