6日でできる 新HTML入門｜tableタグで表を作る

行とセルを組み合わせれば、情報はもっと見やすくなる。tableタグを使って、データを分かりやすく整理した表を作ろう。

Webページでは、文章だけでなく、情報を表として整理したい場面がよくあります。たとえば、商品名と価格を並べたり、スケジュールを日付ごとに整理したり、天気予報をカレンダー形式で表示したりする場合です。このような情報は、文章で長く説明するよりも、表にしたほうが一目で分かりやすくなります。

HTMLで表を作るときは、tableタグを中心に使います。tableタグは表全体を囲むタグです。その中に、行を表すtrタグ、通常のセルを表すtdタグ、見出しセルを表すthタグを組み合わせて、表の形を作っていきます。さらに、表にタイトルを付けたい場合はcaptionタグを使います。

表は、ただデータを並べるだけではなく、CSSと組み合わせることで見やすく整えることができます。枠線を付ける、セルの余白を調整する、見出し行に背景色を付ける、画像をセルの中に入れるなど、さまざまな工夫ができます。

ここでは、tableタグを使った表の基本から、枠線付きの表、見出しセル、画像入りの表、キャプション付きの表、そして少し複雑なカレンダー形式の表まで、順番に学習していきます。

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

create-table-tagダウンロード
coffee-beans.pngearl-grey-tea.pngsun-icon.pngrain-icon.png

tableタグは表全体を囲む

HTMLで表を作るとき、まず必要になるのがtableタグです。tableタグは、表全体を囲むためのタグです。ただし、tableタグだけを書いても、行やセルがないため、表として見える内容は表示されません。

表の中には、行を作るtrタグと、セルを作るtdタグやthタグを入れます。

<table>
  <tr>
    <td>セルA</td>
    <td>セルB</td>
  </tr>
</table>

この例では、tableタグの中にtrタグがあり、その中にtdタグが2つあります。つまり、1行2列の表になります。

表を作る基本タグ

タグ役割
table表全体を囲む
tr表の行を作る
td通常のデータセルを作る
th見出しセルを作る
caption表のタイトルを付ける

表は、行とセルの組み合わせで作ります。横にセルを増やしたい場合は、同じtrタグの中にtdタグを追加します。縦に行を増やしたい場合は、trタグを追加します。

図1：table、tr、tdで表の基本構造を作る

この図から分かること

HTMLの表は、table、tr、tdを組み合わせて作ります。tableは表全体、trは行、tdはセルを表します。1つのtrの中に複数のtdを入れると横方向にセルが並び、trを増やすと行が増えていきます。

trタグは表の行を作る

trタグは、表の1行を作るタグです。trはtable rowの略で、表の横一列を表します。

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

この例では、1つのtrタグの中にtdタグが3つあります。そのため、3列の行になります。

表では、基本的にtrタグを行の数だけ用意します。たとえば、見出し行を1行、データ行を3行作りたい場合は、合計4つのtrタグを使います。

tdタグは通常のセルを作る

tdタグは、表の中にデータを入れるためのセルを作るタグです。文字だけでなく、画像、リンク、リストなども入れられます。

<td>日本</td>
<td>東京</td>
<td>約1億2千万人</td>

このようにtdタグを横に並べることで、国名、首都、人口のような情報を列ごとに整理できます。

tdタグは通常のデータセルです。表の見出しとして使いたい場合は、tdではなくthタグを使うと、意味としても見た目としても分かりやすくなります。

シンプルな商品リストを作る

まずは、table、tr、tdだけを使って、シンプルな商品リストを作ってみましょう。この段階では、見出しセルや画像は使わず、基本の表構造を確認します。

ファイル名： Lesson21-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;
    }

    td {
      padding: 5px;
    }
  </style>
</head>
<body>
  <h1>今月のおすすめ商品</h1>

  <table>
    <tr>
      <td>商品名</td>
      <td>価格</td>
      <td>在庫</td>
    </tr>
    <tr>
      <td>ブレンドコーヒー</td>
      <td>850円</td>
      <td>残り12個</td>
    </tr>
    <tr>
      <td>アールグレイ紅茶</td>
      <td>650円</td>
      <td>残り20個</td>
    </tr>
    <tr>
      <td>ほうじ茶ラテ粉末</td>
      <td>980円</td>
      <td>残り8個</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

