6日でできる 新HTML入門｜CSSで作る見やすい表

表はCSSでぐっと読みやすくなる。枠線、余白、配置、キャプションを整えて、情報が伝わる美しいテーブルを作ろう。

HTMLのtableタグを使うと、商品一覧、料金表、スケジュール、成績表、比較表など、行と列で整理したい情報を分かりやすく表示できます。ただし、HTMLだけで表を作った場合、見た目はとてもシンプルです。セルの境界が分かりにくかったり、文字が詰まって見えたり、表のタイトルが目立たなかったりすることがあります。

そこで大切になるのが、表に対するCSSの指定です。thやtdに枠線を付ける、paddingでセル内に余白を作る、text-alignやvertical-alignで文字の位置を整える、background-colorで見出しや特定のセルを目立たせるなど、CSSを使うことで表は一気に読みやすくなります。

また、captionタグを使った表のタイトルもCSSで整えられます。caption-sideを使えば、キャプションを表の上に置くか下に置くかを指定できます。さらに、border-collapseやborder-spacingを使うと、セル同士の境界線を重ねるか、セル間に隙間を作るかを調整できます。

表は、データをきれいに並べるための道具です。しかし、ただ並べるだけではなく、見出し、余白、枠線、配置を整えることで、見る人が内容を素早く理解しやすくなります。ここでは、CSSを使って表を見やすく整える方法を、サンプルHTMLと一緒に順番に確認していきます。

セルの基本スタイルを整える

表を見やすくする第一歩は、thとtdの見た目を整えることです。thは見出しセル、tdは通常のデータセルです。この2つに共通のCSSを指定すると、表全体の見た目をそろえられます。

セルには、枠線、横幅、高さ、内部余白、文字揃えなどを指定できます。特にborderとpaddingは、表の読みやすさに大きく関わります。

セルに指定する主なCSS

CSS役割
borderセルの枠線を指定する
widthセルの横幅を指定する
heightセルの高さを指定する
paddingセル内の余白を指定する
text-alignセル内の水平方向の文字位置を指定する
vertical-alignセル内の垂直方向の文字位置を指定する

borderを指定すると、セルの境界が分かりやすくなります。paddingを指定すると、文字と枠線の間にゆとりができて読みやすくなります。text-alignで中央揃えや右揃えにすると、数字や記号の並びも整えやすくなります。

図1：thとtdに共通スタイルを指定する

この図から分かること

thとtdに共通のCSSを指定すると、表全体の見た目をそろえられます。枠線でセルの境界を分かりやすくし、paddingで文字と枠線の間に余白を作ることで、表の読みやすさが高まります。text-alignとvertical-alignを使えば、セル内の文字位置も整えられます。

共通セルの書式を指定する

最初の例では、thとtdに同じスタイルを指定して、表全体のセルを整えます。商品名、価格、在庫を並べたシンプルな表を使って確認しましょう。

ファイル名： Lesson22-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>セル共通スタイル</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.7;
    }

    table {
      border-collapse: collapse;
    }

    th,
    td {
      border: solid 1px #444444;
      width: 130px;
      height: 42px;
      padding: 8px;
      text-align: center;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <h1>共通セルの書式指定</h1>

  <table>
    <tr>
      <th>商品</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
    <tr>
      <td>カフェラテ</td>
      <td>420円</td>
      <td>あり</td>
    </tr>
    <tr>
      <td>ハーブティー</td>
      <td>380円</td>
      <td>少なめ</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

このHTMLでは、thとtdをまとめて指定しています。th, tdのようにカンマで区切って書くと、複数のセレクターに同じCSSを適用できます。

border: solid 1px #444444;では、セルの周囲に1pxの実線を付けています。widthとheightでセルの大きさをそろえ、paddingで文字のまわりに余白を作っています。

text-align: center;は、セル内の文字を水平方向の中央にそろえる指定です。vertical-align: middle;は、セル内の文字を縦方向の中央にそろえる指定です。セルの高さを指定している場合、vertical-alignを使うと、文字が上に寄りすぎず、見た目が整います。

tableにはborder-collapse: collapse;を指定しています。これにより、隣り合うセルの枠線が重なって表示され、表全体がすっきり見えます。

特定のセルだけ見た目を変える

すべてのセルに同じCSSを指定するだけでなく、特定のセルだけ背景色や文字揃えを変えたい場合もあります。たとえば、見出しセルだけ背景色を付けたり、在庫数や金額だけ右揃えにしたりするような使い方です。

特定のセルだけを指定するには、class属性を使うと便利です。

<td class="stock">残り12</td>

CSSでは、次のように指定できます。

td.stock {
  text-align: right;
  background-color: #EEF3FF;
}

td.stockは、stockというclassが付いたtdタグだけを対象にする指定です。ページ内の他のtdには影響しないため、必要なセルだけを細かく調整できます。

個別指定でよく使う例

指定したい場所よく使うCSS
見出しセルbackground-color、font-weight、color
数字のセルtext-align: right;
注意が必要なセルbackground-color、color
特定の列classを付けて背景色や揃えを指定

表は、すべてのセルを同じ見た目にすると整って見えますが、重要な部分まで同じ見た目だと、情報の違いが伝わりにくくなることがあります。見出しや注目セルを少しだけ変えると、読み手が内容を追いやすくなります。

ファイル名： Lesson22-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>個別セルスタイル</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.7;
    }

    table {
      border-collapse: collapse;
    }

    th,
    td {
      border: solid 1px #444444;
      padding: 7px 12px;
    }

    th {
      background-color: #FFF0D6;
      color: #5D4037;
    }

    td.stock {
      text-align: right;
      background-color: #EEF3FF;
    }
  </style>
