【HTML入門 #04】表（table）を使ってデータを整理しよう！

6/24/2025

著者: yasuzaki

カテゴリ: HTML

タグ:

アイキャッチ

今回のテーマ

今回のテーマは「表（table）」です。 情報を行と列で整理して見せたいときに使う代表的なHTML要素のひとつですね。 スケジュール表や料金表など、実務でも出番が多いので、しっかり押さえておきましょう！

HTMLの表の基本構造

表を作るには、以下のタグを組み合わせて使います：

  • <table> … 表全体を囲む
  • <tr> … 行（row）を表す
  • <td> … データセル（通常のマス目）
  • <th> … ヘッダーセル（見出し用）

シンプルな表の例

以下のコードを見てみましょう。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>28</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>34</td>
    <td>デザイナー</td>
  </tr>
</table>

これをブラウザで表示すると、以下のような形になります：

名前年齢職業
山田太郎28エンジニア
佐藤花子34デザイナー

表にスタイルをつけてみよう（CSS）

表はそのままだと味気ないので、CSSで少し装飾してみましょう：

<style>
  table {
    border-collapse: collapse;
    width: 80%;
    margin: 20px auto;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

このスタイルを <head> 内に書いて、表を読みやすく整えることができます。

よくあるつまずきポイント

  • <td> と <th> を混同してしまう
  • <tr> の中に直接文字を書いてしまう → 正しくは <td> や <th> を中に書く
  • 表が崩れて見える場合は、CSSで border-collapse: collapse; を入れると◎

応用：セルの結合（rowspan / colspan）

複雑な表を作りたいときは、セルの結合も可能です：

<td colspan="2">2列分のセル</td>
<td rowspan="3">3行分のセル</td>

表計算ソフトのように、行や列をまたいで表示することもできます。

まとめ

  • <table> を使うとデータを行列で整理できる
  • <tr>, <td>, <th> を正しく使い分けるのがポイント
  • スタイルを加えることで実用的で見やすい表にできる

次回予告

次回は「フォームの作成」に挑戦します！ 入力欄・ボタン・チェックボックスなど、ユーザーから情報を受け取る仕組みを学んでいきましょう。

＜＜ 前の記事：