このHTMLでは、tableタグの中に4つのtrタグがあります。最初の行は、商品名、価格、在庫という項目名を並べています。続く3行には、それぞれの商品データを入れています。

この時点では、すべてtdタグで作っているため、見出し行も通常のセルとして扱われます。表としての形はできていますが、枠線がないため、セルの境界は少し分かりにくくなります。

tableにborder-collapse: collapse;を指定しているのは、後で枠線を付けたときにセル同士の境界線をすっきり表示するためです。tdのpaddingは、セルの中の文字とセルの端の間に余白を作る指定です。余白があると、表の中の文字が読みやすくなります。

CSSで表に枠線を付ける

HTMLのtableタグだけでは、表の枠線は自動的には目立って表示されません。セルの境界をはっきり見せたい場合は、CSSでborderを指定します。

表に枠線を付けるときによく使うのが、borderとborder-collapseです。

表の枠線でよく使うCSS

CSS役割
borderセルや表に枠線を付ける
border-collapse隣り合うセルの枠線を重ねるか分けるかを指定する
paddingセル内の余白を指定する
text-alignセル内の文字位置を指定する

border-collapse: collapse;を指定すると、隣り合うセルの枠線が重なって、すっきりした表になります。指定しない場合、セル同士の間にすき間ができたように見えることがあります。

ファイル名： Lesson21-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;
    }

    td {
      border: solid 1px #666666;
      padding: 8px;
    }
  </style>
</head>
<body>
  <h1>今月のおすすめ商品</h1>

  <table>
    <tr>
      <td>商品名</td>
      <td>価格</td>
      <td>在庫</td>
    </tr>
    <tr>
      <td>ブレンドコーヒー</td>
      <td>850円</td>
      <td>残り12個</td>
    </tr>
    <tr>
      <td>アールグレイ紅茶</td>
      <td>650円</td>
      <td>残り20個</td>
    </tr>
    <tr>
      <td>ほうじ茶ラテ粉末</td>
      <td>980円</td>
      <td>残り8個</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

この例では、tdにborder: solid 1px #666666;を指定しています。これにより、各セルに灰色の実線が付きます。

さらに、tableにborder-collapse: collapse;を指定しているため、セル同士の枠線が重なって表示されます。表全体がすっきり見えるため、基本的な表ではよく使われる指定です。

padding: 8px;は、セル内の文字のまわりに余白を作ります。枠線が付いた表では、余白がないと文字が線に近づきすぎて読みにくくなるため、paddingも合わせて指定するとよいでしょう。

図2：CSSで表の枠線と余白を整える

この図から分かること

表を見やすくするには、HTMLのタグだけでなくCSSも重要です。borderでセルに枠線を付け、border-collapseで境界線をすっきりまとめ、paddingで文字と枠線の間に余白を作ります。これにより、データの区切りが分かりやすくなります。

thタグで見出しセルを作る

表の一番上の行や左端の列には、項目名を入れることがよくあります。このような見出し用のセルには、tdではなくthタグを使います。

thタグは、table header cellの意味を持つ見出しセルです。ブラウザの初期表示では、太字で中央揃えになることが多く、通常のtdセルよりも見出しらしく表示されます。

<tr>
  <th>商品名</th>
  <th>価格</th>
  <th>在庫</th>
</tr>

このように、項目名の行にはthタグを使うと、表の意味が分かりやすくなります。

thタグとtdタグの違い

タグ役割初期表示の特徴
th見出しセルを作る太字、中央揃えになりやすい
td通常のデータセルを作る通常の文字として表示される

thタグを使うことで、見た目だけでなく、表の構造としても見出しであることを示せます。表を読む人にとっても、どの列が何を表しているのか分かりやすくなります。

ファイル名： Lesson21-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;
    }

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

    th {
      background-color: #E3F2FD;
      color: #0D47A1;
    }
  </style>
