レスポンシブも対応！綺麗で見やすい表のデザイン11個[HTML&CSS]

メインのビジュアルには決してならないけれど、会社概要にお問い合わせフォーム、比較表や価格表など、WEBデザインをしていると1、2箇所は必ず出くわす表のデザイン。

意外にどうしようかと悩んでいるデザイナーの方も多いのではないでしょうか。

今回はそんな表のデザインを集めました！全てコード付きでコピペOKです。

またデザイナーに限らず、PowerPointやExcelを使っての表作成はあるはず。
もっと見栄えよくしろと上司に言われ頭を抱えている方にも、見た目だけでも参考にしてもらえれば幸いです！

表中のテキストの揃えの基本

まずデザインを見ていく前に、表中のテキストの一般的なルールをおさらいしたいと思います。

何気なく作成してた人はここを見直すだけでグンと見やすい表に変わりますよ

内容によっては変える必要もありますが、基本はこの3点です。

また、タイトルや、強調する値などは、太文字にしたり背景に色を入れたりと、他と差別化する事で見やすい表になります。

綺麗で見やすい表のデザインいろいろ

それでは早速表のデザインを見ていきましょう！

なお、今回はプラン表をイメージし、見出しが縦と横に入っているパターンの表をベースで作成しています。
それに合わせ、レスポンシブ時ではdata-labelの値をcontent:attr()で取得し、表示させる方法で実装しています。

また基本的に比較表以外のパターンは全てhtml共通(行を増やしているものはありますが)にし、CSSのみ変えています。

<table>
        <thead>
            <tr>
                <td class="non"></td>
                <th scope="col">内容</th>
                <th scope="col">価格(月額)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>ベーシックプラン</th>
                <td data-label="内容" class="txt">はじめての方向け。ベーシックなお試しプラン</td>
                <td data-label="価格" class="price">¥3,000</td>
            </tr>
            <tr>
                <th>カスタムプラン</th>
                <td data-label="内容" class="txt">必要なものだけ揃えられるカスタムプラン</td>
                <td data-label="価格"class="price">¥4,000</td>
            </tr>
            <tr>
                <th>プレミアムプラン</th>
                <td data-label="内容" class="txt">全ておまかせのプレミアムプラン</td>
                <td data-label="価格"class="price">¥10,000</td>
            </tr>
        </tbody>
    </table>   

印刷もきれいに出来る！スタンダードパターン

 

まずはスタンダードな表です。
特に装飾していなくても実はよく使うパターンかと…。また印刷する事を考慮した場合は線を入れてモノクロで作る事は重要となってきます。

このパターンのポイントは前述している表中のテキストの揃えの基本でしっかりテキストの揃えを統一する事と、文字の周りはある程度の余白(padding)をとる事です。
テキストの周りに余白をとる時はtableタグではtrではなくth、tdにつけます。

table th,
table td {
  padding: 1em 10px 1em 1em;
  border-right: 1px solid #bbb;
}

See the Pen bJJgNM by musubimaru (@pecoendo) on CodePen.

タイル風の表

 

タイル風は手っ取り早くいい感じに見せれる方法です。
背景に色をつけ、線は白色(背景色に準ずる)にするだけ！

ついでにtbodyのthタグ(プラン名の部分)や価格にも色をつけて差別化していきましょう。

See the Pen XQQRzo by musubimaru (@pecoendo) on CodePen.

線だけパターン

 

スタンダードパターンから表の外枠の線を消すだけでも、だいぶすっきり見せる事が出来ます。

線を減らすコツは、余白をしっかりとる事です。テキスト同士が近いと線を消す意味がありません。線はなくともきちんとグループ化され、見えない線が見えるようなデザインが良いでしょう。

外枠を消したパターン

See the Pen bJJapX by musubimaru (@pecoendo) on CodePen.

横線のみのパターン

See the Pen GLLEMQ by musubimaru (@pecoendo) on CodePen.

シマシマパターン

 

これも良く見るパターンですね！行がたくさんある時に見やすくする為に使うパターンです。
ただこのパターンは注意が必要です。
色変える事で、確かに見やすくなりますが、色の有無でこちらが意図しない意味合いでユーザーに解釈されてしまうケースもある為です。
必ず、ほぼ同じ明度の色で配色をとりましょう。

レスポンシブ時は縦に並べるようにしていますが、ここでは2行と少ない為、色を変えていません。

See the Pen wZZpRK by musubimaru (@pecoendo) on CodePen.

フォーカスパターン

シマシマカラーにしなくとも、見やすくする工夫はあります。それはフォーカスしている時だけ色をつけたり、それ以外にスタイルを与えて見やすくするという手法です！2パターン作ってみましょう

フォーカス部分を着色パターン

 

See the Pen pBBqzo by musubimaru (@pecoendo) on CodePen.

 

フォーカス時、他をぼかすパターン

See the Pen ZZZVKB by musubimaru (@pecoendo) on CodePen.

 

一覧表に比較要素がプラスされた表デザイン

シンプルな表をご紹介してきましたが、ここからは比較を目的とした表のデザインをご紹介します！

この表は特定のものを目立たせる場合が多いので、配色や文字の大きさ、太さなどの工夫が必要です。

 

 

まずは単純に特定の箇所だけ目立たせるパターンです。個別にclassを割り当て、スタイルを変えていきましょう。
ここでは、背景を赤にするものに.red_bkを、文字を赤くする箇所には.red-txtをつけています。
CSSは簡単で下記となります。

.red_bk{
  background:#e81010
}
.red-txt{
  color:#e81010
}

また、レスポンシブ時は横にはみ出た分をスクロールするようにしました。

 

See the Pen PggXXY by musubimaru (@pecoendo) on CodePen.

表シマシマとの合わせ技

プラン表のようにいくつかの見出しがある場合、同系色でまとめると比較的綺麗に仕上がります。またアイコンや画像、イラストを使うのもわかりやすくなるテクニックだと思います。

See the Pen QPPPbe by musubimaru (@pecoendo) on CodePen.

Flexboxを使った比較表

表はtableだけではなくdlタグやFlexboxを使っても作成出来ます。

【CSS】Flexboxを使って実用的なレイアウトを実装こちらでも紹介していますが、Flexboxを使うと、orderを使って順番を変えれるので、比較表にはもってこいかと思います！

【CSS】Flexboxを使って実用的なレイアウトを実装

Flexboxを使った比較表

See the Pen WWWWqx by musubimaru (@pecoendo) on CodePen.

最後に

いかがでしたか？まとめてみて、意外にそんなにパターンってないなと思いました！

テキストの揃え方、余白の取り方、不要な線をどう削除するかという3点が表作成のポイントかもしれません。そして何より目的は見やすくする事！そもそも表を使うという事自体が見やすくする為、情報整理の為である事を忘れないようにしましょう！

それでは、表のデザインでお悩みの方に少しでもご参考になれば幸いです。