テーブルの罫線を自由自在に！CSSのborderとborder-collapseの使い方を徹底解説

テーブルの罫線をカスタマイズする方法（border・border-collapse）

先生と生徒の会話形式で理解しよう

生徒

「Webサイトで表を作ったのですが、罫線（けいせん）が二重になってしまって格好が悪いです。一本の線にまとめるにはどうすればよいですか？」

先生

「それはCSSのborder-collapseというプロパティを使えば解決できますよ。表のデザインを整える基本テクニックの一つです。」

生徒

「border-collapse……？なんだか難しい言葉ですね。初心者でも理解できるでしょうか？」

先生

「心配いりません。border（ボーダー）は境界線のこと、collapse（コラプス）は折りたたむという意味です。一緒に仕組みから丁寧に学んでいきましょう！」

1. テーブルデザインにおける罫線の基本知識

HTMLでテーブル（表）を作ると、デフォルトの状態では各セル（マス目）に隙間が空いていたり、枠線が二重になってしまったりすることがよくあります。これはブラウザが標準で持っているデザインの設定によるものです。私たちが思い描くような、すっきりとした表にするためには、CSSを使ってこの設定を上書きしていく必要があります。

Web制作において「罫線をカスタマイズする」ことは、見やすいサイトを作るための第一歩です。データをきれいに並べることは、ユーザーが情報を素早く理解するために欠かせません。まずは、borderプロパティを使って線に色や太さを与えるところから始めてみましょう。

2. borderプロパティで線を引く基本の書き方

borderプロパティは、要素の周りに境界線を引くための命令です。これに「太さ」「線の種類」「色」を指定することで、自由なデザインを作れます。例えば、「1px solid #333」と書けば、1ピクセルの細い実線（ソリッド）が描かれます。これをテーブル全体やセルに対して適用していきます。


<style>
  .simple-table th, .simple-table td {
    border: 2px solid #555;
  }
</style>

<table class="simple-table">
  <tr>
    <th>項目</th>
    <th>詳細</th>
  </tr>
  <tr>
    <td>設定</td>
    <td>有効</td>
  </tr>
</table>

ブラウザ表示

3. border-collapseで罫線を一本にまとめる

先ほどのコードだけでは、枠線が二重になってしまいます。ここで登場するのが「border-collapse」です。この値を「collapse」に設定すると、バラバラだったセル同士の境界線が重なり合い、きれいな一本の線として表示されます。これは、プロのWebデザイナーが表を作る際に必ず使う魔法のような設定です。


<style>
  .collapse-table {
    border-collapse: collapse;
  }
  .collapse-table th, .collapse-table td {
    border: 1px solid #000;
  }
</style>

<table class="collapse-table">
  <tr>
    <th>名前</th>
    <th>得点</th>
  </tr>
  <tr>
    <td>山田さん</td>
    <td>85</td>
  </tr>
</table>

ブラウザ表示

4. 線の種類を変えてデザイン性を高める

線には「実線（solid）」以外にもたくさんの種類があります。「dashed」は破線、「dotted」は点線を表します。特定の場所だけ線を強調したり、目立たせたくない場所を薄い点線にしたりすることで、表の情報の優先順位をユーザーに伝えることができます。デザインの引き出しを増やすために、ぜひ試してみてください。


<style>
  .dashed-table {
    border-collapse: collapse;
  }
  .dashed-table th {
    border-bottom: 2px solid #000;
  }
  .dashed-table td {
    border-bottom: 1px dashed #999;
  }
</style>

<table class="dashed-table">
  <tr>
    <th>月曜日</th>
    <th>予定</th>
  </tr>
  <tr>
    <td>会議</td>
    <td>10時</td>
  </tr>
</table>

ブラウザ表示

5. パディングと併せて余裕のある表を作る

罫線を引いただけでは、文字が線にくっついてしまい、窮屈に見えてしまいます。これを解決するのが「padding（パディング）」です。パディングは、文字と枠線の間に「余白」を作る命令です。この余白があるだけで、表の格好良さは格段に上がります。初心者の方が陥りやすい「見づらい表」を脱出する最大のコツが、この適度な余白です。


<style>
  .padded-table {
    border-collapse: collapse;
    width: 100%;
  }
  .padded-table th, .padded-table td {
    border: 1px solid #ccc;
    padding: 20px;
  }
</style>

<table class="padded-table">
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>ノート</td>
    <td>200円</td>
  </tr>
</table>

ブラウザ表示

6. カラーを活用して視認性をアップ

線に色をつけるとき、真っ黒（#000）を使うと強すぎて重たい印象になることがあります。少しグレーがかった色を使うと、優しくて見やすいデザインになります。表全体を黒一色で囲むのではなく、見出し部分だけ少し太くしたり、特定のデータ行だけ色を変えたりすることで、ユーザーの視線誘導をスムーズにできます。

Webデザインの現場では、情報の役割に応じて線を使い分けることが求められます。例えば、重要なデータには濃い線を、補足情報には薄い線を引くことで、表の持つ意味を視覚的に伝えることができます。小さな配慮ですが、これこそが使いやすいサイトへの近道です。

7. レスポンシブでスマホ対応テーブルを作る

罫線を引いてきれいな表を作っても、スマホで表示した際に横幅が崩れては意味がありません。スマホなど小さな画面では、表全体を横スクロールできるようにする設定が有効です。これは「レスポンシブ」という、画面の幅に応じて見栄えを変えるテクニックの一つです。

HTMLのテーブルタグを、スクロール可能な枠（divタグなど）で囲むだけで対応可能です。最近のWebサイトは、パソコンよりもスマホで見られることの方が多いので、ぜひこの対応もセットで覚えておきましょう。きれいな罫線と正しい構造で、どこで見ても使いやすい表を作ってください。

8. 構造と装飾の分離という考え方

HTMLは「データの構造」を示し、CSSは「見た目の装飾」を施す。この役割分担こそが、Web制作を学ぶ上で最も重要な考え方です。テーブルタグの中に直接「太さ」や「色」を書き込むのではなく、外部のCSSファイルやstyleタグで管理することで、後から修正がしやすくなります。

プロのエンジニアは、この「変更に強い設計」を常に意識しています。最初はタグを覚えるのに精一杯かもしれませんが、一つひとつの命令にはちゃんと理由があります。ブラウザで画面を見ながら、自分のCSSで罫線の表情が変わるのを確かめてみてください。その瞬間の楽しさが、あなたのWeb制作者としてのキャリアを大きく後押ししてくれるはずです。

2026年最新スキルアップ・実践セミナー