【コピペOK】【CSS】シンプルなテーブルデザイン2パターン

2021年12月15日2022年9月28日

定番の比較表デザイン2パターンを紹介します。

シンプルなデザインにしてますので、コピペしてお好みで色を変えたりして使ってください。

画像はサンプルとして、とりあえずローレンピクサムのものを使っています。
各自、企業ロゴ画像などに差し替えてお使いください。

「レスポンシブ時はタテ並びになる」みたいな、そういう可変はしません。
「横スクロール」に対応したものなります。

パターン1

画像(企業ロゴなど)がヨコに並んでるパターンです。

完成形はこちら

See the Pen Comparison by yusuke-morioka (@yusuke-morioka) on CodePen.

コードはこちら

<table class="tableWrap">
        <tr>
            <th>会社名</th>
            <th><img height="" width="" alt="ブランド名を入力" src="https://picsum.photos/160/100" loading="lazy"></th>
            <th><img height="" width="" alt="ブランド名を入力" src="https://picsum.photos/160/100" loading="lazy"></th>
            <th><img height="" width="" alt="ブランド名を入力" src="https://picsum.photos/160/100" loading="lazy"></th>
            <th><img height="" width="" alt="ブランド名を入力" src="https://picsum.photos/160/100" loading="lazy"></th>
        </tr>
        <tr>
            <th>機能</th>
            <td>機能A</td>
            <td>機能B</td>
            <td>機能C</td>
            <td>機能D</td>
        </tr>
        <tr>
            <th>メリット</th>
            <td>メリットA</td>
            <td>メリットB</td>
            <td>メリットC</td>
            <td>メリットD</td>
        </tr>
        <tr>
            <th>デメリット</th>
            <td>デメリットA</td>
            <td>デメリットB</td>
            <td>デメリットC</td>
            <td>デメリットD</td>
        </tr>
        <tr>
            <th>価格</th>
            <td>価格A</td>
            <td>価格B</td>
            <td>価格C</td>
            <td>価格D</td>
        </tr>
    </table>

.tableWrap {
    margin: 0 auto;
}
.tableWrap th {
  background: #eee;
}
.tableWrap, td, th{
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.tableWrap th, .tableWrap td {
    text-align: center;
    min-width: 130px;
    padding: 10px;
    height: 60px;
  }
  @media screen and (max-width: 850px) {
    .tableWrap {
      display: block;
      overflow-x: scroll;
      white-space: nowrap;
    }
  }

パターン2

画像(企業ロゴなど)がタテに並んでるパターンです。

完成形はこちら

See the Pen Comparison2 by yusuke-morioka (@yusuke-morioka) on CodePen.

コードはこちら

<table class="tableWrap">
        <tr>
            <th>会社名</th>
            <th>機能</th>
            <th>メリット</th>
            <th>デメリット</th>
            <th>価格</th>
        </tr>
        <tr>
            <th><img height="" width="" alt="ブランド名を入力" src="https://picsum.photos/160/100" loading="lazy"></th>
            <td>機能A</td>
            <td>メリットA</td>
            <td>デメリットA</td>
            <td>価格A</td>
        </tr>
        <tr>
            <th><img height="" width="" alt="ブランド名を入力" src="https://picsum.photos/160/100" loading="lazy"></th>
            <td>機能B</td>
            <td>メリットB</td>
            <td>デメリットB</td>
            <td>価格B</td>
        </tr>
        <tr>
            <th><img height="" width="" alt="ブランド名を入力" src="https://picsum.photos/160/100" loading="lazy"></th>
            <td>機能C</td>
            <td>メリットC</td>
            <td>デメリットC</td>
            <td>価格C</td>
        </tr>
        <tr>
            <th><img height="" width="" alt="ブランド名を入力" src="https://picsum.photos/160/100" loading="lazy"></th>
            <td>機能D</td>
            <td>メリットD</td>
            <td>デメリットD</td>
            <td>価格D</td>
        </tr>
    </table>

.tableWrap {
    margin: 0 auto;
}
.tableWrap th {
  background: #eee;
}
.tableWrap, td, th{
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.tableWrap th, .tableWrap td {
    text-align: center;
    min-width: 130px;
    padding: 10px;
    height: 60px;
  }
  @media screen and (max-width: 850px) {
    .tableWrap {
      display: block;
      overflow-x: scroll;
      white-space: nowrap;
    }
  }