CSSでおしゃれな表（テーブル）を作る方法｜コピペで使えるデザイン集

なるほど、その悩みめちゃくちゃ多いよ！素の

Webサイトや記事の中で、料金表・比較表・スペック一覧などを載せる場面はとても多いです。ところが、HTMLの<table>をそのまま書いただけの表は、罫線が細くて詰まって見え、正直あまりおしゃれとは言えません。さらにスマホで見ると列が多い表は横にはみ出して、レイアウトが崩れてしまいがちです。

この記事では、CSSだけでおしゃれな表を作る方法を、コピペで使えるデザイン集としてまとめました。基本の整形から、ストライプ・ホバーハイライト・角丸ヘッダー・影付き・カード化、そしてスマホでも崩れないレスポンシブ対応まで、実際に動く正しいコードを1つずつ掲載しています。すべて外部ライブラリ不要、CSSだけで完結します。

あわせて、見た目だけでなくアクセシビリティ（読み上げソフトへの対応や色のコントラスト）や、WordPress記事の中で表を扱うときの実務的なコツも解説します。最後まで読めば、「地味な表」から卒業して、読みやすくおしゃれで、スマホでも崩れない表を自分で作れるようになります。

この記事の結論：おしゃれな表はCSSの数行で作れる

先に結論からお伝えします。おしゃれな表を作るために特別な技術は必要ありません。押さえるべきポイントは次のとおりです。

• 罫線はborder-collapse: collapse;でまとめ、余白（padding）をしっかり取るだけで、素の表は見違えるほど整います。
• 1行おきに背景色を変える「ストライプ（ゼブラ）」と、マウスを乗せた行を光らせる「ホバーハイライト」を入れると、一気に読みやすくおしゃれになります。
• 角丸ヘッダー・影付き・カード化など、装飾はコピペで足せます。用途に合わせて選ぶだけです。
• スマホ対策は「横スクロール」か「縦積み」の2択。列が多い表は横スクロール、項目が少ない表は縦積みが基本です。
• <th scope>や<caption>で、見た目だけでなく読み上げにも配慮すると、誰にとっても使いやすい表になります。

それでは、まず土台となる正しいHTMLのマークアップから見ていきましょう。ここを丁寧にしておくと、あとのCSSがぐっと効きやすくなります。

なお、この記事のデザインはすべてCSSだけで完結し、JavaScriptやプラグインは不要です。気に入ったコードをコピーして、色や余白の数字を自分のサイトに合わせて変えるだけで使えます。「まず貼って動かしてみて、あとから微調整する」という順序で読み進めると、理解が早くなります。

そもそも、なぜ素のテーブルは地味に見えるのか

具体的なデザインに入る前に、なぜ素の表がダサく見えるのかを理解しておくと、直すべきポイントが自然と見えてきます。原因は大きく3つあります。

1つ目は罫線が二重になって太く見えること。HTMLの表は初期状態だと、隣り合うセルの罫線が重なって二重線のように見えます。これが「昔のホームページ」のような古くさい印象を生みます。border-collapse: collapse;を1行足すだけで、この二重線は解消されます。

2つ目はセル内の余白が極端に狭いこと。初期状態のセルは、文字とセルの縁がほとんどくっついています。余白がないと詰まって窮屈に見え、内容が読みにくくなります。paddingを足すだけで、驚くほど印象が変わります。

3つ目は見出しと中身の区別がつきにくいこと。素の表は見出しが少し太字になるだけで、データ行との差がほとんどありません。見出しに背景色を付けたり、行に縞模様を入れたりして「どこが見出しでどこが中身か」を明確にすると、一気に整理された印象になります。

つまり、素の表を直すというのはこの3つ（罫線・余白・区別）を整える作業にほかなりません。この記事のデザインも、突き詰めればこの3点を土台にした応用です。まずはこの原理を頭に入れておきましょう。

逆に言えば、おしゃれな表を作るのに凝ったテクニックや大量のCSSは必要ありません。多くの初心者が「かっこいい表＝特殊な技術」だと思い込み、いきなり影やグラデーションから手を付けてしまいますが、それは順番が逆です。まず罫線・余白・区別の3点で読みやすい土台を作り、そのうえで用途に合った装飾を1〜2個だけ足す。この順序を守るだけで、素人っぽさから抜け出せます。この記事もその順序どおりに、基本の整形から順番に進めていきます。焦らず土台から積み上げていきましょう。

まずは土台：正しいテーブルのHTMLマークアップ

おしゃれな表を作る前に、HTMLの構造を正しく書くことが何より大切です。構造が正しいと、CSSが当てやすくなるだけでなく、検索エンジンや読み上げソフトにも「これは表だ」と正しく伝わります。まずは基本形を見てください。

<figure class="table-wrap">
  <table>
    <caption>プラン別の料金比較（税込）</caption>
    <thead>
      <tr>
        <th scope="col">プラン</th>
        <th scope="col">月額料金</th>
        <th scope="col">容量</th>
        <th scope="col">サポート</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">フリー</th>
        <td>0円</td>
        <td>1GB</td>
        <td>メールのみ</td>
      </tr>
      <tr>
        <th scope="row">スタンダード</th>
        <td>980円</td>
        <td>50GB</td>
        <td>チャット</td>
      </tr>
      <tr>
        <th scope="row">プロ</th>
        <td>1,980円</td>
        <td>無制限</td>
        <td>電話・チャット</td>
      </tr>
    </tbody>
  </table>
</figure>

この中には、おしゃれな表を作るうえで欠かせない要素が詰まっています。1つずつ意味を確認しておきましょう。

thead / tbody で「見出し行」と「中身」を分ける

<thead>は表の見出し行、<tbody>は中身のデータ行を表すタグです。見た目上は分けなくても表示されますが、分けておくとCSSで「見出しだけ色を変える」「見出しだけ固定する」といった指定が簡単になります。あとで紹介する固定ヘッダーなどは、この分割が前提になります。

th と td の違いを理解する

<th>は「見出しセル（table header）」、<td>は「データセル（table data）」です。見出しにあたるセルは必ず<th>にするのが正しい書き方です。ブラウザは<th>を自動で太字・中央寄せにしますが、それ以上に「これは見出しである」という意味を持たせられる点が重要です。上の例では、列の見出し（プラン・月額料金など）だけでなく、各行の先頭（フリー・スタンダードなど）も<th>にしています。

scope 属性で見出しの向きを伝える

