HTMLの表とは？table・tr・th・tdの違いと書き方を初心者向けに解説

HTMLで料金表や営業時間、商品一覧を作ろうとすると、table・tr・th・tdというタグが登場します。「どれが行で、どれがセル？」「thとtdは見た目が違うだけ？」と迷う人も多いでしょう。

結論から言うと、表全体をtableで囲み、1行ごとにtrを作り、その中へ見出しセルのthまたはデータセルのtdを並べます。trの中にセルを置く、という親子関係が基本です。

この記事では、HTMLファイルに3列の表を書いて表示するところから、caption・thead・tbody、scope、セル結合までを解説します。HTMLは表の構造を、CSSは罫線や余白などの見た目を担当します。

HTMLの表（テーブル）とは？

HTMLの表は、行と列の組み合わせで情報を整理するための構造です。料金表なら「プラン名・料金・対象」、商品一覧なら「商品名・価格・在庫」のように、複数の対象を同じ項目で比べられます。

MDNのtable要素の解説でも、tableは行と列による二次元の表で表される情報のための要素と説明されています。

表は同じ項目で情報を比べるときに使う

次の情報は表に向いています。

• 複数商品の価格・容量・在庫
• 曜日ごとの営業時間
• コースごとの内容・所要時間・料金

複数の対象を同じ項目で横に比べたいなら、表を選ぶのが基本です。 一方、単に項目をまとめたいだけならリストの方が自然です。

表とリストは目的で使い分ける

「HTML・CSS・JavaScript」のような項目のまとまりにはリストを使います。「言語名・役割・用途」のように共通の項目で比較するなら表を使います。

リストの書き方を先に確認したい場合は、HTMLのul・ol・liの違いも参考にしてください。

table・tr・th・tdの違い

4つのタグは、表全体・行・見出しセル・データセルという役割に分かれます。

tableとtrは表全体・行を作る

tableは表全体をまとめる要素です。囲むだけで罫線が付くわけではありません。trはtable rowの略で、横方向の1行を表します。見出し1行とデータ2行なら、trは合計3組です。

<table>
  <tr>
    <!-- 1行目のセル -->
  </tr>
  <tr>
    <!-- 2行目のセル -->
  </tr>
</table>

thとtdは見出しセル・データセルを作る

thは見出し、tdはデータを表すセルです。どちらもtrの中に置きます。次は1行分だけを抜き出した例です。単独のHTMLファイルではなく、table内に置く部分として読んでください。

<tr>
  <th>商品名</th>
  <td>ノート</td>
</tr>

thは単に太字にするタグではありません。「このセルは、行または列の見出しである」と意味を伝えるために使います。

図は、見出し1行とデータ1行の関係を単純化したものです。trの枠の中に、3つのセルが入ります。後半で紹介するthead・tbodyを使う場合は、tableとtrの間に行グループが加わります。

HTMLで基本の表を書く方法

ここでは「商品名・価格・在庫」の3列を持つ表を作ります。最初から一度に書かず、外側から順番に組み立てましょう。

準備｜index.htmlに表を書く場所を用意する

パソコンのテキストエディターで、次のコードをindex.htmlという名前・UTF-8で保存します。すでにHTMLファイルがある場合は、その<body>と</body>の間へ表を追加してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>表の練習</title>
</head>
<body>
  <!-- ここにSTEP4のtable全体を貼り付けます -->
</body>
</html>

次のSTEP1〜3は組み立て途中の断片です。順に追記して4つの表を作るのではなく、STEP4の完成コードを、上のコメント行と置き換えます。保存したindex.htmlをブラウザーで開くと結果を確認できます。ファイル作成や拡張子で迷ったら、HTMLの基本構造とファイルの保存方法を先に確認してください。

これはHTMLファイルでの練習です。WordPressの通常の段落へコードを貼り付ける手順ではありません。

<table>
</table>

<table>
  <tr>
  </tr>
</table>

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

<table>
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫</th>
  </tr>
  <tr>
    <td>ノート</td>
    <td>300円</td>
    <td>あり</td>
  </tr>
  <tr>
    <td>ペン</td>
    <td>120円</td>
    <td>残りわずか</td>
  </tr>
</table>

罫線も付けたい場合｜headにCSSを追加する

罫線がなくても、表の行と列は表示されます。罫線を付ける練習をする場合だけ、次を</head>の直前に追加します。表のHTMLをheadへ移す必要はありません。

<style>
  table { border-collapse: collapse; }
  th, td {
    border: 1px solid #7A8E6D;
    padding: 8px;
  }
</style>

borderは罫線、paddingはセル内の余白です。この例ではそれぞれ1px・8pxを指定しています。border-collapse: collapseは隣り合うセルの罫線を重ねて表示する指定です。保存・再読み込み後に線と余白が増え、商品名や行数が変わっていないことを確認しましょう。

