【6日でできるHTML入門】表の作成

　HTMLでは、データを整理して見やすく提示するために「表」を作成する機能が用意されています。
ここでは、HTMLの表作成に欠かせないタグと属性──<table>、<tr>、<td>、<th>、<caption>、そして表内への画像配置方法について、サンプルコードとともに詳しく解説します。

１．表作成の基本

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

creating-table ダウンロード

coffee.png	tea.png	sunny.png	rainy.png

1.1. `<table>` の使い方

　<table>〜</table> は「表全体」を囲むタグです。これだけでは中身は表示されませんが、以下のように行・セルを内包します。

<!-- sample-table.html -->
<table>
  <!-- 行やキャプションはここに -->
</table>

例： 2列1行の表が生成される

<table>
  <tr><td>セルA1</td><td>セルA2</td></tr>
</table>

1.2. `<tr>` の使い方

　<tr>〜</tr> は「表の行（row）」を定義するタグです。行の中に複数の <td>（セル）や <th>（見出しセル）を並べることで、その行の列数が決まります。

例：3列の行がひとつだけある表を作成

<table>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>
  </tr>
</table>

1.3. `<td>` の使い方

　<td>〜</td> は「データセル」を定義し、文字や画像など任意の要素を内包できます。列が増えるごとにセルも増やします。

例：国名・首都・人口を列に並べた1行の表

<table>
  <tr>
    <td>日本</td>
    <td>東京</td>
    <td>8,000万人</td>
  </tr>
</table>

1.4. シンプルな表

まずはシンプルな表の作り方です。以下の例では「商品リスト」を示す表を作成しています。

ファイル名： lesson21-1.html

<!-- lesson21-1.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📋 商品リスト</title>
  <style>
    /* 枠線なしのデフォルト表示 */
    table { border-collapse: collapse; }
    td { padding: 4px; }
  </style>
</head>
<body>
  <h1>今週の新商品</h1>
  <table>
    <tr>
      <td>商品名</td><td>価格</td><td>在庫</td>
    </tr>
    <tr>
      <td>コーヒー豆</td><td>¥800</td><td>残り10</td>
    </tr>
    <tr>
      <td>紅茶リーフ</td><td>¥600</td><td>残り25</td>
    </tr>
    <tr>
      <td>抹茶パウダー</td><td>¥1,200</td><td>残り5</td>
    </tr>
  </table>
</body>
</html>

<table>…</table>：表全体を囲む
<tr>…</tr>：行を定義
<td>…</td>：データセル（列）を定義

ブラウザの出力例

デフォルトでは枠線がなく、セル間もくっついて表示されます。

1.5. 枠線を表示する

セルに枠線を付けるには、CSSでborderとborder-collapseを指定します。

ファイル名： lesson21-2.html

<!-- lesson21-2.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📋 商品リスト（枠線あり）</title>
  <style>
    table {
      border-collapse: collapse; /* セル間の余白をなくす */
    }
    td {
      border: solid 1px #666666; /* 枠線を指定 */
      padding: 6px;
    }
  </style>
</head>
<body>
  <h1>今週の新商品</h1>
  <table>
    <tr><td>商品名</td><td>価格</td><td>在庫</td></tr>
    <tr><td>コーヒー豆</td><td>¥800</td><td>残り10</td></tr>
    <tr><td>紅茶リーフ</td><td>¥600</td><td>残り25</td></tr>
    <tr><td>抹茶パウダー</td><td>¥1,200</td><td>残り5</td></tr>
  </table>
</body>
</html>

ブラウザの出力例

border-collapse: collapse;：セル同士の境界線を重ねて表示
border: solid 1px #666666;：実線・1px・#666666の枠線

２．見出しセル `<th>`

2.1. `<th>` の使い方

<th>〜</th> は「見出しセル」を定義するタグで、デフォルトで太字・中央揃えになります。行の先頭や列の見出しに用います。