scope="col"は「この見出しは縦の列に対応する」、scope="row"は「この見出しは横の行に対応する」という意味です。目で見れば分かることですが、読み上げソフトを使う人には見えません。scopeを付けておくと、「この数字はプロプランの月額料金です」と正しく読み上げられます。アクセシビリティの章でもう一度詳しく解説します。

caption で表のタイトルを付ける

<caption>は表そのもののタイトルです。<table>の直後に書きます。見出し（h2など）で表の説明をしていても、captionを付けておくと表単体で意味が通じ、読み上げにも役立ちます。CSSでデザインも自由に変えられるので、飾りとしても活用できます。

figure で囲んでレスポンシブに備える

表全体を<figure>や<div>で囲んでおくと、あとでスマホ対応の「横スクロール」を実装するときに便利です。囲み要素にスクロールを効かせるのがレスポンシブ表の定石なので、最初から用意しておきましょう。

この土台があれば、あとはCSSを足していくだけです。次からいよいよデザインに入ります。

デザイン1：基本の整形（これだけで見違える）

まずは装飾を足す前に、素の表を「整った表」にする基本CSSです。ポイントはたった2つ、「罫線をまとめる」と「余白を取る」だけ。これだけで詰まった印象がなくなり、ぐっと読みやすくなります。

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}
th,
td {
  padding: 12px 16px;
  border: 1px solid #dcdcdc;
  text-align: left;
}
th {
  background: #f5f5f5;
  font-weight: bold;
}

border-collapse: collapse;は、セルとセルの間にできる二重線をなくし、罫線を1本にまとめる指定です。これを入れないと、罫線が太く見えて古くさい印象になります。表のCSSではほぼ必須のおまじないだと覚えておいてください。

次に大事なのがpadding（セル内の余白）です。多くの人が「表がダサい」と感じる原因は、実はこの余白不足です。上下12px・左右16pxくらいをしっかり取るだけで、風通しがよくなり洗練された印象になります。数字は好みで調整してかまいません。

width: 100%;で表を親要素いっぱいに広げ、thには薄いグレーの背景を付けて見出しを目立たせています。まずはこのベースを土台に、次から少しずつ装飾を足していきましょう。

なぜ「余白」だけで印象が変わるのか

初心者の表がダサく見える最大の原因は、装飾の少なさではなく余白の不足です。文字とセルの縁がくっついていると、目が休まる場所がなく、内容が詰まって窮屈に感じられます。逆に、上下・左右にゆとりのある余白を取るだけで、同じ内容でも「丁寧に作られた表」という印象に変わります。デザインに入る前に、まずこの余白をしっかり確保することを意識してください。プロが作る表と素人の表の差は、実は装飾の量ではなく余白の取り方に出ることが多いのです。

フォントサイズと行間も読みやすさを左右する

表の中の文字は、本文より少し小さめ（14〜15px）にすると、たくさんの情報を詰め込んでもうるさくなりません。あわせてline-height（行間）を1.5〜1.7程度に取っておくと、セル内で文章が2行になったときも読みやすくなります。数値だけの表なら詰め気味でもよいですが、文章が入るセルがある表では、行間を広めに取るのが読みやすさのコツです。細かいことですが、こうした調整の積み重ねが「読みやすい表」を作ります。

デザイン2：ストライプ（ゼブラ）で行を見やすく

1行おきに背景色を変えるデザインを「ストライプ」または「ゼブラ」と呼びます。行の区切りが視覚的に分かりやすくなり、横に長い表でも視線が迷いません。CSSの:nth-childという機能を使うと、1行も手作業で色を付けずに実現できます。

tbody tr:nth-child(even) {
  background: #f7f9fc;
}
tbody tr:nth-child(odd) {
  background: #ffffff;
}

:nth-child(even)は「偶数番目の行」、:nth-child(odd)は「奇数番目の行」を指します。上の例では偶数行にだけ薄い青を敷いています。色は極端に濃くしないのがコツで、#f7f9fcのようなほんのり色づく程度にすると上品にまとまります。

なおtbodyを付けているのは、見出し行（thead）にはストライプをかけたくないからです。tbody tr:nth-child(...)とすることで、中身のデータ行だけに縞模様を適用できます。

nth-child の数字を変えて縞の間隔を調整する

:nth-childはカッコの中に数式を書けます。たとえば:nth-child(3n)と書けば「3行ごと」に色が付き、:nth-child(3n+1)なら「1、4、7行目」に色が付きます。2行を1セットで色分けしたいときは、:nth-child(4n+1), :nth-child(4n+2)のように複数指定すると、2行おきの太い縞模様が作れます。データの意味に合わせて縞の間隔を変えると、より情報が読み取りやすくなります。

ストライプが効かないときのチェックポイント

ストライプを書いたのに色が付かない、というトラブルはよくあります。原因はたいてい2つです。1つは行に別の背景色が優先されているケース。tdやtrに個別のbackgroundが当たっていると、そちらが勝ってしまいます。もう1つは:nth-childの数え方の勘違いで、theadの行も数に含めてしまっているケースです。tbody tr:nth-child(...)のようにtbodyを明示すれば、中身の行だけを正しく数えられます。

デザイン3：ホバーで行をハイライト

マウスを乗せた行の色が変わるデザインです。「今どの行を見ているか」が一目で分かり、データが多い表でとても役立ちます。実装は:hoverを1行足すだけです。

tbody tr {
  transition: background 0.2s ease;
}
tbody tr:hover {
  background: #eef3fb;
}

:hoverは「マウスカーソルが乗っているとき」を意味します。ここでは行全体（tr）に乗ったときの背景色を指定しています。transitionを添えておくと、色がパッと切り替わらずふわっと変化して上品になります。

先ほどのストライプと組み合わせるときは、ホバーの色をストライプより少し濃くしておくと、乗っている行がしっかり浮き上がって見えます。スマホにはマウスホバーがないため、あくまでPC向けの補助的な演出だと考えておきましょう。

列単位でハイライトしたいときの考え方

行ではなく「列」をホバーで光らせたい、という要望もありますが、CSSだけで列全体をホバー検知するのは実は簡単ではありません。行は<tr>という1つの要素にまとまっていますが、列は要素としてまとまっていないからです。どうしても列ハイライトが必要な場合は、少量のJavaScriptで「同じ列番号のセルにクラスを付ける」処理を書くのが現実的です。まずは行ハイライトで十分読みやすくなるので、無理に列ハイライトを目指さないのがおすすめです。

デザイン4：角丸ヘッダーでやわらかい印象に

