この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
Webページに表を置きたいとき、標準のテーブルは少し味気なく見えることがあります。この記事では、コピペするだけで使えるCSSのテーブルデザインを7種類紹介します。
ストライプ模様やヘッダーの色付け、比較表向けのデザインまで、見て選んでそのまま使える見本をそろえました。スマホで表が横にはみ出すときの対処も後半で解説します。
使う前の準備
この記事のデザインは、外観 → カスタマイズ → 追加CSS に貼り付ければすぐに使えます。HTML側は、表に決まったクラス名を付けるだけです。
ひとつ注意点があります。既存のテーマは、テーブルにあらかじめ枠線や背景色のスタイルを付けているときがあります。そのため、こちらのCSSが打ち消されて見た目が変わらないことがあります。この記事では既存テーマ（SANGO）で確実に反映されるように、枠線や背景の指定に !important を付けています。他のテーマでは付けなくても効くことが多いので、まずは !important なしで試して、変化しないときだけ付けてみてください。
①基本のテーブル
まずは土台になる基本の表です。線を細くそろえて、余白をしっかり取るだけで、標準の表よりぐっと読みやすくなります。
| プラン | 月額 | 容量 |
|---|---|---|
| ライト | 550円 | 200GB |
| スタンダード | 1,100円 | 300GB |
| ハイスピード | 2,200円 | 400GB |
HTMLは次の形です。以降のデザインもこの構造をそのまま使い回せます。
<table class="c-table">
<thead>
<tr>
<th>プラン</th>
<th>月額</th>
<th>容量</th>
</tr>
</thead>
<tbody>
<tr>
<td>ライト</td>
<td>550円</td>
<td>200GB</td>
</tr>
<tr>
<td>スタンダード</td>
<td>1,100円</td>
<td>300GB</td>
</tr>
</tbody>
</table>.c-table{
border-collapse: collapse;
width: 100%;
font-size: 15px;
color: #333;
}
.c-table th,
.c-table td{
border: 1px solid #ddd !important;
padding: 12px 15px;
text-align: left;
}
.c-table th{
background: #f5f5f5 !important;
font-weight: bold;
}②ストライプ（しま模様）
偶数行に薄い背景色を敷くデザインです。行が多い表でも視線が横にずれにくく、どこを見ているか迷いにくくなります。
| プラン | 月額 | 容量 |
|---|---|---|
| ライト | 550円 | 200GB |
| スタンダード | 1,100円 | 300GB |
| ハイスピード | 2,200円 | 400GB |
| プレミアム | 3,300円 | 500GB |
HTMLは基本のテーブルと同じで、クラス名を c-table-stripe に変えるだけです。
.c-table-stripe{
border-collapse: collapse;
width: 100%;
font-size: 15px;
color: #333;
}
.c-table-stripe th,
.c-table-stripe td{
border: 1px solid #e0e0e0 !important;
padding: 12px 15px;
text-align: left;
}
.c-table-stripe th{
background: #f5f5f5 !important;
font-weight: bold;
}
.c-table-stripe tbody tr:nth-child(even){
background: #f7f9f7 !important;
}③ヘッダー強調
見出し行にブランドカラーを敷いて、表の始まりをはっきりさせるデザインです。文字を白にすると引き締まって見えます。ここではクローバーWebのグリーンを使っていますが、色は好みに合わせて変えてください。
| プラン | 月額 | 容量 |
|---|---|---|
| ライト | 550円 | 200GB |
| スタンダード | 1,100円 | 300GB |
| ハイスピード | 2,200円 | 400GB |
.c-table-head{
border-collapse: collapse;
width: 100%;
font-size: 15px;
color: #333;
}
.c-table-head th,
.c-table-head td{
border: 1px solid #e0e0e0 !important;
padding: 12px 15px;
text-align: left;
}
.c-table-head th{
background: #37a845 !important;
color: #fff;
font-weight: bold;
}④ホバーで行をハイライト
マウスを乗せた行にだけ色が付くデザインです。データが多い表で、今どの行を見ているかを追いやすくなります。スマホではホバーが効かないので、パソコンで見たときの補助として考えてください。
| プラン | 月額 | 容量 |
|---|---|---|
| ライト | 550円 | 200GB |
| スタンダード | 1,100円 | 300GB |
| ハイスピード | 2,200円 | 400GB |
.c-table-hover{
border-collapse: collapse;
width: 100%;
font-size: 15px;
color: #333;
}
.c-table-hover th,
.c-table-hover td{
border: 1px solid #e0e0e0 !important;
padding: 12px 15px;
text-align: left;
}
.c-table-hover th{
background: #f5f5f5 !important;
font-weight: bold;
}
.c-table-hover tbody tr{
transition: background .2s;
}
.c-table-hover tbody tr:hover{
background: #eef6ef !important;
}⑤角丸＋影のカード風
表全体を角丸にして、うっすら影を付けたデザインです。外枠の線をなくして影で浮かせると、やわらかくて今っぽい雰囲気になります。記事の中で1か所だけ目立たせたい表に向いています。
| プラン | 月額 | 容量 |
|---|---|---|
| ライト | 550円 | 200GB |
| スタンダード | 1,100円 | 300GB |
| ハイスピード | 2,200円 | 400GB |
このデザインは角丸をきれいに見せるため、border-collapse を separate にしている点がポイントです。
.c-table-card{
border-collapse: separate;
border-spacing: 0;
width: 100%;
font-size: 15px;
color: #333;
border-radius: 10px !important;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
}
.c-table-card th,
.c-table-card td{
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid #eee !important;
}
.c-table-card th{
background: #37a845 !important;
color: #fff;
font-weight: bold;
}
.c-table-card tbody tr:last-child td{
border-bottom: none !important;
}⑥罫線なしのミニマル
縦線をなくして、横の区切り線だけを残したデザインです。線が減るぶん情報がすっきり見えます。読み物の中にさらっと表を置きたいときに合います。
| プラン | 月額 | 容量 |
|---|---|---|
| ライト | 550円 | 200GB |
| スタンダード | 1,100円 | 300GB |
| ハイスピード | 2,200円 | 400GB |
.c-table-minimal{
border-collapse: collapse;
width: 100%;
font-size: 15px;
color: #333;
}
.c-table-minimal th,
.c-table-minimal td{
padding: 12px 15px;
text-align: left;
border: none !important;
border-bottom: 1px solid #e5e5e5 !important;
}
.c-table-minimal th{
border-bottom: 2px solid #37a845 !important;
font-weight: bold;
color: #333;
}⑦比較表向け（丸バツ入り）
サービスやプランを見比べてもらう比較表向けのデザインです。一番左の列を固定の見出しにして、丸とバツを色分けすると、対応しているかどうかがぱっと分かります。
| 項目 | Aプラン | Bプラン |
|---|---|---|
| 独自ドメイン | ◯ | ◯ |
| 自動バックアップ | ◯ | ✕ |
| 電話サポート | ✕ | ◯ |
比較表は一番左を縦の見出しにするので、その列だけ th タグを使います。丸とバツには色分け用のクラスを付けています。
<table class="c-table-compare">
<thead>
<tr>
<th>項目</th>
<th>Aプラン</th>
<th>Bプラン</th>
</tr>
</thead>
<tbody>
<tr>
<th>独自ドメイン</th>
<td class="ok">◯</td>
<td class="ok">◯</td>
</tr>
<tr>
<th>自動バックアップ</th>
<td class="ok">◯</td>
<td class="ng">✕</td>
</tr>
</tbody>
</table>.c-table-compare{
border-collapse: collapse;
width: 100%;
font-size: 15px;
color: #333;
min-width: 420px;
}
.c-table-compare th,
.c-table-compare td{
border: 1px solid #e0e0e0 !important;
padding: 12px 14px;
text-align: center;
}
.c-table-compare thead th{
background: #37a845 !important;
color: #fff;
font-weight: bold;
}
.c-table-compare tbody th{
background: #f5f5f5 !important;
text-align: left;
font-weight: bold;
}
.c-table-compare .ok{
color: #37a845;
font-weight: bold;
}
.c-table-compare .ng{
color: #c0392b;
font-weight: bold;
}スマホで表がはみ出すときの対処
列が多い表は、スマホの狭い画面だと右にはみ出して、レイアウトが崩れてしまうことがあります。一番かんたんな対処は、表を囲む枠に横スクロールを付ける方法です。画面に収まらない分だけ、指で横になぞって見られるようになります。
やり方は、表を div で囲んで、その div に横スクロールの指定をするだけです。表そのもののCSSはそのままで大丈夫です。
<div class="c-table-scroll">
<table class="c-table">
<thead>
<tr>
<th>プラン</th>
<th>月額</th>
<th>容量</th>
</tr>
</thead>
<tbody>
<tr>
<td>ライト</td>
<td>550円</td>
<td>200GB</td>
</tr>
</tbody>
</table>
</div>.c-table-scroll{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}これでスマホでも表が崩れず、はみ出した部分は横スクロールで確認できます。列が3つ程度なら不要ですが、比較表のように列が増える表では入れておくと安心です。
まとめ
コピペで使えるCSSのテーブルデザインを7種類紹介しました。ストライプやヘッダーの色付けなど、少し手を加えるだけで表の見やすさはぐっと変わります。
まずは気に入ったものを1つコピペして、自分のサイトで試してみてください。列が多い表を作るときは、最後のスマホ対応もあわせて入れておくと安心です。
他のパーツのデザインも探している方は、CSSボタンデザインの記事もあわせてどうぞ。
それではまた。