例：上行を見出しにした表

<table>
  <tr>
    <th>国名</th>
    <th>首都</th>
    <th>人口</th>
  </tr>
  <tr>
    <td>日本</td><td>東京</td><td>8,000万人</td>
  </tr>
</table>

2.2. 見出しのサンプル

　見出し行や列用のセルを作るには<th>を使います。<th>は太字・中央揃えで表示されるのが特徴です。

ファイル名： lesson21-3.html

<!-- lesson21-3.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📊 商品リスト（見出し付き）</title>
  <style>
    table { border-collapse: collapse; }
    th, td {
      border: solid 1px #444444;
      padding: 6px;
    }
  </style>
</head>
<body>
  <h1>📊今週の新商品</h1>
  <table>
    <tr>
      <th>商品名</th><th>価格</th><th>在庫</th>
    </tr>
    <tr>
      <td>コーヒー豆</td><td>¥800</td><td>残り10</td>
    </tr>
    <tr>
      <td>紅茶リーフ</td><td>¥600</td><td>残り25</td>
    </tr>
    <tr>
      <td>抹茶パウダー</td><td>¥1,200</td><td>残り5</td>
    </tr>
  </table>
</body>
</html>

ブラウザの出力例

2.3. `<th>` のデフォルトスタイル

太字 (font-weight: bold)
中央揃え (text-align: center)

３．表内に画像を配置

3.1. `<img>` をセル内に記述

セルの中に画像を置くには、<td>または<th>の中に<img>を書きます。

ファイル名： lesson21-4.html

<!-- lesson21-4.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;
      text-align: center;
    }
    img { width: 50px; height: auto; }
  </style>
</head>
<body>
  <h1>今週のおすすめ</h1>
  <table>
    <tr>
      <th>商品</th><th>イメージ</th><th>価格</th>
    </tr>
    <tr>
      <td>コーヒー豆</td>
      <td><img src="coffee.png" alt="コーヒー豆"></td>
      <td>¥800</td>
    </tr>
    <tr>
      <td>紅茶リーフ</td>
      <td><img src="tea.png" alt="紅茶リーフ"></td>
      <td>¥600</td>
    </tr>
  </table>
</body>
</html>

ブラウザの出力例

４．キャプションの配置 `<caption>`

4.1. `<caption>` の使い方

　<caption>〜</caption> は表のタイトル（キャプション）を付けるタグで、<table> の直後に書きます。

<table>
  <caption>世界の人口ランキング</caption>
  <tr>…</tr>
</table>

例：表のタイトルをつけるには、<table>直後に<caption>を記述します。

ファイル名： lesson21-5.html