見出し行の左右の角を丸くすると、かっちりしすぎない、やわらかい印象になります。カフェのメニューや女性向けサイトなど、柔らかい雰囲気に合うデザインです。

table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
}
thead th {
  background: #5b6ef5;
  color: #fff;
  border: none;
}
thead th:first-child {
  border-top-left-radius: 12px;
}
thead th:last-child {
  border-top-right-radius: 12px;
}

ここで注意したいのが、border-radiusとborder-collapse: collapse;は相性が悪いという点です。collapseのままだと角丸が効きません。そこでborder-collapse: separate;に切り替え、border-spacing: 0;でセル間の隙間を消し、表全体にoverflow: hidden;とborder-radiusをかけています。

overflow: hidden;を表本体にかけると、はみ出した角がきれいに切り取られ、ヘッダーの角丸が表全体の丸みとぴったり揃います。個別のセルに角丸を付けるより、この方法のほうが簡単で崩れにくいのでおすすめです。

separate と collapse の違いをここで整理

角丸を扱うと必ず出てくるのが、border-collapseの2つの値の違いです。ここで整理しておきましょう。collapseは罫線を1本にまとめる（角丸が効かない）、separateはセルごとに罫線を持つ（角丸が効く）という関係です。角丸やborder-spacing（セル間の余白）を使いたいときはseparate、シンプルに罫線を1本にまとめたいときはcollapse、と覚えておけば迷いません。

角丸ヘッダーは女性向けサイトや飲食・美容などのやわらかいブランドに特に合います。逆に、金融・法律・技術資料のような堅実さを求められる場面では、角ばったcollapseの表のほうがしっくりきます。デザインは「かわいいかどうか」ではなく、サイトの雰囲気に合うかどうかで選びましょう。

デザイン5：影付きで浮いて見えるカード風テーブル

表全体にうっすら影を付けると、背景から浮き上がって見えるカードのような表になります。白背景のページに置くと立体感が出て、洗練された印象になります。

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
th,
td {
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
}
tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: none;
}

ポイントはbox-shadowです。書式は「横方向・縦方向・ぼかし・色」の順で、影は薄く、下方向に落とすのが自然に見えるコツです。rgba(0,0,0,0.08)のように透明度を下げた黒を使うと、どんな背景色にもなじみます。

縦の罫線をなくし、横の罫線（border-bottom）だけにすると、すっきりモダンな見た目になります。最後の行の下線は:last-childで消しておくと、影のふちと二重にならず美しく仕上がります。

影を自然に見せる3つのコツ

box-shadowは使い方を間違えると一気に安っぽくなります。自然に見せるコツは3つ。1つ目は透明度を下げた黒（rgba）を使うこと。真っ黒の影はきつく見えるので、rgba(0,0,0,0.08)くらいの薄さにします。2つ目はぼかしを大きめに取ること。ぼかしが小さいと輪郭がくっきりして硬い印象になります。3つ目は影を真下（またはやや下）に落とすことです。光は上から当たる前提なので、影が下にあると自然に見えます。この3点を守るだけで、影の質がぐっと上がります。

ホバーで浮き上がりを強調する応用

影付きの表は、ホバーで影を強めると「持ち上がる」ような動きが加わり、さらに立体的になります。

table {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
table:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}

transform: translateY(-3px);で少し上に持ち上げ、同時に影を濃く大きくすることで、表全体がふわっと浮く動きになります。単体のカードとして見せたい表に向いた演出です。ただし表がたくさん並ぶページでは動きが多すぎて疲れるので、ここぞという1つの表に絞って使いましょう。

デザイン6：ゼブラ＋縦罫線でデータ表らしく

数値がたくさん並ぶスペック表や成績表など、データの正確さを重視する表には、あえて縦の罫線も残す設計が向いています。ストライプと縦罫線を組み合わせて、きっちり読める表を作りましょう。

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 10px 14px;
  border: 1px solid #d0d7de;
  text-align: center;
}
thead th {
  background: #384252;
  color: #fff;
}
tbody tr:nth-child(even) {
  background: #f4f6f8;
}
td:first-child,
th:first-child {
  text-align: left;
}

数値は中央寄せか右寄せにすると桁が揃って読みやすくなります。ここでは全体を中央寄せにしつつ、先頭列（項目名）だけtext-align: left;で左寄せに戻しています。項目名は文章、数値は数字と、役割で寄せ方を変えるのがプロっぽい仕上げです。

見出しの背景を濃い紺色にすると、白い数字がくっきり見えて「資料らしい」堅実な印象になります。ゼブラの色も控えめにして、罫線とケンカしないようにするのがポイントです。

数値の桁を揃えて読みやすくする

数値がメインの表では、小数点や桁を縦に揃えると一気に読みやすくなります。金額のように桁が変わる数値は右寄せ（text-align: right;）にすると、位が縦に揃って比較しやすくなります。さらにfont-variant-numeric: tabular-nums;を指定すると、数字の幅が均等になり、フォントによっては桁ズレがきれいに直ります。数値表を作るときに覚えておくと役立つ小技です。

デザイン7：見出しを色分けして役割を強調

行の見出し（左端）と列の見出し（上端）で色を変えると、表の構造が直感的に伝わります。縦横どちらから見ればいいかが一目で分かる、親切なデザインです。

thead th {
  background: #2f6fed;
  color: #fff;
}
tbody th[scope="row"] {
  background: #eaf1ff;
  color: #1b3c78;
  font-weight: bold;
}
td {
  background: #fff;
}

ここで効いてくるのが、土台のHTMLで書いたth scope="row"です。行の先頭セルをきちんと<th>にしておいたおかげで、tbody th[scope="row"]という指定で「行見出しだけ」に色を付けられます。マークアップを正しくしておくと、CSSがこんなに楽になるという好例です。

列見出しは濃い色、行見出しは薄い色、と濃淡で階層を付けると、うるさくならずに構造が伝わります。色は3色くらいまでに抑えておくと、まとまりのある表になります。

デザイン8：カード化（1行を1枚のカードに見せる）

