MENU
Webコーディング（HTML/CSS/JavaScript）やEC-CUBEカスタマイズ、Webアプリなど
  1. ホーム
  2. プログラミング
  3. HTML/CSS/JavaScript
  4. テーブルの作り方 実装解説｜HTML CSS Table Guide

テーブルの作り方 実装解説｜HTML CSS Table Guide

HTML/CSS/JavaScript

テーブル デザイン見本

HTML の <table> 要素と CSS を組み合わせた表スタイルの実装デモ。ボタンで見た目の違いをリアルタイムで確認しながら、コピーしてすぐに使えるコードを掲載しています。

① border-collapse — セルのボーダーを結合・分離する

月売上経費利益
4月50,00040,00010,000
5月80,00065,00015,000
6月40,00032,0008,000
7月60,00045,00015,000

現在: border-collapse: collapse

HTML
<table>
  <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
      <th>経費</th>
      <th>利益</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>4月</td><td>50,000</td><td>40,000</td><td>10,000</td></tr>
    <tr><td>5月</td><td>80,000</td><td>65,000</td><td>15,000</td></tr>
    <tr><td>6月</td><td>40,000</td><td>32,000</td><td>8,000</td></tr>
    <tr><td>7月</td><td>60,000</td><td>45,000</td><td>15,000</td></tr>
  </tbody>
</table>
CSS
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #64748b;
  padding: 8px 14px;
  text-align: center;
}
border-collapse: collapse

デフォルト値は separate（各セルのボーダーが独立して描画されるため二重線になる）。collapse を指定すると隣り合うセルのボーダーが1本に統合され、すっきりした表になります。実務ではほぼすべてのケースで collapse を使うのが一般的です。

② ヘッダースタイル — 罫線 / 太い区切り / カラーヘッダー

月売上経費利益
4月50,00040,00010,000
5月80,00065,00015,000
6月40,00032,0008,000
7月60,00045,00015,000

現在: 罫線のみ

HTML
<table>
  <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
      <th>経費</th>
      <th>利益</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>4月</td><td>50,000</td><td>40,000</td><td>10,000</td></tr>
    <tr><td>5月</td><td>80,000</td><td>65,000</td><td>15,000</td></tr>
    <tr><td>6月</td><td>40,000</td><td>32,000</td><td>8,000</td></tr>
    <tr><td>7月</td><td>60,000</td><td>45,000</td><td>15,000</td></tr>
  </tbody>
</table>
CSS
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #475569;
  padding: 8px 14px;
  text-align: center;
}
<thead> でヘッダー行を区別する

<thead> と <tbody> を使い分けると、CSS でヘッダー行だけにスタイルを当てやすくなります。「太い区切り線」は thead に border-bottom を指定するだけでヘッダーと本文の境界を強調でき、スタイリッシュな表が簡単に作れます。

③ ストライプ — :nth-child で交互に背景色を付ける

月売上経費利益
4月50,00040,00010,000
5月80,00065,00015,000
6月40,00032,0008,000
7月60,00045,00015,000

現在: 奇数行 (odd) に背景色

HTML
<table>
  <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
      <th>経費</th>
      <th>利益</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>4月</td><td>50,000</td><td>40,000</td><td>10,000</td></tr>
    <tr><td>5月</td><td>80,000</td><td>65,000</td><td>15,000</td></tr>
    <tr><td>6月</td><td>40,000</td><td>32,000</td><td>8,000</td></tr>
    <tr><td>7月</td><td>60,000</td><td>45,000</td><td>15,000</td></tr>
  </tbody>
</table>
CSS
table {
  border-collapse: collapse;
  width: 100%;
}

thead th {
  background-color: #1e293b;
  color: #fff;
  padding: 8px 14px;
  text-align: center;
}

tbody td {
  padding: 8px 14px;
  text-align: center;
}

tbody tr:nth-child(odd) {
  background-color: #dbeafe;
}
:nth-child(odd) / :nth-child(even)

tbody の tr に :nth-child(odd) を指定すると奇数行（1・3・5…行目）に、even を指定すると偶数行に背景色が付きます。行数が多い表では縞模様にするだけで視認性が大幅に上がります。thead の th には別途スタイルを設定することでヘッダー行と本文を明確に区別できます。

④ ヘッダーなしテーブル — <tbody> のみで構成する

4月50,00040,00010,000
5月80,00065,00015,000
6月40,00032,0008,000
7月60,00045,00015,000

現在: 罫線スタイル

HTML
<table>
  <tbody>
    <tr><td>4月</td><td>50,000</td><td>40,000</td><td>10,000</td></tr>
    <tr><td>5月</td><td>80,000</td><td>65,000</td><td>15,000</td></tr>
    <tr><td>6月</td><td>40,000</td><td>32,000</td><td>8,000</td></tr>
    <tr><td>7月</td><td>60,000</td><td>45,000</td><td>15,000</td></tr>
  </tbody>
</table>
CSS
table {
  border-collapse: collapse;
}

td {
  border: 1px solid #475569;
  padding: 8px 14px;
  text-align: center;
}
<thead> を省略する場合

<thead> を省いて <tbody> だけにすると、すべての行が同じスタイルになるシンプルなヘッダーなし表を作れます。CSS のスタイルは th ではなく td のみに指定します。名簿・住所録など、全行が同じ種類のデータを並べる場合に向いています。

⑤ レスポンシブ対応 — overflow-x: auto でスマホに対応

月売上（円）経費（円）利益（円）前月比備考
4月50,00040,00010,000—開始月
5月80,00065,00015,000+50%好調
6月40,00032,0008,000-47%低調
7月60,00045,00015,000+88%回復

現在: overflow-x: auto（横スクロール可能）

HTML
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>月</th>
        <th>売上（円）</th>
        <th>経費（円）</th>
        <th>利益（円）</th>
        <th>前月比</th>
        <th>備考</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>4月</td><td>50,000</td><td>40,000</td><td>10,000</td><td>—</td><td>開始月</td></tr>
      <tr><td>5月</td><td>80,000</td><td>65,000</td><td>15,000</td><td>+50%</td><td>好調</td></tr>
      <tr><td>6月</td><td>40,000</td><td>32,000</td><td>8,000</td><td>-47%</td><td>低調</td></tr>
      <tr><td>7月</td><td>60,000</td><td>45,000</td><td>15,000</td><td>+88%</td><td>回復</td></tr>
    </tbody>
  </table>
</div>
CSS
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  white-space: nowrap;
}

th {
  background-color: #2563eb;
  color: #fff;
  padding: 8px 14px;
  text-align: center;
}

td {
  border: 1px solid #cbd5e1;
  padding: 8px 14px;
  text-align: center;
}
overflow-x: auto でスマホ対応

列数が多い表はスマホ幅で崩れがちです。table を div でラップし、div に overflow-x: auto を指定すると、表が狭い画面でも横スクロールで閲覧できます。table 自体に white-space: nowrap を追加するとセル内でのテキスト折り返しを防ぎ、レイアウトが崩れにくくなります。

RELATED

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS） Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開してい…
HTML/CSS/JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次