</head>
<body>
  <h1>個別セルの書式指定</h1>

  <table>
    <tr>
      <th>商品</th>
      <th>価格</th>
      <th>在庫数</th>
    </tr>
    <tr>
      <td>カフェラテ</td>
      <td>420円</td>
      <td class="stock">18</td>
    </tr>
    <tr>
      <td>ハーブティー</td>
      <td>380円</td>
      <td class="stock">7</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

この例では、thに背景色を指定し、見出し行を分かりやすくしています。表の見出しは、データ行と区別できるように少し色を付けると読みやすくなります。

また、在庫数のセルにはclass="stock"を付けています。CSSではtd.stockに対して、text-align: right;とbackground-colorを指定しています。数値は右揃えにすると桁の位置をそろえやすくなります。今回の例では在庫数が1桁と2桁ですが、右揃えにすると数字の比較がしやすくなります。

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

表が何を表しているのかを示したいときは、captionタグを使います。captionタグは、tableタグの直後に書く表のタイトルです。

<table>
  <caption>ドリンクメニュー</caption>
  <tr>
    <th>名前</th>
    <th>価格</th>
  </tr>
</table>

captionを付けると、表の内容がひと目で分かりやすくなります。特に、ページ内に複数の表がある場合は、captionを付けておくと、どの表が何の情報なのかを整理しやすくなります。

captionに指定しやすいCSS

CSS役割
caption-sideキャプションを表の上か下に配置する
text-alignキャプションの文字位置を指定する
font-sizeキャプションの文字サイズを指定する
font-weightキャプションの文字の太さを指定する
paddingキャプション周辺の余白を指定する

captionは、初期状態では表の上に表示されます。CSSでcaption-sideを指定すると、表の下に置くこともできます。

基本的なキャプションを付ける

次の例では、ドリンクメニューの表にcaptionを付けています。表の上にタイトルが表示されることで、表の内容が分かりやすくなります。

ファイル名： Lesson22-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>基本キャプション</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.7;
    }

    table {
      border-collapse: collapse;
      margin: 20px auto;
    }

    caption {
      font-weight: bold;
      font-size: 1.2em;
      margin-bottom: 8px;
    }

    th,
    td {
      border: solid 1px #444444;
      width: 130px;
      padding: 7px 10px;
      text-align: center;
    }

    th {
      background-color: #E8F5E9;
    }
  </style>
</head>
<body>
  <h1>基本キャプション</h1>

  <table>
    <caption>ドリンクメニュー</caption>
    <tr>
      <th>名前</th>
      <th>価格</th>
    </tr>
    <tr>
      <td>カフェラテ</td>
      <td>420円</td>
    </tr>
    <tr>
      <td>ハーブティー</td>
      <td>380円</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

このHTMLでは、tableタグの直後にcaptionタグを書いています。captionにはドリンクメニューという表のタイトルを入れています。

CSSでは、captionにfont-weight: bold;とfont-size: 1.2em;を指定して、表のタイトルとして目立つようにしています。margin-bottomを指定しているため、キャプションと表の間に少し余白ができます。

captionは、表の外側にある単なる見出しではなく、表のタイトルとして意味を持つタグです。表の内容を説明する短いタイトルを付けると、表全体が理解しやすくなります。

図2：caption-sideでキャプションの位置を変える

この図から分かること

captionタグは表のタイトルを表します。caption-sideを使うと、キャプションを表の上に置くか下に置くかを指定できます。さらにtext-alignを組み合わせると、左寄せ、中央寄せ、右寄せなどの配置も調整できます。

キャプションを表の下に配置する

captionは、初期状態では表の上に表示されます。更新日や補足説明のように、表の下に表示したい情報がある場合は、caption-side: bottom;を指定します。