罫線で区切るのではなく、行と行の間に余白を空けて、1行を独立したカードのように見せるデザインです。おしゃれなポートフォリオサイトやサービス紹介ページでよく見かけます。

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
}
thead th {
  padding: 8px 18px;
  color: #888;
  font-size: 13px;
  text-align: left;
}
tbody tr {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
tbody td,
tbody th {
  padding: 16px 18px;
}
tbody tr td:first-child,
tbody tr th:first-child {
  border-radius: 10px 0 0 10px;
}
tbody tr td:last-child {
  border-radius: 0 10px 10px 0;
}

カギはborder-spacing: 0 12px;です。横方向の隙間は0、縦方向の隙間は12pxという意味で、行と行の間だけに余白を作れます。border-collapse: separate;とセットで使うのを忘れないでください。

各行（tr）に背景色と影を付けることで、1行がまるごとカードに見えます。行の左右の端をborder-radiusで丸めると、より柔らかいカード感が出ます。罫線を一切使わない、今どきのデザインです。

デザイン9：レスポンシブ対応・横スクロール（列が多い表向け）

ここからが多くの人がつまずくスマホ対策です。まずは一番手軽で、どんな表にも使える「横スクロール」から。表を囲んだ要素にoverflow-x: auto;をかけるだけで、はみ出した表をスワイプで見られるようになります。

土台のHTMLで<table>を<figure class="table-wrap">で囲んでおいたのを覚えていますか？ その囲み要素にスクロールを効かせます。

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table {
  min-width: 600px;
  border-collapse: collapse;
}

overflow-x: auto;は「横方向にはみ出したら、スクロールできるようにする」という指定です。ポイントは表本体にmin-widthを設定すること。これがないと表が無理に縮んで文字が潰れてしまいます。最低幅を決めておけば、それ以下では素直に横スクロールに切り替わります。

-webkit-overflow-scrolling: touch;は、iPhoneなどでスクロールを滑らかにするための補助です。この横スクロール方式は列数が多くて縦積みしにくい比較表・スペック表に特に向いています。実装が簡単で崩れにくいので、迷ったらまずこれを使いましょう。

スクロールできることをユーザーに伝える工夫

横スクロールの弱点は、スクロールできること自体に気づいてもらえない点です。対策として、右端に薄いグラデーションの影を出して「まだ続きがあるよ」と示したり、表の上に「※横にスクロールできます」と一言添えたりすると親切です。

.table-wrap {
  position: relative;
}
.table-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
  pointer-events: none;
}

::afterで表の右端にグラデーションのふちを重ね、続きがあることを視覚的に伝えています。pointer-events: none;を入れておくと、この飾りがスクロール操作を邪魔しません。

横スクロールで最初の列だけ固定したい場合

横スクロールする表で「項目名の列（左端）だけは常に見えていてほしい」という場面はよくあります。この場合は、左端のセルにposition: sticky;とleft: 0;を指定します。縦のヘッダー固定を横方向に応用したテクニックです。スクロールしても左端の列が貼り付いたままになるので、どの行を見ているか見失いません。固定した列には必ず背景色を付け、スクロールで流れてくる中身が透けないようにしましょう。列数が多い比較表で特に役立つ実務テクニックです。

デザイン10：レスポンシブ対応・縦積み（項目が少ない表向け）

もう1つのスマホ対策が縦積み（レスポンシブテーブル）です。スマホでは各セルを縦に並べ替え、「項目名：値」という形で表示します。横スクロール不要で全部見えるのが利点で、料金プランやプロフィール表など列が少ない表に向いています。

実装のコツは、各<td>にdata-label属性で項目名を持たせておくことです。まずHTML側を用意します。

<table class="stack-table">
  <thead>
    <tr>
      <th scope="col">プラン</th>
      <th scope="col">月額</th>
      <th scope="col">容量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="プラン">スタンダード</td>
      <td data-label="月額">980円</td>
      <td data-label="容量">50GB</td>
    </tr>
  </tbody>
</table>

次にCSSです。スマホ幅のときだけ縦積みに切り替えたいので、@media（メディアクエリ）の中に書きます。

@media (max-width: 600px) {
  .stack-table thead {
    display: none;
  }
  .stack-table tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
  }
  .stack-table td {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
  }
  .stack-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #555;
    margin-right: 12px;
  }
  .stack-table td:last-child {
    border-bottom: none;
  }
}

仕組みを分解します。まずtheadをdisplay: none;で隠します。縦積みでは各セルの横に項目名が付くので、上の見出し行はいらなくなるからです。次に各<tr>をdisplay: block;にしてカードのように積み、<td>をdisplay: flex;にして「項目名」と「値」を左右に振り分けています。

最大のポイントがcontent: attr(data-label);です。これは「data-label属性に書いた文字を、そのままここに表示する」という指定です。おかげでHTMLに書いた「プラン」「月額」などの項目名が、スマホでは各値の左に自動で並びます。見出しを隠しても、data-labelが項目名の代わりを果たすというわけです。

縦積みで気をつけたい2つの落とし穴

縦積みは便利ですが、2つ気をつける点があります。1つ目はdata-labelの入れ忘れです。1つでもセルにdata-labelを付け忘れると、そのセルだけ項目名が表示されず、何の値か分からなくなります。すべての<td>に漏れなく付けることを、公開前に必ず確認しましょう。

2つ目は空のセルの扱いです。値が空のセルは、縦積みにすると「項目名だけ」が表示されて不自然になります。データがないセルには「ー」や「非対応」などの文字を入れておくと、縦積みでも自然に見えます。空欄を空欄のまま放置しないのが、きれいな縦積み表のコツです。

横スクロールと縦積み、どちらを選ぶべきか

2つの方式を紹介しましたが、迷ったときは列の数で決めるのが簡単です。列が5個以上ある表は縦積みにすると1行がとても長くなってしまうため、横スクロールが向いています。列が2〜4個の表なら、縦積みにしても1件がコンパクトに収まり、スクロール不要で全部見えるので親切です。詳しい判断基準は後半の実務章の表でもまとめているので、あわせて確認してください。

デザイン11：固定ヘッダー（スクロールしても見出しが残る）

行数がとても多い表では、下にスクロールすると見出しが画面外に消えて「この数字が何の項目か分からない」状態になりがちです。見出し行を画面の上に貼り付けて固定するデザインで、これを解決できます。

.sticky-table {
  max-height: 400px;
  overflow-y: auto;
}
.sticky-table thead th {
  position: sticky;
  top: 0;
  background: #384252;
  color: #fff;
  z-index: 1;
}

カギはposition: sticky;とtop: 0;です。「普段は普通の位置にいて、スクロールで上端に来たらそこで貼り付く」という便利な指定です。ここでは表を囲む要素に高さ（max-height）と縦スクロール（overflow-y: auto;）を付け、その中で見出しだけを固定しています。

