本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. テーブル装飾
16 / TABLE 12 パーツ

CSSテーブルデザイン 12選

コピペで使えるおしゃれなCSSテーブル（表）のサンプル集。ストライプ・行ホバー・料金表・比較表など、シャッフルで配色のバリエーションを試せます。表示中のプレビューとコードは常に一致するので、気に入ったらそのままコピーしてください。クラス名は .bnto-table-stripe 形式です。

該当するパーツが見つかりませんでした。

項目担当状態
デザイン佐藤完了
実装鈴木進行中

ストライプ

.bnto-table-stripe {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
.bnto-table-stripe th {
  background: hsl(168 34% 45%); color: #fff;
  text-align: left; padding: 9px 13px;
}
.bnto-table-stripe td { padding: 9px 13px; }
.bnto-table-stripe tbody tr:nth-child(even) td {
  background: hsl(168 34% 45% / 0.09);
}
使い方のコツ

縞は tbody tr:nth-child(even)（偶数行）で作ります。odd にすると1行目から色が付きます。縞色はヘッダー色の透明度を下げた同系色にすると統一感が出ます。

科目前期後期
売上120150
利益3448

枠線グリッド

.bnto-table-bordered {
  width: 100%; border-collapse: collapse; background: #fff;
}
.bnto-table-bordered th,
.bnto-table-bordered td {
  border: 1px solid #E5DFD2;
  padding: 9px 13px; text-align: left;
}
.bnto-table-bordered th {
  background: hsl(202 55% 36% / 0.12);
  color: hsl(202 55% 36%);
}
使い方のコツ

全セルに罫線を引く定番スタイル。border-collapse: collapse がないと線が二重になるので必須です。数値の列は text-align: right にすると桁が揃って読みやすくなります。

商品価格在庫
ノート¥300あり
ペン¥150残少

ヘッダー強調

.bnto-table-header {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
.bnto-table-header th {
  background: hsl(258 47% 56%); color: #fff;
  text-align: left; padding: 9px 13px;
}
.bnto-table-header td { padding: 9px 13px; }
.bnto-table-header tbody tr + tr td { border-top: 1px solid #EFEAE0; }
使い方のコツ

ヘッダーに濃い色を1色置くだけの最小構成。border-radius ＋ overflow: hidden のペアで、tableでも角丸が綺麗に出ます。サイトのアクセント色に合わせて使うと馴染みます。

日程内容場所
4/1説明会東京
4/8面談大阪

角丸カード型

.bnto-table-rounded {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 14px; overflow: hidden;
  border: 2px solid hsl(327 50% 40% / 0.16);
}
.bnto-table-rounded th {
  background: hsl(327 50% 40% / 0.16);
  color: hsl(327 50% 40%);
  text-align: left; padding: 9px 13px;
}
.bnto-table-rounded td { padding: 9px 13px; }
.bnto-table-rounded tbody tr + tr td { border-top: 1px solid #F2EEE6; }
使い方のコツ

外枠とヘッダー背景を同じ薄色で揃えるとカードのような一体感が出ます。角丸を大きくするほどやわらかい印象に。シャッフルで角丸の大きさも一緒に変化します。

項目数値前月比
訪問数8,200+12%
登録数340+8%

ミニマル下線

.bnto-table-minimal {
  width: 100%; border-collapse: collapse;
}
.bnto-table-minimal th {
  border-bottom: 2px solid hsl(41 100% 50%);
  color: hsl(41 90% 28%);
  text-align: left; padding: 9px 13px;
}
.bnto-table-minimal td {
  padding: 9px 13px;
  border-bottom: 1px solid #EFEAE0;
}
使い方のコツ

背景色なし・横線のみのミニマル構成。ブログ本文やドキュメント系サイトのように、周囲の余白と調和させたい場面に向きます。ヘッダー下の線だけ太く・濃くするのがポイントです。

名前部署内線
田中営業101
高橋開発203

行ホバー

.bnto-table-hover {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
.bnto-table-hover th {
  background: hsl(202 60% 50%); color: #fff;
  text-align: left; padding: 9px 13px;
}
.bnto-table-hover td {
  padding: 9px 13px;
  transition: background .15s;
}
.bnto-table-hover tbody tr:hover td {
  background: hsl(202 60% 50% / 0.12);
}
使い方のコツ

角丸＋overflow: hidden のテーブルでは、tr ではなく td に背景を当てると角が綺麗に出ます。プレビューの行にマウスを乗せると動きを確認できます。

ID項目状態
001初期設定完了
002データ移行作業中
003検証未着手

コンパクト

.bnto-table-compact {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  font-size: 13px;
}
.bnto-table-compact th {
  background: hsl(202 55% 38% / 0.14);
  color: hsl(202 55% 38%);
  text-align: left; padding: 5px 10px;
}
.bnto-table-compact td {
  padding: 5px 10px;
  border-top: 1px solid #EFEAE0;
}
使い方のコツ

行数の多い管理画面やデータ一覧向けの高密度スタイル。padding と font-size を絞るだけで一画面に収まる情報量が大きく増えます。行ホバーと組み合わせるとさらに追いやすくなります。

指標今月先月
PV52k47k
CV率3.2%2.8%

ダークヘッダー

.bnto-table-dark {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.bnto-table-dark th {
  background: #2A2622; color: #fff;
  text-align: left; padding: 9px 13px;
}
.bnto-table-dark td { padding: 9px 13px; }
.bnto-table-dark tbody tr:nth-child(even) td {
  background: hsl(38 80% 52% / 0.08);
}
使い方のコツ

黒に近いヘッダーはどんな配色のサイトにも合わせやすい万能型。シャッフルすると縞の薄色だけが変わります。真っ黒（#000）より少し茶やグレーに寄せた黒のほうが上品に見えます。

機能無料版Pro版
容量1GB100GB
サポートなしあり

先頭列強調（比較表）

.bnto-table-accentcol {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
.bnto-table-accentcol th {
  background: hsl(327 55% 52% / 0.14);
  color: hsl(327 47% 36%);
  text-align: left; padding: 9px 13px;
}
.bnto-table-accentcol td { padding: 9px 13px; }
.bnto-table-accentcol td:first-child {
  color: hsl(327 55% 52%); font-weight: 800;
}
.bnto-table-accentcol tbody tr + tr td { border-top: 1px solid #EFEAE0; }
使い方のコツ

比較表の「項目名の列」を色分けして視線の起点を作るスタイル。より正確なマークアップにするなら、先頭セルを <th scope="row"> にして th:first-child で装飾すると支援技術にも行見出しとして伝わります。

プラン月額特典
Basic¥500—
Pro¥980あり

グラデヘッダー

.bnto-table-gradient {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
/* グラデは thead にまとめて敷く */
.bnto-table-gradient thead {
  background: linear-gradient(90deg, hsl(202 70% 54%), hsl(244 70% 54%));
}
.bnto-table-gradient th {
  color: #fff; text-align: left; padding: 9px 13px;
}
.bnto-table-gradient td { padding: 9px 13px; }
.bnto-table-gradient tbody tr + tr td { border-top: 1px solid #EFEAE0; }
使い方のコツ

グラデを th ではなく thead に敷くのがコツ。セルごとにグラデが繰り返されず、ヘッダー全体で1本の帯としてつながります。近い色相の2色を選ぶと落ち着いた印象になります。

プランライトプロ
月額¥500¥980
容量5GB100GB

料金表（おすすめ列）

.bnto-table-pricing {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
.bnto-table-pricing th {
  background: #F5F0E6; color: #6b665e;
  text-align: left; padding: 10px 13px;
}
.bnto-table-pricing td {
  padding: 10px 13px;
  border-top: 1px solid #EFEAE0;
}
/* おすすめ列は class="rec" を付ける */
.bnto-table-pricing th.rec {
  background: hsl(5 62% 50%); color: #fff;
}
.bnto-table-pricing td.rec {
  background: hsl(5 62% 50% / 0.1);
  color: hsl(5 62% 32%); font-weight: 800;
}
使い方のコツ

推したいプランの列全セルに class="rec" を付けるだけ。強調は1列に絞るのが鉄則です。ヘッダーは濃色、データ行は同系の薄色にすると縦のつながりが自然に見えます。

品目数量金額
用紙2¥800
インク1¥1,600
合計3¥2,400

集計行（tfoot）

.bnto-table-total {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
.bnto-table-total th {
  background: hsl(150 55% 45% / 0.08);
  color: hsl(150 55% 31%);
  text-align: left; padding: 9px 13px;
}
.bnto-table-total td {
  padding: 9px 13px;
  border-top: 1px solid #EFEAE0;
}
.bnto-table-total tfoot td {
  border-top: 2px solid hsl(150 55% 45%);
  background: hsl(150 55% 45% / 0.08);
  color: hsl(150 55% 31%); font-weight: 800;
}
使い方のコツ

合計・小計の行は <tfoot> に入れるのがHTMLの正しい構造。CSSでまとめて装飾でき、印刷時にも「表の末尾」として扱われます。上境界線を太くすると集計行らしさが際立ちます。

CSSテーブルデザインの基礎知識

表（テーブル）は、料金・スペック・スケジュールなど比較して読む情報を最も速く伝えられるUIです。このページでは「CSS テーブル おしゃれ」に仕上げたい人向けに、表のデザインをコピペで使えるサンプルとして12種類掲載しています。すべて画像不要のピュアCSSで、色やサイズの変更も自由自在です。

テーブルCSSの出発点は border-collapse: collapse; です。指定しないとセルごとの境界線が二重に表示され、余計な隙間も生まれます。掲載コードにはこのリセットが含まれているので、貼り付けるだけで整った表になります。また見出しセルは <th>、データセルは <td> と役割どおりに使い分けましょう。thは太字にするための要素ではなく「見出し」を意味する要素で、スクリーンリーダーは th を手がかりに「どの列の値か」を読み上げます。列見出しには scope="col"、行見出しには scope="row" を添えるとさらに確実です。

ストライプとホバーで行を追いやすく

行数が多い表では、1行おきの縞模様（ストライプ）とマウスを乗せた行のハイライトが可読性を大きく改善します。どちらもCSSだけで実現でき、tr:nth-child(even) と tr:hover を覚えるだけ。縞の色はヘッダー色の透明度を落とした同系色にすると、デザインコピペ後もサイトに馴染みます。

スマホでの表の扱い（横スクロール）

列の多い表はスマホで必ずはみ出します。無理に折り返すより、<div style="overflow-x: auto;"> で表を包んで横スクロールさせるのが定番の解決策です。表そのものの構造を崩さないため、SEO・アクセシビリティの面でも安全です。

料金表・比較表を目立たせるコツ

料金表では「おすすめプランの列」を1つだけ色で浮かせると、迷っているユーザーの決断を後押しできます。比較表では先頭列（項目名の列）を強調して視線の起点を作るのが効果的。いずれも強調は1か所に絞るのが鉄則で、各カードの「シャッフル」ボタンで配色の当たりを素早く探せます。

よくある質問

コピーしたCSSテーブルはそのまま使えますか？
はい。CSSタブのコードをスタイルシートに、HTMLタブのコードをページに貼り付けるだけで動きます。width や border-collapse などのリセットも含まれているため、追加の下準備は不要です。クラス名はすべて bnto- で始まる独自プレフィックス付きなので、既存のスタイルと衝突しにくい設計です。
スマホで表がはみ出してしまうときは？
テーブルを overflow-x: auto; を指定した div で囲むと、表全体が横スクロールできるようになります。列を無理に縮めるより読みやすさを保てる定番の方法です。
表の色や行の高さを変更するには？
th や td の background、padding の値を書き換えるだけです。各カードの「シャッフル」ボタンを押すと配色のバリエーションをその場で試せて、コードも自動で書き換わります。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「枠線グリッド」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

テーブルと組み合わせて使いやすいパーツはこちら。

カード装飾 リスト装飾 フォーム部品 区切り線