詳しい指定方法は、MDNのborder-collapseの解説で確認できます。

thとtdはどう使い分ける？

thとtdの違いは見た目ではなく、セルの意味です。ブラウザの初期表示ではthが太字や中央寄せになることがありますが、それだけを理由に使い分けてはいけません。

列の見出しにはthを使う

表の1行目が各列の名前なら、thへscope="col"を指定します。colはcolumn（列）の意味で、その見出しが同じ列のデータに対応することを明示します。次は、基本表の見出し行を置き換えるコードです。

<tr>
  <th scope="col">商品名</th>
  <th scope="col">価格</th>
  <th scope="col">在庫</th>
</tr>

行の見出しにもthを使える

各行の先頭が行の名前なら、そのセルもthにできます。商品名を行見出しとして扱う例では、「ノート」を<th scope="row">で囲みます。次は、基本表のノートの行を置き換えるコードです。rowは行を意味します。

<tr>
  <th scope="row">ノート</th>
  <td>300円</td>
  <td>あり</td>
</tr>

MDNのth要素の解説では、scope="row"は同じ行、scope="col"は同じ列のセルとの関係を示す値として説明されています。

thは文字を太くするためではなく、データの見出しを示すために使います。 見た目はCSSで変わっても、見出しという意味は残ります。

caption・thead・tbodyで表を分かりやすくする

基本の表はtable・tr・th・tdだけでも書けます。ただし、表の目的と区画を明確にしたいときはcaption・thead・tbodyも使うと、構造を読み取りやすくできます。

captionで表の内容を伝える

captionには「文房具の価格と在庫」のように、その表が何を表すのかを簡潔に書きます。tableの開始タグのすぐ後に置くと、表と題名の関係が明確になります。仕様と例は、MDNのcaption要素の解説で確認できます。

captionは表の中身を読む前に、何の表か判断できる名前にします。

theadとtbodyで見出し・データを分ける

次は、ここまでの内容をまとめた完成例です。練習用index.htmlのbody内にあるtable全体を、次のコードと置き換えます。商品名には行見出しのth scope="row"を使っています。

<table>
  <caption>文房具の価格と在庫</caption>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">価格</th>
      <th scope="col">在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">ノート</th>
      <td>300円</td>
      <td>あり</td>
    </tr>
    <tr>
      <th scope="row">ペン</th>
      <td>120円</td>
      <td>残りわずか</td>
    </tr>
  </tbody>
</table>

theadとtbodyは表の見出し部分とデータ部分をまとめるタグです。これら自体が行になるのではなく、その中へtrを置きます。

colspan・rowspanでセルを結合する

セルを横方向にまたがらせるならcolspan、縦方向ならrowspanを、対象のthまたはtdに付けます。ここでは値を2として、2列分・2行分を占める例を示します。数は単位を付けずに書き、指定がなければ通常は1です。

文房具の一覧には結合が不要なので、この節だけ受付枠の例へ切り替えます。どちらも2列の表で、body内にある練習用の表全体と置き換えて試せます。

colspanで列をまたぐ

午前・午後とも受付を休む例です。2行目の「休業」にcolspan="2"を付け、1つのデータセルで2列分を占めます。同じ行に、午後の分のセルを重ねて追加しません。

<table>
  <caption>臨時休業日の受付</caption>
  <tr>
    <th scope="col">午前</th>
    <th scope="col">午後</th>
  </tr>
  <tr>
    <td colspan="2">休業</td>
  </tr>
</table>

rowspanで行をまたぐ

平日の受付枠を午前・午後の2行で示す例です。「平日」にrowspan="2"を付けます。2行目の1列目はすでに「平日」が占めているため、2行目に空のセルを足さず、「午後」だけを書きます。

<table>
  <caption>平日の受付枠</caption>
  <tbody>
    <tr>
      <th rowspan="2" scope="rowgroup">平日</th>
      <td>午前</td>
    </tr>
    <tr>
      <td>午後</td>
    </tr>
  </tbody>
</table>

この例のscope="rowgroup"は、「平日」が同じtbody内の行グループの見出しであることを示します。単純な1行の見出しに使ったscope="row"とは対象範囲が異なります。属性の詳細は、MDNのscopeの説明と、セルをまたがらせる属性の説明を参照してください。

セルを結合すると、行ごとのタグ数だけでは列数を判断しにくくなります。まず結合なしの表を完成させ、必要な場所だけに追加しましょう。

HTMLの表でよくある間違い

表の表示がおかしいときは、CSSより先にHTMLの構造を確認します。

th・tdをtrの外へ置かない