</head>
<body>
  <h1>今月のおすすめ商品</h1>

  <table>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
    <tr>
      <td>ブレンドコーヒー</td>
      <td>850円</td>
      <td>残り12個</td>
    </tr>
    <tr>
      <td>アールグレイ紅茶</td>
      <td>650円</td>
      <td>残り20個</td>
    </tr>
    <tr>
      <td>ほうじ茶ラテ粉末</td>
      <td>980円</td>
      <td>残り8個</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

このHTMLでは、最初の行にthタグを使っています。商品名、価格、在庫が見出しセルとして扱われます。

CSSでは、thとtdに共通してborderとpaddingを指定しています。さらにthだけにbackground-colorとcolorを指定し、見出し行を青系の背景色にしています。見出し行に色を付けると、データ行との違いが分かりやすくなります。

表を作るときは、見出しにあたる部分をthタグで作ることを意識しましょう。見た目が整うだけでなく、表の内容が理解しやすくなります。

セルの中に画像を入れる

tdタグやthタグの中には、文字だけでなく画像も入れられます。商品一覧で商品画像を表示したり、天気表で天気アイコンを表示したりする場合に便利です。

セルの中に画像を入れるには、tdタグの中にimgタグを書きます。

<td>
  <img src="coffee-beans.png" alt="コーヒー豆">
</td>

画像を表に入れるときは、CSSで画像サイズを整えると見やすくなります。大きすぎる画像をそのまま入れると、セルが広がりすぎて表全体が見づらくなることがあります。

表内画像で意識したいこと

ポイント内容
画像サイズを指定するwidthで横幅を指定すると表が崩れにくい
alt属性を書く画像が表示されない場合や読み上げに備える
text-alignを使うセル内で画像を中央に配置しやすい
セルの余白を調整する画像と枠線が近すぎないようにする

ファイル名： Lesson21-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;
    }

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

    th {
      background-color: #FFF3E0;
    }

    img.product-image {
      width: 56px;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>カフェ商品のおすすめリスト</h1>

  <table>
    <tr>
      <th>商品</th>
      <th>イメージ</th>
      <th>価格</th>
    </tr>
    <tr>
      <td>ブレンドコーヒー</td>
      <td><img src="coffee-beans.png" alt="ブレンドコーヒーの画像" class="product-image"></td>
      <td>850円</td>
    </tr>
    <tr>
      <td>アールグレイ紅茶</td>
      <td><img src="earl-grey-tea.png" alt="アールグレイ紅茶の画像" class="product-image"></td>
      <td>650円</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

この例では、商品名、イメージ、価格の3列で表を作っています。イメージ列のtdタグの中にimgタグを入れています。

img.product-imageには、width: 56px;を指定しています。height: auto;を指定しているため、画像の縦横比を保ったまま表示されます。画像を表に入れる場合は、横幅をそろえると表全体が整って見えます。

また、thとtdにはtext-align: center;を指定しています。これにより、文字や画像がセルの中央に配置されます。画像入りの表では、中央揃えにすると見た目が安定しやすくなります。

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

表にタイトルを付けたいときは、captionタグを使います。captionタグは、tableタグのすぐ後に書きます。

<table>
  <caption>今週の会議予定</caption>
  <tr>
    <th>日付</th>
    <th>時間</th>
    <th>内容</th>
  </tr>
</table>

captionは、表全体が何を表しているのかを伝えるためのタグです。見出しとは少し違い、表そのもののタイトルとして使います。

captionタグのポイント

ポイント内容
tableタグの直後に書く表のタイトルとして扱われる
表の内容を簡潔に表す何の表なのか分かる名前にする
CSSで見た目を調整できる文字サイズや余白を指定できる

ファイル名： Lesson21-5.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: 24px auto;
    }

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

    th,
    td {
      border: solid 1px #333333;
      padding: 8px 12px;
    }

    th {
      background-color: #E8F5E9;
    }
  </style>