<!-- lesson21-5.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📅 会議スケジュール</title>
  <style>
    table { border-collapse: collapse; margin: 0 auto; }
    caption { font-size: 1.2em; margin-bottom: 8px; }
    th, td { border: solid 1px #333; padding: 6px; }
  </style>
</head>
<body>
  <table>
    <caption>今週の会議予定</caption>
    <tr><th>日付</th><th>時間</th><th>内容</th></tr>
    <tr><td>4/1</td><td>10:00</td><td>プロジェクトA打ち合わせ</td></tr>
    <tr><td>4/3</td><td>14:00</td><td>デザインレビュー</td></tr>
  </table>
</body>
</html>

ブラウザの出力例

５．少し複雑な表：月間天気予報カレンダー

　2025年5月の月間天気予報カレンダーのサンプル HTML です。土曜日セルは青系、日曜日セルは赤系に色付けし、日付・アイコンが読みやすいように調整しています。天気予報はでたらめですが、ここまでで紹介したテーブル作成のタグとCSSを駆使しています。

ファイル名： lesson21-6.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📅 2025年5月の天気カレンダー</title>
  <style>
    /* カレンダー全体 */
    table.calendar {
      border-collapse: collapse;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      font-family: sans-serif;
    }
    /* キャプション（タイトル） */
    table.calendar caption {
      font-size: 1.4em;
      margin-bottom: 0.5em;
    }
    /* 見出しセル */
    table.calendar th {
      background-color: #f0f0f0;
      padding: 8px;
      border: 1px solid #ccc;
    }
    /* 通常セル */
    table.calendar td {
      border: 1px solid #ccc;
      padding: 6px;
      vertical-align: top;
      height: 80px;
    }
    /* 日曜日セル */
    table.calendar td.sun {
      background-color: #ffe5e5;
    }
    /* 土曜日セル */
    table.calendar td.sat {
      background-color: #e5f0ff;
    }
    /* 日付部分 */
    .date {
      font-weight: bold;
      margin-bottom: 4px;
    }
    /* アイコン */
    .weather-icon {
      display: block;
      margin: 0 auto;
      width: 32px;
      height: 32px;
    }
    /* 下部の凡例 */
    table.legend {
      border-collapse: collapse;
      margin: 1em auto;
      font-size: 0.9em;
    }
    table.legend th,
    table.legend td {
      border: 1px solid #ccc;
      padding: 4px 8px;
      text-align: center;
    }
    table.legend caption {
      caption-side: top;
      font-weight: bold;
      margin-bottom: 0.3em;
    }
  </style>
</head>
<body>

  <!-- カレンダー -->
  <table class="calendar">
    <caption>📅 2025年5月の天気予報</caption>
    <tr>
      <th>日</th><th>月</th><th>火</th><th>水</th>
      <th>木</th><th>金</th><th>土</th>
    </tr>
    <tr>
      <td class="sun"></td>
      <td></td>
      <td></td>
      <td></td>
      <td><div class="date">1</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">2</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td class="sat"><div class="date">3</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
    </tr>
    <tr>
      <td class="sun"><div class="date">4</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">5</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">6</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">7</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">8</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">9</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td class="sat"><div class="date">10</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
    </tr>
    <tr>
      <td class="sun"><div class="date">11</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">12</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">13</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">14</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">15</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">16</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td class="sat"><div class="date">17</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
    </tr>
    <tr>
      <td class="sun"><div class="date">18</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">19</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">20</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">21</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">22</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">23</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td class="sat"><div class="date">24</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
    </tr>
    <tr>
      <td class="sun"><div class="date">25</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">26</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">27</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">28</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">29</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">30</div><img src="rainy.png" alt="雨" class="weather-icon"></td>
      <td class="sat"><div class="date">31</div><img src="sunny.png" alt="晴れ" class="weather-icon"></td>
    </tr>
  </table>

  <!-- 凡例 -->
  <table class="legend">
    <caption>天気アイコン一覧</caption>
    <tr><th>天気</th><th>アイコン</th></tr>
    <tr>
      <td>晴れ</td>
      <td><img src="sunny.png" alt="晴れアイコン" width="32"></td>
    </tr>
    <tr>
      <td>雨</td>
      <td><img src="rainy.png" alt="雨アイコン" width="32"></td>
    </tr>
  </table>

</body>
</html>

ブラウザの出力例

ポイント解説

<img> を <td> の中に記述
alt 属性で代替テキストを指定
width･height でサイズ調整

まとめ

ここで扱った表作成の要点を整理すると次のとおりです。

タグ	説明
`<table>`	表全体を囲む
`<caption>`	表のタイトル（キャプション）を定義
`<tr>`	行を定義
`<td>`	データセル（通常のセル）を定義
`<th>`	見出しセル（太字・中央揃え）を定義
`<img>`	セル内に画像を配置

　これらを組み合わせることで、シンプルな枠線だけの表から、見出し付き・画像入り・キャプション付きまで多彩な表現が可能になります。HTMLとCSSを併用し、見やすく美しい表を作成しましょう。

【6日でできるHTML入門】表の作成