次は修正前の誤った例です。tdをtableの直下へ置いています。ブラウザーが構造を補って表示する場合もありますが、表示されたことだけで正しいHTMLとは判断できません。

<!-- 誤った例 -->
<table>
  <td>ノート</td>
</table>

次の修正後の例のように、trを間に入れます。セルの親要素はtrです。MDNのtr要素の解説でも、行の中にth・tdを置く構造を確認できます。

<!-- 正しい例 -->
<table>
  <tr>
    <td>ノート</td>
  </tr>
</table>

HTMLは構造、CSSは見た目を担当する

border・bgcolor・cellpaddingなど、古いHTML属性で表の見た目を指定する例が見つかることがあります。しかし、現在は罫線、背景色、余白、横幅などをCSSで指定するのが基本です。

HTMLとCSSの役割を整理したい場合は、HTMLとCSSの違いもあわせて確認してください。

HTMLの入れ子が正しいことを確認してから、CSSの見た目を調整します。

表が表示されない・崩れるときの確認ポイント

まず編集したファイルを保存し、開いているindex.htmlが同じファイルか確認します。文字化けする場合はUTF-8で保存したか、meta charsetがあるかも見直してください。そのうえで、次の順番で確認します。

1. tableの中にtr、trの中にth・tdがあるか
2. 各タグの終了タグがそろっているか
3. 行ごとのセル数とcolspan・rowspanの値が合っているか
4. HTMLが正しければ、CSSの罫線・幅・余白を確認する

一度に複数箇所を変えると、どの修正が効いたのか分からなくなります。上から一項目ずつ確認し、「保存→再読み込み→表示確認」を繰り返しましょう。

入れ子などの誤りを自分で見つけにくい場合は、Nu Html Checkerの入力方法で「text input」を選び、学習用HTMLファイル全体を貼り付けて検証できます。表の断片だけでは文書全体の不足も指摘されるため、doctypeから</html>までを使います。外部へ送信してよいコードだけを入力し、エラーの行とその直前を確認してください。

HTMLの表についてよくある質問

CSSを書かなくてもHTMLの表は表示されますか？

はい。行と列として表示されます。ただし、HTMLでtableを囲むだけでは通常、セルの罫線は付きません。罫線がないことと表が表示されていないことを区別し、線や余白はCSSで追加します。

thタグは必ず必要ですか？

すべての表で構文上必須というわけではありませんが、列名や行名があるデータ表ではthを使うのが基本です。どのデータに対応する見出しかを伝えやすくなります。

theadとtbodyは必ず書きますか？

theadを使わず、ソースにtableとtrを続けて書く単純な表も作れます。その場合でも、ブラウザーは通常、読み込んだ構造にtbodyを補います。完成例では見出し行とデータ行のまとまりを明示すると読みやすくなります。詳しくはMDNのtbody要素の解説を参照してください。

tdをtableの直下へ書けますか？

書きません。thとtdは行を表すtrの中へ置きます。theadやtbodyを使う場合も、その中へtrを置き、さらにセルを入れます。

tableタグを2カラムレイアウトに使ってもよいですか？

おすすめしません。tableは表形式のデータを表す要素です。ページの列分けやカード配置には、FlexboxやGridなどのCSSレイアウトを使います。

まとめ｜tableの中にtr、その中にth・tdを書こう

HTMLの表は、同じ項目で複数の情報を比べるための構造です。

• tableで表全体を囲む
• trで1行を作る
• thで見出しセル、tdでデータセルを作る
• captionとscopeで表の目的や見出しとの関係を伝える
• 構造はHTML、罫線・余白・色はCSSで指定する

まずは「商品名・価格・在庫」の完成例をindex.htmlで表示し、「ノート」を別の商品名へ書き換えてみてください。保存・再読み込みで対応するセルだけが変わることを確認できたら、次は価格やデータ行を増やす練習へ進めます。

目的別に次の記事を選ぶ

次に復習したい内容や、表に加えたい見た目に合わせて選んでください。

HTMLタグの書き方を復習したい方は、開始タグ・終了タグ・属性の基本を確認しましょう。

あわせて読みたい

HTMLタグとは？見出し・段落・リンク・画像の書き方を初心者向けに解説 HTMLタグの役割と基本の書き方を初心者向けに解説。h1〜h6、p、a、imgを使い、見出し・段落・リンク・画像を含むプロフィールページを作ります。

表に罫線や背景色を付けたい方は、CSSのborderと背景の指定方法へ進んでください。

あわせて読みたい

CSSで背景色・枠線・角丸を設定する方法｜background-color・border・border-radiusを初心者向けに解説 CSSのbackground-color・border・border-radiusを使い、背景色・枠線・角丸を設定する方法を初心者向けに解説。カードと正円の実例、表示されないときの確認順まで紹介します。