【初心者向け】HTMLの表（table）タグの使い方を丁寧に解説

1.表（table）タグとは？
- 表の表示イメージ
2.基本構成：table・tr・td・thの意味と役割
- それぞれの役割を簡単に説明
- 説明付きHTMLコード
3.よく使う属性の解説（border・colspan・rowspanなど）
4.表をCSSで装飾してみよう
5.よくある注意点・初心者のつまずき
6.まとめ

1.表（table）タグとは？

HTMLの<table>タグは、データを行（row）と列（column）で整理して表示するためのタグです。
たとえば、以下のような「名前と年齢の一覧表」のように、情報を表形式で見せたいときに使います。

表の表示イメージ

<table border="1">         <!-- 表全体を囲む -->
  <tr>                      <!-- 1行目の開始 -->
    <th>名前</th>           <!-- 見出しセル：名前 -->
    <th>年齢</th>           <!-- 見出しセル：年齢 -->
  </tr>
  <tr>                      <!-- 2行目の開始 -->
    <td>さくら</td>         <!-- データセル：さくら -->
    <td>17</td>             <!-- データセル：17 -->
  </tr>
  <tr>                      <!-- 3行目の開始 -->
    <td>たけし</td>         <!-- データセル：たけし -->
    <td>18</td>             <!-- データセル：18 -->
  </tr>
</table>

名前	年齢
さくら	17
たけし	18

このように、<table>の中に<tr>（行）、その中に<th>や<td>（セル）を入れていくことで表を作ります。

2.基本構成：table・tr・td・thの意味と役割

HTMLの表は、以下のタグを組み合わせて構成します：

タグ	意味
`<table>`	表全体を囲むタグ
`<tr>`	1行（row）を表すタグ
`<td>`	データ用のセル（通常のマス）
`<th>`	見出し用のセル（太字＆中央揃え）

それぞれの役割を簡単に説明

`<table>`

表全体を囲むためのタグです。これがないとHTML上では「表」と認識されません。

`<tr>`

1行を意味するタグです。表の中ではこの<tr>が何行も並ぶことで、複数行の表になります。

`<td>`

「table data」の略。データを入れる通常のセルを意味します。テキストや画像、リンクなども入れられます。

`<th>`

「table header」の略。見出し用のセルで、デフォルトで太字・中央揃えになります。表のタイトルや列のラベルに使われます。

説明付きHTMLコード

<table border="1">           <!-- 表全体 -->
  <tr>                        <!-- 1行目 -->
    <th>商品名</th>           <!-- 見出し：商品名 -->
    <th>価格</th>             <!-- 見出し：価格 -->
  </tr>
  <tr>                        <!-- 2行目 -->
    <td>りんご</td>           <!-- データセル -->
    <td>100円</td>            <!-- データセル -->
  </tr>
  <tr>                        <!-- 3行目 -->
    <td>バナナ</td>
    <td>120円</td>
  </tr>
</table>

商品名	価格
りんご	100円
バナナ	120円

このように、1つの<table>の中に複数の<tr>（行）、その中に<th>や<td>（セル）を入れて構成します。

「border=”1″」を入れておくと、初心者でも枠線が表示されて見やすくなります。デザインを整える場合は次の見出しでCSSを使います。

3.よく使う属性の解説（border・colspan・rowspanなど）

HTMLの表を作るときに、少しだけ便利な「属性」を知っておくと、より実用的なレイアウトが作れます。
ここでは初心者でも使いやすい代表的な属性を紹介します。

border属性（枠線をつける）

border="1" を <table> に加えると、表全体に枠線が表示されます。　*”1″は1pxの線という意味
枠線がないと構造がわかりにくくなるので、学習時や試作ではとても便利です。

colspan属性（セルを横に結合）

colspan="2" のように書くと、セルが横に2つ分結合されます。
1行目に「商品一覧」などの見出しを横長で入れたいときに便利。

rowspan属性（セルを縦に結合）

rowspan="2" と書くと、セルが縦に2行分結合されます。
項目が複数行にまたがるときに便利です。

説明付きHTMLコード

<table border="1">
  <tr>
    <th colspan="2">商品一覧</th>       <!-- 横に2列分つなぐ -->
  </tr>
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td rowspan="2">りんご</td>         <!-- 縦に2行分つなぐ -->
    <td>100円</td>
  </tr>
  <tr>
    <td>150円（大）</td>
  </tr>