ファイル名： Lesson22-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>下部キャプション</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.7;
    }

    table {
      border-collapse: collapse;
      margin: 20px auto;
    }

    th,
    td {
      border: solid 1px #444444;
      padding: 7px 12px;
      text-align: center;
    }

    th {
      background-color: #F3E5F5;
    }

    caption {
      caption-side: bottom;
      text-align: right;
      font-size: 0.9em;
      padding-top: 6px;
      color: #555555;
    }
  </style>
</head>
<body>
  <h1>下部キャプション</h1>

  <table>
    <caption>2026年7月 更新</caption>
    <tr>
      <th>名前</th>
      <th>価格</th>
    </tr>
    <tr>
      <td>カフェラテ</td>
      <td>420円</td>
    </tr>
    <tr>
      <td>ハーブティー</td>
      <td>380円</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

この例では、captionにcaption-side: bottom;を指定しています。これにより、キャプションが表の下に表示されます。

text-align: right;を指定しているため、キャプションの文字は右寄せになります。更新日や注記のような情報は、表の下に小さめに表示すると自然に見えます。

captionは、表の説明やタイトルとして使える便利なタグです。表の内容そのものを示すタイトルなら上部、更新日や補足情報なら下部に置くなど、内容に応じて配置を考えるとよいでしょう。

border-collapseでセルの境界線を整える

表の枠線を整えるうえで重要なのがborder-collapseです。border-collapseは、隣り合うセルの枠線を重ねるか、セルごとに分けて表示するかを指定するCSSです。

border-collapseの主な値

値説明
collapse隣り合うセルの枠線を重ねて表示する
separateセルごとに枠線を独立して表示する

collapseを使うと、セル同士の枠線が共有されるため、すっきりした表になります。料金表や一覧表のように、きっちりした表を作りたいときによく使います。

separateを使うと、セルとセルの間に隙間を作れます。カードのような雰囲気を持つ表や、セルごとの区切りを少し強調したい表に向いています。

collapseで枠線を共有する

次の例では、border-collapse: collapse;を使って、隣り合うセルの枠線を重ねて表示します。

ファイル名： Lesson22-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>border-collapseのcollapse</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.7;
    }

    table {
      border-collapse: collapse;
      margin: 20px;
    }

    th,
    td {
      border: solid 2px #336699;
      padding: 8px 14px;
      text-align: center;
    }

    th {
      background-color: #E3F2FD;
    }
  </style>
</head>
<body>
  <h1>枠線共有の表</h1>

  <table>
    <tr>
      <th>A列</th>
      <th>B列</th>
    </tr>
    <tr>
      <td>10</td>
      <td>20</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

このHTMLでは、tableにborder-collapse: collapse;を指定しています。thとtdには2pxの枠線を指定していますが、隣り合うセルの境界線は重なって表示されます。

collapseは、一般的な表でよく使われる指定です。セルの境界がすっきりまとまり、一覧表として読みやすくなります。表の基本スタイルとして、まずcollapseを覚えておくとよいでしょう。

separateでセル間に隙間を残す

border-collapse: separate;を使うと、セルの枠線がそれぞれ独立して表示されます。さらにborder-spacingを指定すると、セルとセルの間隔を調整できます。

ファイル名： Lesson22-6.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>border-collapseのseparate</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.7;
    }

    table {
      border-collapse: separate;
      border-spacing: 5px;
      margin: 20px;
    }

    th,
    td {
      border: solid 2px #336699;
      padding: 8px 14px;
      text-align: center;
      background-color: #FFFFFF;
    }

    th {
      background-color: #E8F5E9;
    }
  </style>
</head>
<body>
  <h1>枠線分離の表</h1>

  <table>
    <tr>
      <th>A列</th>
      <th>B列</th>
    </tr>
    <tr>
      <td>10</td>
      <td>20</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

この例では、tableにborder-collapse: separate;を指定しています。さらにborder-spacing: 5px;によって、セル同士の間に5pxの隙間を作っています。

separateは、セルが少し離れて表示されるため、collapseとは違う見た目になります。データをきっちり並べたい場合はcollapse、セルごとのまとまりを少し強調したい場合はseparateと考えると分かりやすいです。

border-spacingでセル間隔を調整する

border-spacingは、セルとセルの間隔を指定するCSSです。ただし、border-spacingが有効になるのは、border-collapse: separate;が指定されている場合です。

border-spacingの指定方法

指定意味
border-spacing: 10px;横方向と縦方向の間隔をどちらも10pxにする
border-spacing: 12px 6px;横方向を12px、縦方向を6pxにする