注意点として、固定した見出しには必ず背景色を付けること。背景が透明だと、下の行が透けて重なり読めなくなります。また、下の行より前面に出すためにz-indexを指定しておくと安心です。

デザイン12：価格表・比較表のデザイン

料金プランの比較表は、Webサイトで最も重要な表の1つです。おすすめプランを目立たせるデザインにすると、ユーザーの選択を後押しできます。特定の列だけ色を変えたり、少し大きく見せたりするのが定番のテクニックです。

.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
  text-align: center;
}
.price-table th,
.price-table td {
  padding: 18px 14px;
  background: #fff;
  border-radius: 10px;
}
.price-table .recommend {
  background: #fff7e6;
  box-shadow: 0 6px 20px rgba(255, 170, 0, 0.25);
  position: relative;
}
.price-table .recommend::before {
  content: "おすすめ";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffbf00;
  color: #fff;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 999px;
}

class="recommend"を付けたセルにだけ、薄い黄色の背景とオレンジの影を当てています。1つだけ色を変えて特別感を出すのが、価格表の鉄則です。さらに::beforeで「おすすめ」バッジをセルの上にはみ出すように配置し、視線を集めています。

価格表は数値の比較がメインなので、全体を中央寄せにして桁を揃えると見やすくなります。金額は他より少し大きなフォントにする、円マークだけ小さくする、といった細かな調整でぐっと本格的になります。

比較表で「○ / ×」を分かりやすく見せる

機能の有無を比べる比較表では、「○」「×」の記号がよく使われます。ただし記号だけだと味気なく、色の見分けが難しい人には伝わりにくいことがあります。おすすめは、対応している項目には色付きのチェックマーク、非対応にはグレーのバツ、といったように色と形の両方で違いを付けることです。CSSでtd.okには緑、td.ngには薄いグレーを当てるだけでも、ぐっと見やすくなります。記号だけに頼らず、色・太さ・背景で差を付けるのが親切な比較表のコツです。

また、比較表は縦（項目）と横（サービス）のどちらを軸にするかで読みやすさが変わります。一般的には、比べたいもの（サービスや商品）を横に並べ、比較項目を縦に並べると、上から下へ順に読み比べられて分かりやすくなります。列が多くなりすぎる場合は、スマホで横スクロールにする前提で設計しておきましょう。

デザイン13：罫線なしのミニマル表

罫線を一切使わず、余白と背景色だけで区切りを表現するミニマルなデザインです。線がないぶん軽やかで洗練された印象になり、コーポレートサイトやポートフォリオによく合います。

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 16px 20px;
  border: none;
  text-align: left;
}
thead th {
  color: #999;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid #f0f0f0;
}
tbody tr {
  border-bottom: 1px solid #f5f5f5;
}

罫線を全部消すと区切りが分からなくなるので、見出しの下線と行の間の薄い線だけを残しています。線の色は背景とほとんど同じくらい薄くするのがコツで、#f5f5f5のような極薄グレーにすると「線がある」と気づかれない自然な区切りになります。見出しの文字を小さめのグレーにし、letter-spacingで少し字間を空けると、雑誌のような上品さが出ます。

デザイン14：グラデーションヘッダーの華やかな表

見出し行の背景にグラデーションをかけると、単色よりも華やかで印象的な表になります。キャンペーンページやサービス紹介など、目を引きたい場面に向いています。

thead th {
  background: linear-gradient(135deg, #6a8dff, #9b5cff);
  color: #fff;
  padding: 16px;
  border: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(107, 92, 255, 0.15);
}
tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}

linear-gradient(135deg, 色A, 色B)は、指定した角度（135度＝左上から右下）に向かって色Aから色Bへ変化させる指定です。同系色の2色を選ぶと上品に、離れた色を選ぶと派手にまとまります。表全体に角丸と影を添えると、ヘッダーのグラデーションが引き立ち、まとまりのある華やかな表になります。ただし装飾が強いぶん、データを冷静に読ませたい資料には不向きです。使う場面を選びましょう。

表の装飾を組み合わせるときの考え方

ここまで多くのデザインを紹介してきましたが、実務ではこれらを組み合わせて使うことがほとんどです。ただし、あれもこれもと足しすぎると、かえって読みにくくなります。組み合わせるときの基本方針を押さえておきましょう。

装飾は「1表につき2〜3個まで」に絞る

ストライプ＋ホバー、角丸＋影、のように装飾は2〜3個の組み合わせに絞るのが読みやすさの目安です。ストライプ・縦罫線・影・カード化・グラデーションを全部盛りにすると、情報より装飾が目立ってしまい、肝心の中身が頭に入りません。「この表で一番伝えたいことは何か」を考え、それを助ける装飾だけを残すのがコツです。引き算の意識が、洗練された表を作ります。

サイト全体でトーンを揃える

1つの表だけおしゃれでも、サイト内の表ごとにデザインがバラバラだと、かえって素人っぽく見えます。色・角丸・余白のルールをサイト全体で統一すると、まとまりのあるプロっぽい印象になります。具体的には、見出しの色は1色に決める、角丸の半径は揃える、余白の値は共通にする、といったルールを最初に決めておくとよいでしょう。CSSを1か所にまとめて書き、各表ではクラス名を付けるだけにしておくと、この統一が楽になります。

印刷やダークモードも意識する

表は資料として印刷されることもあります。背景色に頼ったデザインは印刷すると色が飛んで見にくくなることがあるので、印刷を想定するなら罫線ベースのデザインも用意しておくと安心です。また、近年はダークモード対応も求められます。@media (prefers-color-scheme: dark)を使えば、暗い背景のときだけ表の色を切り替えられます。すべての表で対応する必要はありませんが、頭の片隅に置いておくと、より親切な表が作れます。

アクセシビリティ：見た目だけでなく「伝わる表」に

おしゃれさと同じくらい大切なのがアクセシビリティです。目で見て分かる表でも、読み上げソフトを使う人や、色の見分けが難しい人にとって使いにくいと、本当に「良い表」とは言えません。難しいことはなく、いくつかのポイントを押さえるだけで対応できます。

そもそもアクセシビリティとは、年齢や障害の有無、使っている機器にかかわらず、誰もが同じように情報にアクセスできる状態を指します。表は「見出しとデータの対応関係」を持つ構造なので、この関係が読み上げソフトに正しく伝わるかどうかが特に重要になります。逆に言えば、正しいHTMLで組んでおけば、追加のコストをほとんどかけずにアクセシブルな表が作れます。おしゃれさとアクセシビリティは対立するものではなく、正しい土台の上に装飾を乗せれば両立できる、と考えてください。

