【完全保存版】HTMLのtableタグの使い方｜表の作り方を初心者向けに基本から徹底解説

Webページで「料金表」「比較表」「一覧データ」などを表示したいときに使われるのが
HTMLの table（テーブル）タグです。

この記事では、「html table」で検索した初心者の方に向けて、
HTMLで表を作成する基本から、正しい書き方、よくあるミスまでを
実例つきでわかりやすく解説します。

HTMLのtableタグとは何か

HTMLの table タグは、表形式のデータを表示するためのタグです。

数値データ
料金一覧
比較表
スケジュール表

など、行と列で整理された情報を表示するのに適しています。

tableタグの基本構造

HTMLの表は、複数のタグを組み合わせて作ります。

<table>
  <tr>
    <th>見出し</th>
    <td>内容</td>
  </tr>
</table>

基本タグの役割

タグ	役割
`table`	表全体を囲む
`tr`	行（row）
`th`	見出しセル
`td`	データセル

この構造を理解することが、tableタグ習得の第一歩です。

HTMLで表を作る基本的な書き方

2行2列のシンプルな表を作ってみましょう。

<table>
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>商品名</td>
    <td>サンプル商品</td>
  </tr>
</table>

このように、
tr（行）の中に th や td を並べることで表が完成します。

thタグとtdタグの違い

初心者が混乱しやすいポイントです。

thタグ（見出し）

表の見出しに使う
文字が太字・中央寄せになる（初期状態）
意味的に「見出し」であることを示す

tdタグ（データ）

実際の内容を表示する
数値・文字データを入れる

見出し行や見出し列には th を使うのが正解です。

表を見やすくする基本テクニック

border属性で枠線を表示する（簡易）

<table border="1">

簡単に枠線を表示できますが、
現在は CSSで指定する方法が推奨されています。

CSSで枠線を指定する方法

table {
  border-collapse: collapse;
}

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

CSSを使うことで、デザインの自由度が高くなります。

行や列を結合する方法

行を結合する（rowspan）

<td rowspan="2">共通項目</td>

列を結合する（colspan）

<td colspan="2">横に結合</td>

料金表や見出し行でよく使われます。

tableタグでよくある間違い

レイアウト目的でtableを使う

以前は、ページレイアウトにtableが使われていましたが、
現在は非推奨です。

レイアウト → CSS（Flexbox / Grid）
表データ → table

用途を正しく使い分けましょう。

tr・tdの数が合っていない

<tr>
  <td>A</td>
  <td>B</td>
</tr>
<tr>
  <td>C</td>
</tr>

列数が揃っていないと、表示崩れの原因になります。

tableとCSSの正しい関係

tableは構造（意味）を作る役割、
CSSは見た目を整える役割です。

table：データ構造
CSS：色・余白・罫線・レスポンシブ対応

HTMLとCSSを分けて考えることが大切です。

レスポンシブ対応での注意点

tableはスマホ表示で横に広がりやすいため、注意が必要です。

よく使われる対策

.table-wrap {
  overflow-x: auto;
}

<div class="table-wrap">
  <table>...</table>
</div>

横スクロール対応にすることで、
スマホでも表を見やすく表示できます。

よくある質問

tableはSEOに影響しますか

正しく使えば問題ありません。
見出しに th を使うことで、情報構造が明確になります。

tableとdivはどちらを使うべきですか

表形式のデータ → table
レイアウト・装飾 → div + CSS

目的で使い分けるのが正解です。

まとめ

HTMLのtableタグは、表形式の情報を正しく伝えるための重要なタグです。

table・tr・th・td の役割を理解する
見出しには th を使う
レイアウト目的では使わない
CSSと組み合わせて見やすくする

「html table」で検索した方は、
まず 基本構造と正しい使い方 をしっかり身につけることから始めてみてください。
tableを正しく使えるようになると、Webページの表現力が大きく向上します。

【完全保存版】HTMLのtableタグの使い方｜表の作り方を初心者向けに基本から徹底解説