</head>
<body>
  <table>
    <caption>今週の打ち合わせ予定</caption>
    <tr>
      <th>日付</th>
      <th>時間</th>
      <th>内容</th>
    </tr>
    <tr>
      <td>6/3</td>
      <td>10:00</td>
      <td>サイト構成の確認</td>
    </tr>
    <tr>
      <td>6/5</td>
      <td>14:00</td>
      <td>デザイン案のレビュー</td>
    </tr>
    <tr>
      <td>6/7</td>
      <td>16:00</td>
      <td>公開前チェック</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

このHTMLでは、tableタグの直後にcaptionタグを書いています。captionには、今週の打ち合わせ予定という表のタイトルを入れています。

CSSでは、captionにfont-size、font-weight、margin-bottomを指定しています。これにより、表のタイトルが少し大きく太字になり、表との間に余白もできます。

表が複数あるページでは、captionがあると、それぞれの表が何を示しているのか分かりやすくなります。特に、スケジュール表、料金表、比較表、ランキング表などでは、captionを付けると親切です。

図3：caption、th、td、imgを組み合わせた表

この図から分かること

HTMLの表では、captionで表のタイトルを付け、thで見出しセルを作り、tdで通常のデータセルを作ります。tdの中には文字だけでなくimgタグも入れられます。これらを組み合わせることで、画像付きの商品一覧やスケジュール表など、分かりやすい表を作れます。

カレンダー形式の表を作る

tableタグを使うと、商品リストのような単純な表だけでなく、カレンダーのような少し複雑な表も作れます。カレンダーでは、曜日をthタグで表し、各日付をtdタグの中に入れていきます。

次の例では、2026年7月の天気メモをカレンダー形式で作ります。日曜日には赤系、土曜日には青系の背景色を付け、日付と天気アイコンをセル内に配置しています。

ファイル名： Lesson21-6.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>2026年7月の天気メモ</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #FAFAFA;
      line-height: 1.7;
    }

    table.weather-calendar {
      border-collapse: collapse;
      width: 100%;
      max-width: 820px;
      margin: 24px auto;
      background-color: white;
    }

    table.weather-calendar caption {
      font-size: 1.4em;
      font-weight: bold;
      margin-bottom: 12px;
    }

    table.weather-calendar th {
      background-color: #F0F0F0;
      border: solid 1px #CCCCCC;
      padding: 8px;
      text-align: center;
    }

    table.weather-calendar td {
      border: solid 1px #CCCCCC;
      padding: 6px;
      vertical-align: top;
      height: 82px;
    }

    table.weather-calendar td.sun {
      background-color: #FFE8E8;
    }

    table.weather-calendar td.sat {
      background-color: #E8F1FF;
    }

    .date {
      font-weight: bold;
      margin-bottom: 6px;
    }

    .weather-icon {
      display: block;
      width: 34px;
      height: 34px;
      margin: 0 auto;
    }

    table.legend {
      border-collapse: collapse;
      margin: 16px auto;
      background-color: white;
    }

    table.legend caption {
      font-weight: bold;
      margin-bottom: 6px;
    }

    table.legend th,
    table.legend td {
      border: solid 1px #CCCCCC;
      padding: 6px 12px;
      text-align: center;
    }

    table.legend img {
      width: 32px;
      height: auto;
    }
  </style>
</head>
<body>
  <table class="weather-calendar">
    <caption>2026年7月の天気メモ</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><div class="date">1</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">2</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">3</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td class="sat"><div class="date">4</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
    </tr>
    <tr>
      <td class="sun"><div class="date">5</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">6</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">7</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">8</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">9</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">10</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td class="sat"><div class="date">11</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
    </tr>
    <tr>
      <td class="sun"><div class="date">12</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">13</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">14</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">15</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">16</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">17</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td class="sat"><div class="date">18</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
    </tr>
    <tr>
      <td class="sun"><div class="date">19</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">20</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">21</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">22</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">23</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">24</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td class="sat"><div class="date">25</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
    </tr>
    <tr>
      <td class="sun"><div class="date">26</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">27</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">28</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">29</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td><div class="date">30</div><img src="rain-icon.png" alt="雨" class="weather-icon"></td>
      <td><div class="date">31</div><img src="sun-icon.png" alt="晴れ" class="weather-icon"></td>
      <td class="sat"></td>
    </tr>
  </table>

  <table class="legend">
    <caption>天気アイコン一覧</caption>
    <tr>
      <th>天気</th>
      <th>アイコン</th>
    </tr>
    <tr>
      <td>晴れ</td>
      <td><img src="sun-icon.png" alt="晴れアイコン"></td>
    </tr>
    <tr>
      <td>雨</td>
      <td><img src="rain-icon.png" alt="雨アイコン"></td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