1つの値を指定すると、横方向と縦方向の両方に同じ間隔が付きます。2つの値を指定すると、1つ目が横方向、2つ目が縦方向の間隔になります。

図3：border-collapseとborder-spacingの違い

この図から分かること

border-collapse: collapse;を指定すると、隣り合うセルの枠線が共有され、すっきりした表になります。border-collapse: separate;を指定すると、セルごとの枠線が独立します。その状態でborder-spacingを使うと、横方向と縦方向のセル間隔を細かく調整できます。

border-spacingで横と縦の隙間を変える

最後の例では、border-spacingに2つの値を指定して、横方向と縦方向で異なるセル間隔を作ります。

ファイル名： Lesson22-7.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>border-spacingの指定</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.7;
    }

    table {
      border-collapse: separate;
      border-spacing: 12px 6px;
      margin: 20px;
    }

    th,
    td {
      border: solid 1px #444444;
      padding: 8px 16px;
      text-align: center;
      background-color: #FFFFFF;
    }

    th {
      background-color: #FFF8E1;
    }
  </style>
</head>
<body>
  <h1>セル間隔の指定</h1>

  <table>
    <tr>
      <th>X</th>
      <th>Y</th>
      <th>Z</th>
    </tr>
    <tr>
      <td>15</td>
      <td>25</td>
      <td>35</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

このHTMLでは、tableにborder-collapse: separate;を指定しています。そのうえで、border-spacing: 12px 6px;を指定しています。

この指定では、横方向のセル間隔が12px、縦方向のセル間隔が6pxになります。横の隙間を広めに、縦の隙間を少し控えめにすることで、横に並ぶセル同士の区切りが分かりやすくなります。

border-spacingは、collapseではなくseparateのときに使う点が大切です。border-collapse: collapse;が指定されている表では、セル間隔は基本的に詰めて表示されるため、border-spacingの効果は出ません。

表のCSSを使い分ける考え方

表を見やすく整えるには、まずセルの基本スタイルをそろえます。thとtdにborder、padding、text-align、vertical-alignを指定すると、表全体の見た目が安定します。

そのうえで、見出しセルだけ背景色を変えたり、数値のセルだけ右揃えにしたりすると、情報の意味が伝わりやすくなります。すべてのセルを同じ見た目にするより、役割ごとに少し変化を付けるほうが読みやすい表になります。

captionは、表が何を表しているのかを伝える大切な要素です。表のタイトルとして使う場合は上部に配置し、更新日や注記のような補足情報として使う場合はcaption-side: bottom;で下部に配置すると自然です。

border-collapseは、表全体の印象を決める重要なCSSです。collapseを使うと、きっちりした一覧表になります。separateを使うと、セル同士に隙間を持たせた、少しゆとりのある表になります。separateを使う場合は、border-spacingでセル間隔を調整できます。

表に使う主なCSSの整理

ここで扱った表のCSSを整理しておきます。

CSS用途
borderセルの枠線を指定する
widthセルや表の横幅を指定する
heightセルの高さを指定する
paddingセル内の余白を指定する
text-alignセル内の文字や画像を横方向に揃える
vertical-alignセル内の内容を縦方向に揃える
background-color見出しや特定セルの背景色を指定する
caption-sidecaptionを表の上または下に配置する
border-collapseセルの枠線を共有するか分離するかを指定する
border-spacingseparate時のセル間隔を指定する

表は、データを分かりやすく伝えるための要素です。CSSを使って見た目を整えるときも、装飾を増やすことより、読みやすさを高めることを意識するとよいでしょう。

使用タグ一覧と解説

この学習で登場した主なHTMLタグを整理します。

タグ用途
htmlHTML文書全体を表す
head文字コードやタイトルなどの情報を書く
meta文字コードを指定する
titleブラウザのタブに表示されるタイトルを指定する
styleHTML内にCSSを書く
bodyブラウザに表示される内容を書く
h1ページの大きな見出しを表す
table表全体を作る
caption表のタイトルや説明を付ける
tr表の行を作る
th見出しセルを作る
td通常のデータセルを作る

tableは表全体を作るタグです。trで行を作り、その中にthやtdを入れてセルを作ります。thは見出しセル、tdは通常のデータセルです。captionは表のタイトルや補足説明を付けるために使います。

CSSでは、thとtdをまとめて指定することで、セル全体の見た目をそろえられます。さらに、thだけ、td.stockだけ、table captionだけのように対象を絞ることで、見出し、特定セル、キャプションを個別に整えることができます。

表を作るときは、HTMLで正しく構造を作り、CSSで読みやすく整えることが大切です。セルの枠線、余白、文字揃え、背景色、キャプション位置、セル間隔を調整できるようになると、シンプルな表から実用的な一覧表まで作れるようになります。