th と scope で読み上げに対応する

土台のHTMLで解説したとおり、見出しセルは<th>にし、scopeを付けることが基本です。これがあると、読み上げソフトはセルを読むときに対応する見出しも一緒に読んでくれます。たとえば「980円」だけでなく「スタンダード、月額、980円」と読まれるので、どの数字か迷いません。見た目には表れませんが、必ず入れておきたい配慮です。

caption で表の内容を明示する

<caption>で表のタイトルを付けておくと、読み上げソフトが最初に「これは○○の表です」と教えてくれます。ページ内に表が複数あるとき特に効果的です。見た目上は非表示にしたい場合でも、要素は残して視覚的にだけ隠すのが正しいやり方です。

/* captionを見た目上だけ隠す（読み上げには残る） */
caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

display: none;で消すと読み上げソフトからも消えてしまいます。上のように1pxに縮めて画面外に追いやる書き方（スクリーンリーダー用の非表示テクニック）を使えば、見た目には出さず、読み上げには残せます。

色のコントラストと「色だけに頼らない」設計

見出しの背景色と文字色は、十分なコントラストを確保しましょう。薄いグレーの背景に薄い文字だと読みにくく、色の見分けが難しい人にはさらに厳しくなります。目安として、背景が濃ければ文字は白、背景が薄ければ文字は濃いグレー〜黒、と覚えておくと失敗しません。

コントラストが十分かどうかは感覚に頼らず、チェックツールで確認できます。ブラウザの開発者ツールには、文字色と背景色のコントラスト比を自動で計算し、基準を満たしているか教えてくれる機能があります。一般的な本文サイズの文字なら、コントラスト比4.5以上が目安とされています。おしゃれさを優先して色を薄くしたくなる場面もありますが、読めなければ意味がありません。迷ったらツールで数値を確認する習慣をつけましょう。

また、「重要なセルを色だけで示さない」ことも大切です。おすすめプランを黄色にするなら、色に加えて「おすすめ」の文字バッジも付ける。エラーの行を赤にするなら、アイコンや「要確認」の文字も添える。色が見えない人にも情報が届くようにしておきましょう。

width: 100% とレイアウト崩れ対策

表にwidth: 100%;を当てて親要素いっぱいに広げるのは基本ですが、中に長い英単語やURLがあると、そこがはみ出してレイアウトが崩れることがあります。対策として、セルに折り返しの指定を入れておくと安心です。

td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

word-breakやoverflow-wrapは「長い文字列を途中で折り返してよい」という指定です。これを入れておくと、URLや長い英単語がセルの幅で折り返され、表が横に伸びてページを壊すのを防げます。レスポンシブ表では特に効いてきます。

キーボード操作とフォーカスへの配慮

表の中にリンクやボタンを置く場合は、キーボードだけで操作する人への配慮も忘れないようにしましょう。マウスを使わずTabキーで移動する人にとって、今どこを選択しているかが分かる「フォーカスの枠」はとても重要です。a:focusやbutton:focusにoutline（枠線）を残しておき、うっかりoutline: none;で消してしまわないよう注意してください。おしゃれさのために枠を消すと、キーボード利用者が迷子になります。

表であるべきものだけを表にする

最後に、根本的な話をひとつ。見た目を整えるためだけに<table>を使わないことも、広い意味でのアクセシビリティです。かつては段組みレイアウトに表が使われていましたが、これは読み上げソフトを混乱させます。表は「行と列に意味があるデータ」を表すためのものです。レイアウト目的ならCSSのFlexboxやGridを使い、表は本来のデータ整理に使う、と役割を分けましょう。この使い分けが、結果的に検索エンジンにも正しく内容を伝えることにつながります。

実務のコツ：WordPress記事の中で表を使うとき

ここからは、実際にブログやメディアで表を使うときの現場の判断基準を、編集部の実践をもとに紹介します。デザインのコードは揃っても、「どの表をどう使うか」で読みやすさは大きく変わります。

WordPressの標準テーブルブロックと自作CSSの使い分け

WordPressには標準で「テーブル」ブロックがあり、簡単な表ならこれで十分です。ただし、凝ったデザインや細かいレスポンシブ制御をしたいなら、HTMLブロックで自分でマークアップするほうが自由がききます。編集部では、社内の記事全体で表の見た目を統一したいとき、テーマの追加CSSに表用のスタイルをまとめて書き、記事側ではクラス名を付けるだけにしています。こうすると、あとから全記事の表のデザインを一括で変えられます。

具体的な運用としては、まず「よく使う表のパターン」を2〜3種類に絞ります。たとえば「基本表」「料金比較表」「スマホ縦積み表」の3つです。それぞれにクラス名（.tbl-basic、.tbl-price、.tbl-stackなど）を決め、CSSは追加CSSに1回だけ書いておきます。記事を書くときは、HTMLブロックで<table>にそのクラスを付けるだけ。パターンを絞ってCSSを共通化することで、記事ごとにデザインを考える手間がなくなり、サイト全体の見た目も揃います。これは表に限らず、あらゆるパーツで有効な考え方です。

はみ出し対策は「囲みでスクロール」を標準に

記事の本文幅は限られているため、列が3〜4個を超える表はPCでもはみ出しがちです。編集部では表は必ずoverflow-x: auto;の囲みに入れることをルールにしています。こうしておけば、想定より列が増えても本文レイアウトが崩れる事故を防げます。表を作るときは「囲みで包む」を最初のひと手間として習慣にしておくと安心です。

スマホ最適化の判断基準（横スクロールか縦積みか）

スマホ対応で「横スクロール」と「縦積み」のどちらを選ぶか、編集部では次の基準で決めています。判断に迷ったときの目安にしてください。

迷ったら「並べて比べる表は横スクロール、1件ずつ読む表は縦積み」と覚えておくと、だいたい正解を選べます。両方を無理に組み合わせず、その表に合った1つの方式に絞るのが崩れないコツです。

もう一歩踏み込むと、判断のカギは「読者がその表で何をしたいか」にあります。料金プランの表なら、読者は複数のプランを見比べて「自分に合うのはどれか」を決めたいはずです。この場合は横に並んでいたほうが比較しやすいので、スマホでも横スクロールで並びを保つのが親切です。一方、店舗一覧や求人一覧のように1件ずつ独立した情報を読ませたい表なら、縦積みのカード化が向いています。1件ごとに区切られていたほうが、情報が混ざらず頭に入るからです。デザインの正解は表の中身ではなく「読者の目的」で決まる、と意識すると迷いが減ります。