</table>

商品一覧
商品名	価格
りんご	100円
りんご	150円（大）

ポイントまとめ

border="1" は視認性向上のためによく使う
colspan と rowspan は表を整えるための「セル結合」用
結合するセルの位置や数に注意しないとレイアウトが崩れる

💡 セルの結合は、特にスケジュール表や請求書風のレイアウトなどでよく使います。

4.表をCSSで装飾してみよう

HTMLだけで表を作ると、見た目が質素で古い印象になりがちです。
そこで、CSSを使って表のデザインを整えると、読みやすく・美しくなります。

ここでは、初心者にもわかりやすい4つの装飾ポイントを紹介します。

表に枠線をつける（border）

table, th, td {
  border: 1px solid #333;
}

表全体に1本線の枠をつけます。table、th、tdすべてに適用。

セルの隙間をなくす（border-collapse）

table {
  border-collapse: collapse;
}

通常は枠線が二重になりますが、これでスッキリ1本線になります。

セルに余白をつけて読みやすく（padding）

th, td {
  padding: 8px;
}

文字が窮屈に見える問題を解決します。

偶数行の背景色（nth-child）

tr:nth-child(even) {
  background-color: #f9f9f9;
}

しましま模様（ストライプ）になり、読みやすさがアップします。

これらをまとめたHTML＋CSSコード

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #333;
    padding: 8px;
    text-align: left;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table>
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>120円</td>
  </tr>
</table>

商品名	価格
りんご	100円
バナナ	120円

5.よくある注意点・初心者のつまずき

HTMLの表（<table>）はシンプルなようで、初心者がつまずきやすいポイントもいくつかあります。
ここでは、よくあるミスや注意点をまとめて解説します。

<tr>の中に直接<td>や<th>を書かないと表示されない

誤り例（NG）

<table>
  <td>間違った書き方</td>
</table>

➡️ <td>や<th>は必ず<tr>（行）の中に入れる必要があります。

表の見た目が地味＝CSSで装飾が必要

HTMLだけの表は↓のようにとても簡素です：

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

➡️ デザインを整えるには、borderやpaddingなどをCSSで加える必要があります。

スマホで表が崩れる（レスポンシブ非対応）

デフォルトの<table>は、画面幅に収まりきらないと横スクロールになるなど、スマホでは見づらいことがあります。

➡️ レスポンシブ対応には、以下のようにoverflow-x: autoでスクロール可能にする方法が一般的です。

説明付きHTML

<div style="overflow-x: auto;">
  <table>
    ...
  </table>
</div>

項目	内容
注意点	スマホでは横にスクロールできるようにすると良い

💡この方法はスマホでも表がはみ出さず、左右にスライドできるようになるので実務でもよく使われます。

6.まとめ

この記事では、HTMLの表を作るために必要な基本タグとその使い方、そしてCSSでの装飾方法までを解説しました。
初心者がつまずきやすいポイントも押さえたので、これからの実践に役立ててください。

おさらいポイント

表は <table> の中に <tr>（行）、その中に <td> や <th>（セル）を入れて構成する
見出しには <th>、データには <td> を使う
border、colspan、rowspan で表の見た目と構造を調整できる
CSSで border-collapse、padding、nth-child を使うと読みやすくなる
スマホ対応には overflow-x: auto でスクロール可能にするのが有効

次に進むためのおすすめステップ

表を使った スケジュール表や料金表の実装
CSSでさらにスタイリッシュな表にする応用（hover効果、カラーテーマなど）
モバイル対応のテーブルデザインを試してみる

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #333;
    padding: 8px;
    text-align: left;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<div style="overflow-x: auto;">
  <table>
    <tr>
      <th>項目</th>
      <th>内容</th>
    </tr>
    <tr>
      <td>タグ構造</td>
      <td><table> > <tr> > <td>/<th></td>
    </tr>
    <tr>
      <td>装飾</td>
      <td>border、padding、nth-child などCSSで整える</td>
    </tr>
    <tr>
      <td>スマホ対応</td>
      <td>overflow-x: auto を使ってスクロール可能に</td>
    </tr>
  </table>
</div>

項目	内容
タグ構造	<table> > <tr> > <td>/<th>
装飾	border、padding、nth-child などCSSで整える
スマホ対応	overflow-x: auto を使ってスクロール可能に