このサンプルでは、tableタグを2つ使っています。1つ目は天気カレンダー、2つ目は天気アイコンの凡例です。

カレンダーの表には、weather-calendarというclassを付けています。CSSではtable.weather-calendarのように指定し、カレンダー用の表だけにスタイルを適用しています。凡例の表にはlegendというclassを付け、別の見た目を指定しています。

曜日の行にはthタグを使っています。日付が入るセルにはtdタグを使い、日付部分をdiv class="date"で囲んでいます。天気アイコンはimgタグで表示し、weather-iconというclassでサイズを整えています。

日曜日のセルにはclass="sun"、土曜日のセルにはclass="sat"を付けています。CSSでそれぞれ背景色を変えているため、曜日の違いが見た目で分かりやすくなります。

このように、tableタグはデータをただ並べるだけでなく、classやCSSと組み合わせることで、カレンダーや一覧表のような実用的な表示にも使えます。

表を作るときに使うタグの整理

表作成で使う主なタグを整理しておきます。

タグ用途
table表全体を囲む
caption表のタイトルを付ける
tr表の行を作る
th見出しセルを作る
td通常のデータセルを作る
imgセル内に画像を表示する
divセル内の一部をまとめる
h1ページの見出しを作る
styleHTML内にCSSを書く

tableは表全体を作るための土台です。trで行を作り、その中にthやtdを並べることで表の中身を作ります。captionを使うと、表のタイトルを分かりやすく表示できます。

tdの中には文字だけでなく、imgタグやdivタグも入れられます。画像入りの表や、セルの中で日付とアイコンを分けて表示するような表も作れます。

表を見やすくするCSSの整理

HTMLで表の構造を作ったら、CSSで見た目を整えます。表はデータを読み取るためのものなので、装飾よりも分かりやすさを意識することが大切です。

CSS用途
border-collapseセルの境界線をすっきり表示する
borderセルに枠線を付ける
paddingセル内に余白を作る
text-alignセル内の文字や画像を揃える
vertical-alignセル内の縦方向の位置を指定する
background-color見出し行や曜日ごとの背景色を変える
width表や画像の横幅を指定する
margin表の外側の余白や中央配置を指定する

表では、border、padding、text-alignの3つが特によく使われます。borderでデータの区切りを見せ、paddingで文字を読みやすくし、text-alignでセル内の配置を整えます。

また、表全体を中央に置きたい場合は、tableにwidthを指定し、margin: 0 auto;を使います。横幅を100%にしたい場合は、width: 100%;を指定します。画面が広いと表が大きくなりすぎる場合は、max-widthを組み合わせると見やすくなります。

tableタグを使うときに意識したいこと

tableタグは、表形式のデータを整理して表示するためのタグです。商品リスト、料金表、スケジュール、比較表、カレンダーなど、行と列で整理すると分かりやすい情報に向いています。

一方で、ページ全体のレイアウトを作るためにtableを使うのは、現在のWeb制作では一般的ではありません。レイアウトにはdiv、section、flexbox、CSS Gridなどを使い、表形式のデータにはtableを使う、というように役割を分けるとよいでしょう。

表を作るときは、まずtable、tr、tdで基本の形を作ります。項目名にはthを使い、表のタイトルにはcaptionを使います。必要に応じてCSSで枠線、余白、背景色、文字揃えを整えると、読みやすい表になります。

さらに、セルの中にimgタグを入れれば、画像付きの商品一覧や天気アイコン付きのカレンダーも作れます。表の構造とCSSの指定を組み合わせることで、シンプルな表から実用的な表まで、幅広く表現できるようになります。