編集部の表チェックリスト

記事を公開する前に、編集部では次の項目を毎回確認しています。自分でもこのチェックリストを使うと、表まわりのミスを大きく減らせます。

• 見出しセルは<th>になっているか（<td>で代用していないか）
• scope属性は付いているか
• スマホ実機で表示を確認し、はみ出し・文字潰れがないか
• 縦積みの場合、data-labelの項目名がすべてのセルに入っているか
• 色だけで情報を伝えていないか（バッジや文字も添えているか）
• 長いURLや英単語で表が横に伸びていないか
• 行数が多いなら固定ヘッダーを検討したか

特にスマホ実機での確認は欠かせません。ブラウザの開発者ツールで縮小表示するだけでは気づけない崩れが、実機では見つかることが多いです。公開前のひと手間として習慣にしましょう。

表とSEO・LLMOの関係

正しくマークアップされた表は、検索エンジンやAIにも内容が伝わりやすくなるというメリットがあります。<th>と<td>で見出しとデータをきちんと区別し、<caption>で表の主題を示しておくと、検索エンジンは「これは○○を比較した表だ」と理解しやすくなります。近年はAIが記事を要約・引用する場面も増えており、構造が整った表ほど正確に読み取ってもらえます。見た目のためだけでなく、情報を正しく伝える意味でも、正しいマークアップは効いてきます。CSSで飾る前に、まず構造を正しくする——この順番を守ることが、読者にもエンジンにも優しい表を作る近道です。

画像の表は避け、テキストの表にする

たまに、デザインを作り込むために表全体を画像として貼る人がいますが、これはおすすめしません。画像の表は、スマホで拡大しないと読めず、読み上げソフトも内容を読めず、検索エンジンも中身を理解できません。この記事で紹介したように、CSSを使えばテキストのままでも十分おしゃれな表が作れます。特別な理由がない限り、表は必ずテキスト（HTMLの<table>）で作りましょう。手間は少し増えますが、読みやすさ・アクセシビリティ・SEOのすべてで有利になります。

よくある質問（FAQ）

スマホで表が横にはみ出して崩れます。どうすれば直りますか？

最も手軽なのは、表を<div>や<figure>で囲み、その囲みにoverflow-x: auto;を当てる方法です。これで、はみ出した分は横スクロールで見られるようになり、本文レイアウトの崩れも防げます。表本体にmin-widthを指定して、縮みすぎて文字が潰れるのを防ぐのも忘れないでください。列が少ない表なら、data-labelを使った縦積みに切り替えるのも有効です。

なぜ「はみ出す」ことが起きるのかというと、表は中身の文字数に合わせて幅が広がる性質を持っているからです。列が5つも6つもある表は、スマホの画面幅（一般に375px前後）にはとても収まりません。ここで無理に画面内へ押し込もうとすると、文字が改行だらけになって縦に間延びしたり、逆にセルが潰れて読めなくなったりします。だからこそ、「無理に収めず、はみ出した分はスクロールで見せる」という発想が実務では定番になっています。囲みでスクロールさせるやり方は、どんな表にも効くいちばん安全な保険だと覚えておいてください。

セルの中で文字を改行したいのですが、どうすればいいですか？

HTMLの中で改行したい位置に<br>を入れれば、その場所で改行されます。文章の長さに応じて自動で折り返してほしいだけなら、そのセルの幅が決まっていれば自動で折り返されます。長い英単語やURLがはみ出す場合は、CSSでword-break: break-word;やoverflow-wrap: anywhere;を当てると、途中でも折り返してくれます。

列の幅を固定して、内容によってバラバラにならないようにしたいです。

表にtable-layout: fixed;を指定してください。これを付けると、列幅がセルの中身ではなく指定した幅で決まるようになります。あわせて各<th>や<col>にwidthを指定すれば、狙った幅に固定できます。

table {
  table-layout: fixed;
  width: 100%;
}
th:nth-child(1) { width: 30%; }
th:nth-child(2) { width: 20%; }
th:nth-child(3) { width: 50%; }

表の罫線（ボーダー）を全部消してすっきりさせたいです。

すべてのセルの罫線を消すには、th, td { border: none; }と指定します。ただし罫線を全部消すと行の区切りが分からなくなるので、代わりにストライプ（1行おきの背景色）や、横線だけを残す（border-bottomのみ）方法と組み合わせるのがおすすめです。区切りをなくすのではなく、罫線以外の方法で区切りを示すと考えてください。

縦の罫線だけを表示したいのですが、可能ですか？

