実行できるHTMLドキュメント: テーブルの枠線

Q: HTML の表に枠線を付けるにはどうすればいいですか？

テーブルとセルに CSS を指定します: table { border-collapse: collapse; } th, td { border: 1px solid #999; }。セルの枠線で格子が描かれ、border-collapse: collapse で隣り合う枠線が 1 本の線にまとまります。

Q: 表の枠線が二重になるのはなぜですか？

初期状態では各セルがセルの間に隙間を空けて自分の枠線を描く (border-collapse: separate) ので、隣り合うセルの線が 2 本見えます。 に border-collapse: collapse を指定すると 1 本にまとまります。

Q: テーブルを角丸にするには？

border-collapse: collapse のテーブルには border-radius が効きません。border-collapse: separate と border-spacing: 0 を使い、テーブルに角丸を指定し、角のセルにも合わせた角丸 (border-start-start-radius など) を付けて、セルの背景が角からはみ出さないようにします。

Q: テーブルの枠線を消すには？

テーブルには、何かが追加しない限り枠線はありません。 タグから border 属性を消すか、枠線を付けるスタイルシートを上書きするために table, th, td に border: none を指定します。

テーブルに枠線を付ける方法

テーブルには初期状態で枠線がありません。CSS で付けましょう。すべてのセルに border を付けると格子が描かれ、テーブルに border-collapse: collapse を指定すると、隣り合う 2 本の枠線が 1 本の線にまとまります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table border</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Size</th><th>Price</th></tr>
    <tr><td>Small</td><td>3.00</td></tr>
    <tr><td>Large</td><td>4.50</td></tr>
  </table>
</body>
</html>

border の一括指定には幅、スタイル、色を順不同で書きます: 1px solid #6b7280。table だけでなく th, td にも指定しましょう。テーブルの枠線は外枠しか描きません。

border-collapse: separate と collapse の違い

border-collapse は、セル同士が枠線を共有するかどうかを決めます。

値	結果
`separate` (初期値)	各セルが自分の枠線を持ち、セルの間に `border-spacing` で決まる隙間ができる
`collapse`	隣り合うセルが 1 本の枠線を共有する。`border-spacing` は無視される

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border: 2px solid #2563eb; }
    th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
    .separate { border-collapse: separate; border-spacing: 6px; }
    .collapse { border-collapse: collapse; }
  </style>
</head>
<body>
  <table class="separate">
    <caption>separate</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
  <table class="collapse">
    <caption>collapse</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
</body>
</html>

separate のテーブルでは 2 つの層が両方見えます。青いテーブルの外枠と、各セルを囲む別の琥珀色の枠で、その間に border-spacing の隙間があります。6px を 0 にするとセル同士がくっつきますが、線は二重のままです。線をまとめるのは collapse だけです。

collapse で 2 本の枠線が重なり、それぞれが違う場合は、太いほうが勝ちます。同じ太さならスタイルで決まり (double は solid に勝ち、solid は dashed や dotted に勝ちます)、それも同じならセルの枠線が行に、行の枠線がテーブルに勝ちます。collapse のテーブルの外周が青ではなく琥珀色なのはこのためです。そこではセルもテーブルも 2px solid の枠線を持っていて、セルが勝ちます。

横線だけ、または内側の線だけ

最近のテーブルの多くは、すべての線を描きません。よくあるパターンは 2 つです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border patterns</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { padding: 6px 12px; text-align: start; }

    /* 1. Row lines only */
    .rows th, .rows td { border-bottom: 1px solid #d1d5db; }
    .rows thead th { border-bottom: 2px solid #111827; }

    /* 2. Inner grid, no outer frame */
    .inner th, .inner td { border: 1px solid #d1d5db; }
    .inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
    .inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
    .inner th:first-child, .inner td:first-child { border-inline-start: 0; }
    .inner th:last-child, .inner td:last-child { border-inline-end: 0; }
  </style>
</head>
<body>
  <table class="rows">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
    <tbody>
      <tr><td>Ana</td><td>92</td></tr>
      <tr><td>Bob</td><td>87</td></tr>
    </tbody>
  </table>

  <table class="inner">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>
</body>
</html>

2 つ目のテーブルは、端のセルの外側の枠線を消しています。border-inline-start と border-inline-end は行の始まりと終わりを表すので、最初のセルが反対側に来る右から左に書く言語でも、同じ CSS が正しく動きます。

テーブルの角丸

border-collapse: collapse のテーブルでは border-radius は何もしません。角丸のテーブルは隙間なしの separate モデルを使い、セルに下と終わり側の枠線だけを付けることで、各線を 1 回だけ描きます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rounded table</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #9ca3af;
      border-radius: 10px;
      font-family: system-ui, sans-serif;
    }
    th, td {
      padding: 8px 14px;
      border-bottom: 1px solid #9ca3af;
      border-inline-end: 1px solid #9ca3af;
    }
    th { background: #e5e7eb; }
    tr:first-child > :first-child { border-start-start-radius: 9px; }
    tr:first-child > :last-child { border-start-end-radius: 9px; }
    tr > :last-child { border-inline-end: 0; }
    tr:last-child > * { border-bottom: 0; }
  </style>
</head>
<body>
  <table>
    <tr><th>Plan</th><th>Price</th></tr>
    <tr><td>Free</td><td>0</td></tr>
    <tr><td>Pro</td><td>12</td></tr>
  </table>
</body>
</html>

背景のグレーが曲線に沿うよう、ヘッダーの角の 2 つのセルにも角丸を付けています。これがないと、セルの四角い角が丸い枠線からはみ出します。角丸は 9px で、テーブルの 10px から 1px の枠線を引いた値なので、2 つの曲線が揃います。

部分ごとの枠線の色と太さ

枠線はテーブルの部分ごとに変えられます。thead、tfoot、個々の行にセレクターを書いて、ヘッダーの下や合計の上に太い線を引きます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border per part</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
    thead th { border-bottom: 3px solid #2563eb; }
    tfoot td { border-top: 3px double #111827; font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Month</th><th>Sales</th></tr></thead>
    <tbody>
      <tr><td>July</td><td>120</td></tr>
      <tr><td>August</td><td>135</td></tr>
    </tbody>
    <tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
  </table>
</body>
</html>

3px の線は、交わる場所で 1px のグレーの線に勝ちます。上で説明した collapse のルールどおりです。テーブルのほかの構造 (thead、tfoot、th) については HTML テーブルを参照してください。

border 属性

古いチュートリアルでは <table> タグに属性を使っています。

<table border="1" cellspacing="0" cellpadding="6">

ブラウザは今でも border="1" に従い、テーブルとすべてのセルに separate モデルで枠線を描くので、二重線の見た目になります。この 3 つの属性はどれも HTML5 で廃止されています。CSS では、セルの border、テーブルの border-spacing (または border-collapse: collapse)、セルの padding がそれぞれに相当します。

よくある間違い

table だけに枠線を付ける。 外枠だけで内側に線がない表になります。th, td に枠線を付けましょう。
border-collapse: collapse を忘れる。 線が二重に見えます。
border-collapse: collapse と border-radius を組み合わせる。 角丸は無視されます。
border-collapse: collapse と border-spacing を組み合わせる。 隙間は separate モデルでしか効きません。
separate モデルで <tr> に枠線を付ける。 テーブルが collapse でない限り、行は枠線を描きません。代わりにセルにスタイルを付けましょう。
新しいコードで border="1" を使う。 今でも動きますが、色を指定できず、廃止されています。

よくある質問

HTML の表に枠線を付けるにはどうすればいいですか？

テーブルとセルに CSS を指定します: table { border-collapse: collapse; } th, td { border: 1px solid #999; }。セルの枠線で格子が描かれ、border-collapse: collapse で隣り合う枠線が 1 本の線にまとまります。

表の枠線が二重になるのはなぜですか？

初期状態では各セルがセルの間に隙間を空けて自分の枠線を描く (border-collapse: separate) ので、隣り合うセルの線が 2 本見えます。<table> に border-collapse: collapse を指定すると 1 本にまとまります。

table の border 属性はまだ使えますか？

<table border="1"> はどのブラウザでも枠線を描きますが、HTML5 では廃止されており、色やスタイルを指定できません。代わりに CSS の border プロパティを使いましょう。

テーブルを角丸にするには？

border-collapse: collapse のテーブルには border-radius が効きません。border-collapse: separate と border-spacing: 0 を使い、テーブルに角丸を指定し、角のセルにも合わせた角丸 (border-start-start-radius など) を付けて、セルの背景が角からはみ出さないようにします。

テーブルの枠線を消すには？

テーブルには、何かが追加しない限り枠線はありません。<table> タグから border 属性を消すか、枠線を付けるスタイルシートを上書きするために table, th, td に border: none を指定します。