【6日でできるHTML＆CSS入門】テーブルの構造

―テーブルで“整理された情報”を届ける―
　大量のデータを読みやすく並べるには、テーブル（表） が最適です。HTML では <table> を基点に行 (<tr>)、列セル (<th> / <td>) を組み合わせて表を組み立てます。ここでは「行・列・セルの概念」から「基本タグ」「装飾属性」まで、段階的にマスターできるようサンプルを交えて解説します。

１．テーブルの基礎を押さえる

1.1. 行・列・セルとは

用語説明イメージ
行（レコード）横 1 列のデータ塊→ 水平に並ぶ
列（カラム）縦 1 列の同種データ↓ 垂直に並ぶ
セル行×列の交点値を格納するマス

1.2. テーブル生成 4 兄弟タグ

タグ役割よく使う場面
<table>表全体を宣言まずこれで囲む
<tr>行を作成レコードを増やす
<th>見出しセル列タイトルに使用
<td>データセル実際の値を格納

２．テーブルを実装してみる

2.1. サンプル①：ファイル名： lesson14_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>生徒名簿</title>
</head>
<body>
  <h1>クラス名簿</h1>
  <table border="1">
    <tr>
      <th>氏名</th><th>学年</th><th>出身地</th><th>部活動</th>
    </tr>
    <tr>
      <td>田中優美</td><td>1年</td><td>北海道</td><td>吹奏楽</td>
    </tr>
    <tr>
      <td>渡辺　健</td><td>2年</td><td>福岡県</td><td>サッカー</td>
    </tr>
    <tr>
      <td>高橋雅樹</td><td>3年</td><td>京都府</td><td>写真</td>
    </tr>
  </table>
</body>
</html>

表示結果

2.2. サンプル②ファイル名： lesson14_2.html（枠線太さ変更）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>生徒名簿</title>
</head>
<body>
  <h1>クラス名簿</h1>
  <table border="3">
    <tr>
      <th>氏名</th><th>学年</th><th>出身地</th><th>部活動</th>
    </tr>
    <tr>
      <td>田中優美</td><td>1年</td><td>北海道</td><td>吹奏楽</td>
    </tr>
    <tr>
      <td>渡辺　健</td><td>2年</td><td>福岡県</td><td>サッカー</td>
    </tr>
    <tr>
      <td>高橋雅樹</td><td>3年</td><td>京都府</td><td>写真</td>
    </tr>
  </table>
</body>
</html>

表示結果

枠線が 3px になりテーブルが強調表示されます。

2.3. サンプル③ファイル名： lesson14_3.html（枠線なし）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>生徒名簿</title>
</head>
<body>
  <h1>クラス名簿</h1>
  <table border="0">
    <tr>
      <th>氏名</th><th>学年</th><th>出身地</th><th>部活動</th>
    </tr>
    <tr>
      <td>田中優美</td><td>1年</td><td>北海道</td><td>吹奏楽</td>
    </tr>
    <tr>
      <td>渡辺　健</td><td>2年</td><td>福岡県</td><td>サッカー</td>
    </tr>
    <tr>
      <td>高橋雅樹</td><td>3年</td><td>京都府</td><td>写真</td>
    </tr>
  </table>
</body>
</html>

表示結果

罫線が消え、レイアウトだけで表を構成。

３．タグと属性の深掘り

3.1. <th> と <td> の使い分け

  • <th> には既定で 太字＋中央寄せ の CSS が当たる。
  • 見出し行／列に限定し、データは必ず <td> に

3.2. border 以外の代表的属性

属性設定例効果
borderborder="2"枠線太さ
cellpaddingcellpadding="4"セル内余白
cellspacingcellspacing="0"セル間隔
width / heightwidth="80%"テーブルサイズ

3.3. 行・列の結合（参考）

<td colspan="2">2 列結合</td>
<th rowspan="3">3 行分見出し</th>

colspan と rowspan を組み合わせると複雑なレイアウトも実現。

使用タグ一覧

タグ / 属性概要閉じタグ
<table>表全体必要
<tr>行（レコード）必要
<th>見出しセル必要
<td>データセル必要
border枠線太さ（数値）―
cellpadding内側余白―
cellspacingセル間余白―
colspan / rowspanセル結合―

まとめ

  • テーブルは <table> → <tr> → <th>/<td> の入れ子で構築。
  • 行数は <tr> の回数、列数は各 <tr> 内セル数で決定。
  • border や cellpadding 属性で第一印象が大幅に変わるため、用途に応じてチューニング。

テーブルタグを自在に操れば、名簿・価格表・スケジュール表など“見やすい情報整理”がスムーズに行えます。