可能です。まず全体の罫線を消してから、border-leftやborder-rightだけを指定すると縦線だけの表になります。たとえばtd, th { border-right: 1px solid #ddd; }とし、右端のセルだけ:last-childで消せば、内側にだけ縦罫線が並びます。数値を列ごとに区切って見せたいときに便利です。

ホバーで色が変わる効果は、スマホでも使えますか？

スマホやタブレットには基本的にマウスホバーがないため、:hoverの効果はPC向けの補助的な演出と考えてください。タップした瞬間に一瞬反応することはありますが、狙った動きにはなりません。スマホでの見やすさは、ホバーではなくストライプや十分な余白、縦積みレイアウトで確保するのが正解です。

表のヘッダー（見出し行）だけを固定して、スクロールしても見えるようにできますか？

できます。見出しセルにposition: sticky;とtop: 0;を指定します。表を囲む要素に高さとoverflow-y: auto;を付け、その中で見出しを固定するのが基本です。詳しくは本文の「固定ヘッダー」の章で解説しています。固定した見出しには必ず背景色を付けるのを忘れないでください。透明だと下の行が透けてしまいます。

表の中に画像やボタンを入れても大丈夫ですか？

問題ありません。<td>の中には画像・ボタン・リンクなど自由に入れられます。ただしセルの高さが不揃いになりやすいので、画像はサイズを揃える、ボタンはvertical-align: middle;で高さを合わせるなど、少し調整すると見た目が整います。比較表に「申し込む」ボタンを並べるときなどによく使うテクニックです。

セルを結合（1つのセルを2列分に）したいときはどうしますか？

HTMLのcolspanとrowspanという属性を使います。<td colspan="2">と書けば横に2列分をまたぐセルになり、<td rowspan="2">なら縦に2行分をまたぎます。見出しをグループ化したいときなどに便利です。ただし、結合が多い複雑な表はスマホでの縦積みが難しくなるので、レスポンシブ対応が必要な表ではなるべく結合を減らすのがおすすめです。

補足すると、セル結合はCSSではなくHTMLの属性で行う点に注意してください。CSSだけで「2列分の見た目」を作ろうとすると崩れやすく、読み上げソフトにも正しく伝わりません。結合はあくまでcolspan／rowspanで構造として表現し、CSSは色や余白などの見た目調整に専念させるのが正しい役割分担です。また、結合したセルが多い表は後から列を1つ増やす・減らすといった修正がとても大変になります。運用中に項目が増えそうな表は、最初から結合を最小限にしておくと長く使えます。

表の背景を透明にして、ページの背景を透かせますか？

できます。table, th, td { background: transparent; }と指定すれば、セルの背景が透明になり、ページの背景色や背景画像が透けて見えます。おしゃれな背景の上に表を重ねたいときに使えます。ただし背景の上で文字が読みにくくならないかは必ず確認してください。背景が複雑な場合は、うっすら半透明の白（rgba(255,255,255,0.7)など）を敷くと、読みやすさと透け感を両立できます。

表を中央に配置したい／幅を狭くしたいときは？

表の幅をwidthで指定し、左右のマージンをautoにすると中央に置けます。たとえばtable { width: 600px; margin: 0 auto; }とすれば、幅600pxの表がページ中央に配置されます。小さめの表を本文の中央に置きたいときに使えます。ただしスマホではwidth: 100%;に切り替わるよう、max-widthで指定しておくと安全です（max-width: 600px; width: 100%;）。

紹介したデザインを組み合わせて使ってもいいですか？

もちろん大丈夫です。むしろ実務では組み合わせて使うのが普通です。たとえば「基本の整形＋ストライプ＋ホバー」や「角丸ヘッダー＋影」のように重ねると、より完成度が上がります。ただし装飾は2〜3個までに絞るのがコツで、全部盛りにすると情報より装飾が目立ち、かえって読みにくくなります。本文の「組み合わせるときの考え方」の章で詳しく解説しているので、あわせて読んでみてください。

スマホとPCで表のデザインを変えることはできますか？

できます。@media（メディアクエリ）を使えば、画面幅に応じて別々のCSSを適用できます。たとえば「PCでは横並びの比較表、スマホでは縦積みのカード表」というように、同じHTMLのまま見た目だけを切り替えられます。本文の縦積みデザインがまさにこの仕組みです。1つのHTMLで両対応できるので、PC用・スマホ用に別々の表を用意する必要はありません。1つの正しいマークアップを、CSSで見せ方だけ変えるのが基本の考え方です。

表の文字サイズや行の高さを調整して、もっと読みやすくしたいです。

文字サイズはfont-size、行の高さはline-height、セルの余白はpaddingで調整します。読みやすい表にする最大のコツは、実は装飾よりも余白（padding）を十分に取ることです。目安として、セルの上下に10〜14px、左右に14〜18px程度の余白を確保すると、詰まった印象が一気に解消されます。データが多くて縦に長くなる表なら、行の高さをやや詰めて一覧性を上げるなど、表の目的に合わせて調整してください。数字を扱う列はtext-align: right;で右揃えにすると、桁が揃って格段に読みやすくなります。

同じCSSを他のページの表にも使い回すにはどうすればいいですか？

表に共通のクラス名（たとえばclass="my-table"）を付け、そのクラスに対してCSSを書いておけば、同じクラスを付けるだけでどのページの表にも同じデザインが適用されます。CSSを1か所にまとめておけば、色やデザインを変えたくなったときも1か所直すだけで全ページに反映されます。ページごとに<style>を書き散らすのではなく、共通のスタイルシート（CSSファイル）に集約するのが、後々の修正を楽にするコツです。

まとめ：CSSを少し足すだけで、表は見違える

この記事では、CSSでおしゃれな表を作る方法を、基本の整形からストライプ・ホバー・角丸・影・カード化・レスポンシブまで、コピペで使えるデザイン集として紹介しました。どれも外部ライブラリ不要で、CSSを数行足すだけで実装できます。まずは気になったデザインをそのまま貼り付け、色や余白を自分のサイトに合わせて微調整するところから始めてみてください。

大切なのは、見た目のおしゃれさと読みやすさ・アクセシビリティ・スマホ対応を両立させることです。特にスマホでの崩れは読者の離脱に直結するので、公開前に実機で必ず確認しましょう。

最後に、上達のいちばんの近道は「まず1つ貼って動かしてみる」ことです。この記事のコードは、そのままコピーすれば動くように書いています。頭で理解しようとする前に、気に入ったデザインを1つ選んで自分のページに貼り、色や余白の数字を少しずつ変えてみてください。変えた瞬間に見た目がどう変わるかを目で確かめることで、CSSのプロパティが体で覚えられます。手を動かした回数だけ、表づくりは上達します。今日紹介したデザインを土台に、あなたのサイトに合った「地味じゃない表」を作っていきましょう。

・基本はborder-collapseとpadding：罫線をまとめ、余白をしっかり取るだけで素の表は見違える。装飾はそのあと。
・スマホ対策は横スクロールか縦積みの2択：列が多ければoverflow-x: auto;、少なければdata-labelで縦積み。表に合わせて1つに絞る。
・見た目と同じくらいアクセシビリティ：th scope・caption・十分なコントラストで、誰にとっても伝わる表にする。

表づくりのようなCSSの実装力は、正しい順序で手を動かして学べば未経験からでも必ず身につきます。「コピペはできるけど、なぜそう書くのか分からない」から一歩進みたい方は、体系立てて学べる環境を使うのが近道です。WithCodeなら、HTML/CSSの基礎からLP制作まで、実際に手を動かしながら学べます。

参考リンク

• MDN Web Docs｜table 要素

関連記事

• 【2026年最新】ページネーション実装完全ガイド｜HTMLコピペで即使えるCSS付きデザイン集
• CSSでラジオボタン・チェックボックスをカスタマイズする方法｜デザイン自由化の完全手順
• 【コピペ可】CSSだけで作るモダンUIパーツ30選｜実装コード全部載せ
• CSSダークモード実装の完全ガイド｜設計から対応まで
• CSSコンテナクエリ実装完全ガイド｜実案件対応2026年版

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

• 【CSS実装テクニック完全マップ】コピペで使えるWebデザイン実装ガイド総まとめ

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

• 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
• スマホ・PCどちらでもOK：好きな時間に学習できる
• 料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！