HTMLの表（table）の作り方とは？tr・th・tdと罫線

Q: 表の線が二重に見えます。

セルごとに線を引いているため、隣どうしの線が2本になっています。table に border-collapse: collapse; を指定すると1本にまとまります。

結論: 表は table で挟み、tr が行、th と td がセル

POINTtable（外枠）の中に tr（横の行）を並べ、tr の中に th（見出しのセル）か td（データのセル）を並べる。線と余白は HTML ではなく CSS で付ける。

表は、タグが3段階に入れ子になります。外側から table（表全体）→ tr（1行）→ th / td（1マス）。難しく見えますが、「行を作って、その中にマスを並べる」を繰り返すだけです。できあがりはこうなります。

好きなもの	理由
猫	かわいいから
カレー	おいしいから

今日のコード（コピーして使えます）

動画の最後にできあがったコードです。右上の「コードをコピー」ボタンを押すと全文が入ります。表は <h2>自己紹介</h2> のすぐ下、罫線の指示は <style> の中に足しました。猫の画像は第2回の記事からダウンロードできます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
  <style>
    h1 { color: tomato; }
    p { font-size: 20px; }
    body { background: lightyellow; }
    h1 { text-align: center; }
    th, td { border: 1px solid gray; }
    table { border-collapse: collapse; }
    th, td { padding: 8px; }
  </style>
</head>
<body>
  <h1>はじめてのページ</h1>
  <h2>自己紹介</h2>
  <table>
    <tr>
      <th>好きなもの</th>
      <th>理由</th>
    </tr>
    <tr>
      <td>猫</td>
      <td>かわいいから</td>
    </tr>
    <tr>
      <td>カレー</td>
      <td>おいしいから</td>
    </tr>
  </table>
  <p>IT業界をやさしく案内します。</p>
  <p>これは1行目。<br>
  これは2行目。</p>
  <ol>
    <li>開発の流れ</li>
    <li>職種図鑑</li>
    <li>用語集</li>
    <li>学び方</li>
  </ol>
  <a href="https://it-nyumon.com/">サイトへ</a>
  <a href="https://it-nyumon.com/">
    <img src="neko.png" alt="ねこ" width="200">
  </a>
</body>
</html>

table・tr・th・td の役割

table の中に tr（行）を並べ、tr の中に th / td（セル）を並べる。

table: 表全体の外枠。すべてをこれで挟みます。
tr（テーブル・ロウ）: 横の1行。行の数だけ tr を作ります。
th（テーブル・ヘッダー）: 見出しのセル。自動で太字・中央寄せになります。
td（テーブル・データ）: 中身のセル。

行と列を混同しやすいですが、tr は row（横の行）とだけ覚えておけば大丈夫です。列（縦）を増やしたいときは、全部の行にセルを1つずつ足します。

罫線と余白は CSS で: border・border-collapse・padding

POINT線は th と td に border、二重線は table に border-collapse: collapse、余白は padding。カンマ区切りで複数の相手にまとめて指示できる。

th, td { border: 1px solid gray; }: セルに、1ピクセルの実線（solid）を灰色で。th, td のようにカンマで区切ると、複数の相手にまとめて指示できます。
table { border-collapse: collapse; }: セルごとの線が隣どうしで2本になるのを、1本にまとめます。
th, td { padding: 8px; }: セルの内側に余白。文字が線にくっつかず読みやすくなります。

昔は HTML 側に border="1" と書く方法もありましたが、今は「見た目は CSS」が基本です。前回覚えた「セレクタ { 何を: どうする; }」の形がそのまま使えます。

よくあるつまずき: 線が二重・表がずれる

線が二重に見える → table { border-collapse: collapse; } を足す。
表がずれる・マスが欠ける → 行ごとのセルの数がそろっていない。各 tr の中の th / td の数を数える。
表が消えた → </table> や </tr> の閉じ忘れ。
線が出ない → CSS のつづりとセミコロン（border: 1px solid gray;）を確認。

よくある質問

列（縦の項目）を増やすには？

すべての行（tr）に、セル（th または td）を1つずつ足します。行ごとにセルの数がそろっていないと、表がずれて見えます。

表の線が二重に見えます。

セルごとに線を引いているため、隣どうしの線が2本になっています。table に border-collapse: collapse; を指定すると1本にまとまります。

先頭の列を見出しにするには？

各行の最初のセルを td ではなく th にします。th は見出しのセルなので、行の先頭でも列の先頭でも使えます。

ページのレイアウト（配置）に table を使ってもいいですか？

おすすめしません。table は「表のデータ」を表すためのタグで、配置は CSS の役割です。レイアウトの整え方はシリーズの「レイアウトを整える」回で扱います。

HTMLの表（table）の作り方とは？tr・th・tdと罫線をやさしく解説