【6日でできるHTML入門】表に使うCSS

　表組みの見た目を自在にカスタマイズするには、CSSでセルの大きさ・余白・背景色を整えたり、キャプションの位置を変えたり、隣り合うセルの境界線や間隔を制御したりする必要があります。
　ここでは、実際に使えるサンプルHTMLを動かしながら、表に使う代表的なCSSプロパティを順に解説していきます。

１．セルの書式指定

テーブルを見やすくするには、まず th/td セルの基本スタイルを整えましょう。

1.1. 共通セルの整形（`th, td`）

以下の例では、全ての th と td に対して枠線・サイズ・余白・文字揃えを一括指定しています。

ファイル名： lesson22-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📊 セル共通スタイル</title>
  <style>
    table {
      border-collapse: collapse; /* 後述 */
    }
    th, td {
      border: solid 1px #444;    /* 枠線 */
      width: 120px;               /* 横幅 */
      height: 40px;               /* 高さ */
      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>¥350</td><td>〇</td>
    </tr>
    <tr>
      <td>紅茶</td><td>¥300</td><td>△</td>
    </tr>
  </table>
</body>
</html>

プロパティ	説明
border	枠線（実線 1px 色#444）
width	セルの横幅
height	セルの高さ
padding	セル内マージン
text-align	水平方向の文字揃え
vertical-align	垂直方向の文字揃え

ブラウザの出力例

1.2. 個別セルの背景色・揃え

特定の列やセルだけ異なるスタイルにしたい場合は、クラスやタグセレクタで個別指定します。

ファイル名： lesson22-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎨 個別セルスタイル</title>
  <style>
    table { border-collapse: collapse; }
    th, td {
      border: solid 1px #444;
      padding: 6px 10px;
    }
    /* 見出しセルの背景色 */
    th { background-color: #ffebcc; }
    /* 在庫セルの右揃え・淡色背景 */
    td.stock {
      text-align: right;
      background-color: #eef;
    }
  </style>
</head>
<body>
  <h1>🎨 個別セルの書式指定</h1>
  <table>
    <tr>
      <th>商品</th><th>価格</th><th>在庫</th>
    </tr>
    <tr>
      <td>コーヒー</td><td>¥350</td><td class="stock">〇</td>
    </tr>
    <tr>
      <td>紅茶</td><td>¥300</td><td class="stock">△</td>
    </tr>
  </table>
</body>
</html>

ブラウザの出力例

２．キャプションの書式指定（`caption-side`）

表の冒頭や末尾に説明文（キャプション）を付けるには <caption> を使います。

2.1. 基本的なキャプション

ファイル名： lesson22-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🏷️ 基本キャプション</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #444; width: 120px; padding: 6px 8px; }
  </style>
</head>
<body>
  <h1>🏷️ 基本キャプション</h1>
  <table>
    <caption>☕ ドリンクメニュー</caption>
    <tr><th>名前</th><th>価格</th></tr>
    <tr><td>コーヒー</td><td>¥350</td></tr>
    <tr><td>紅茶</td><td>¥300</td></tr>
  </table>
</body>
</html>

ブラウザの出力例

2.2. 下部に配置するキャプション

ファイル名： lesson22-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>👇 下部キャプション</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #444; padding: 6px 8px; }
    caption {
      caption-side: bottom;   /* top / bottom */
      text-align: right;      /* 配置 */
      font-size: 0.9em;
      padding-top: 4px;
    }
  </style>
</head>
<body>
  <h1>👇 下部キャプション</h1>
  <table>
    <caption>（2025年4月 更新）</caption>
    <tr><th>名前</th><th>価格</th></tr>
    <tr><td>コーヒー</td><td>¥350</td></tr>
    <tr><td>紅茶</td><td>¥300</td></tr>
  </table>
</body>
</html>

ブラウザの出力例

３．セルとセルの間隔（`border-collapse`）

セル同士が分離するか共有するかを制御します。

3.1. `collapse`：枠線を共有

ファイル名： lesson22-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔗 border-collapse: collapse</title>
  <style>
    table {
      border-collapse: collapse; /* 隙間なくスッキリ */
    }
    th, td {
      border: 2px solid #336699;
      padding: 6px 10px;
    }
  </style>
</head>
<body>
  <h1>枠線共有（collapse）</h1>
  <table>
    <tr><th>A</th><th>B</th></tr>
    <tr><td>1</td><td>2</td></tr>
  </table>
</body>
</html>

値	説明
collapse	隣接セルで枠線を重ねて（共有して）表示
separate	セルごとに枠線を独立して表示（初期値）

ブラウザの出力例

3.2. `separate`：セル間に隙間を残す

ファイル名： lesson22-6.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔓 border-collapse: separate</title>
  <style>
    table {
      border-collapse: separate; /* 隙間を残す */
      border-spacing: 4px;       /* 後述 */
    }
    th, td {
      border: 2px solid #336699;
      padding: 6px 10px;
    }
  </style>
</head>
<body>
  <h1>🔓 枠線分離（separate）</h1>
  <table>
    <tr><th>A</th><th>B</th></tr>
    <tr><td>1</td><td>2</td></tr>
  </table>
</body>
</html>

ブラウザの出力例

４．セル間隔の微調整（`border-spacing`）

border-collapse: separate; のときのみ有効に、水平・垂直の隙間を指定できます。

4.1. `border-spacing` の使い方

ファイル名： lesson22-7.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>↔️ border-spacing</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 12px 6px; /* 横12px、縦6px */
    }
    th, td {
      border: 1px solid #444;
      padding: 6px 12px;
    }
  </style>
</head>
<body>
  <h1>↔️ セル間隔の指定</h1>
  <table>
    <tr><th>X</th><th>Y</th><th>Z</th></tr>
    <tr><td>10</td><td>20</td><td>30</td></tr>
  </table>
</body>
</html>

記述例	意味
border-spacing: N;	水平・垂直ともに N px
border-spacing: H V;	水平 H px、垂直 V px

ブラウザの出力例

まとめ

セルの書式
th, td に border/width/height/padding/text-align/vertical-align を指定して、可読性を高める
キャプション
<caption> + caption-side で上下・揃えを自在に配置
枠線の共有
border-collapse: collapse でセルの境界線をまとめてスッキリ表示
セル間隔
border-spacing で separate 時の余白を調整

　これらを使いこなせば、機能的かつ見た目の美しい表を簡単に作成できます。ぜひ実際に手を動かして試してみてください！

【6日でできるHTML入門】表に使うCSS