0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@chida0818(Tagosaku Suzuki)

【HTML入門】第6章 表

0
Last updated at Posted at 2026-10-14

社員の一覧のように、項目と値を並べて見せたいときは、表を使います。この章では、<table>・<tr>・<th>・<td> の4つのタグで、社員一覧の表を作ります。この表は、第7章で CSS を付け、第10章で社員管理アプリの一覧画面にします。

この章で学ぶこと

  • 表を作る <table>・<tr>・<th>・<td> の役割
  • 表を1行ずつ組み立てる書き方
  • 見出しのマスと、データのマスの違い

6.1 この章で作るもの

この章では、ch06 フォルダーに社員一覧の表のページ list.html を作ります。表に入れる社員のデータは、Spring入門の社員管理アプリと同じ3人です。Chrome で http://localhost/html/ch06/list.html を開くと、次のように表示されるようになります。

list-final.png
図6-1 この章で作る社員一覧の表

この章では HTML だけで表を作るので、罫線（表の線）や背景の色はまだ付きません。見た目は、第7章で CSS を使って整えます。

ファイル 作業 内容
ch06/list.html 新規 社員一覧の表のページ

6.2 list.html を作る

  1. webapp フォルダーを右クリックし、新規 → フォルダー で ch06 フォルダーを作ります（第3章「ch03 フォルダーを作る」）。

  2. ch06 フォルダーを右クリックし、新規 → HTML ファイル で、テンプレート「新規 HTML ファイル (5)」を使って list.html を作ります（第3章「hello.html を作る」）。

  3. <title> を「社員一覧」に書き換え、<body> の中に見出しを書きます。

    ch06/list.html
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>社員一覧</title>
</head>
<body>
  <h1>社員一覧</h1>
</body>
</html>

  4. 保存ボタンか Ctrl + S で保存し、タブの * が消えたことを確認します。

6.3 見出しの行を作る

表は、1行ずつ組み立てます。まず、項目の名前を並べた見出しの行を作ります。

  1. <h1> の下に、緑の行を書き足します。

    ch06/list.html
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>社員一覧</title>
</head>
<body>
  <h1>社員一覧</h1>
  <table>
    <tr>
      <th>社員ID</th>
      <th>氏名</th>
      <th>性別</th>
      <th>年齢</th>
      <th>生年月日</th>
      <th>部署</th>
      <th>住所</th>
    </tr>
  </table>
</body>
</html>

    <table> の中に <tr>、<tr> の中に <th> を書きます。入れ子が1段深くなるごとに、半角スペース2つ分右にずらします（第4章「インデント」）。

  2. 保存ボタンか Ctrl + S で保存し、タブの * が消えたことを確認します。

  3. Chrome で http://localhost/html/ch06/list.html を開きます。

    list-header.png
    図6-2 見出しの行だけの表

    7つの項目の名前が、横1行に並びます。<th> の文字は、太い文字で表示されます。

6.4 社員の行を足す

見出しの行の下に、社員1人ごとに1行ずつ、データの行を足していきます。

  1. 見出しの行の </tr> の下に、雷禅 海皇さんの行を書き足します。

    ch06/list.html（table の部分）
      <table>
    <tr>
      <th>社員ID</th>
      <th>氏名</th>
      <th>性別</th>
      <th>年齢</th>
      <th>生年月日</th>
      <th>部署</th>
      <th>住所</th>
    </tr>
    <tr>
      <td>1</td>
      <td>雷禅 海皇</td>
      <td>男</td>
      <td>26</td>
      <td>2000/06/22</td>
      <td>営業部</td>
      <td>大阪府</td>
    </tr>
  </table>

    データのマスは <td> で書きます。見出しの行と同じ順番で、7つのマスを書きます。

  2. 保存ボタンか Ctrl + S で保存し、タブの * が消えたことを確認します。Chrome で再読み込みします。

    list-row1.png
    図6-3 雷禅 海皇さんの行を足した表

    データの行のマスが、見出しの行のマスと縦にそろって並びます。<td> の文字は、普通の太さで表示されます。

  3. 雷禅 海皇さんの行の </tr> の下に、院照 心愛さんと林檎 星飛さんの行を書き足します。

    ch06/list.html
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>社員一覧</title>
</head>
<body>
  <h1>社員一覧</h1>
  <table>
    <tr>
      <th>社員ID</th>
      <th>氏名</th>
      <th>性別</th>
      <th>年齢</th>
      <th>生年月日</th>
      <th>部署</th>
      <th>住所</th>
    </tr>
    <tr>
      <td>1</td>
      <td>雷禅 海皇</td>
      <td>男</td>
      <td>26</td>
      <td>2000/06/22</td>
      <td>営業部</td>
      <td>大阪府</td>
    </tr>
    <tr>
      <td>2</td>
      <td>院照 心愛</td>
      <td>女</td>
      <td>27</td>
      <td>1999/07/11</td>
      <td>総務部</td>
      <td>京都府</td>
    </tr>
    <tr>
      <td>3</td>
      <td>林檎 星飛</td>
      <td>男</td>
      <td>24</td>
      <td>2001/12/24</td>
      <td>開発部</td>
      <td>東京都</td>
    </tr>
  </table>
</body>
</html>

  4. 保存ボタンか Ctrl + S で保存し、タブの * が消えたことを確認します。Chrome で再読み込みし、3人の行が表示されることを確認します（図6-1）。

【便利な使い方】行はコピーして書き換える

2人目と3人目の行は、雷禅 海皇さんの行（<tr> から </tr> までの9行）をコピーして貼り付け、中の値を書き換えると早く書けます。エディターで行を選んで Ctrl + C でコピーし、貼り付けたい場所で Ctrl + V で貼り付けます。

6.5 解説：表のタグ

表は、4つのタグを入れ子にして作ります。<table> が表全体、<tr> が1行、<th> と <td> が1つのマスです。

ch06-1.png
図6-4 表のタグの入れ子

タグ 意味 中に書くもの
<table> 表全体を囲む <tr>
<tr> 表の1行（table row） <th> または <td>
<th> 見出しのマス（table header）。太い文字で表示される 項目の名前
<td> データのマス（table data） 値

表は、上の行から順に、1行の中では左のマスから順に書きます。HTML の表には「列」を表すタグはありません。1行目の1つ目のマスと、2行目の1つ目のマスが、縦にそろって1つの列になります。そのため、どの行も、同じ数のマスを同じ順番で書く ことが大切です。

【ご注意】マスの数をそろえる

ある行だけ <td> を1つ書き忘れると、その行の値が1つずつ左にずれ、見出しと合わなくなります。たとえば「性別」のマスを忘れると、年齢の「26」が「性別」の列に表示されます。表が崩れたときは、各行の <th> と <td> の数を数えてみてください。

【知識メモ】見出しのマスを th にする理由

<th> と <td> の違いは、太い文字になるかどうかだけではありません。<th> と書くと、そのマスが見出しであることが、ブラウザや画面を読み上げるソフトウェアに伝わります。また、CSS で見出しのマスだけに背景の色を付けることもできます（第7章）。見た目を太くしたいからではなく、見出しだから <th> を使います。

Spring入門の社員一覧画面も、同じ <table>・<tr>・<th>・<td> で作ります。Spring入門では、データの行を1行だけ書いておき、データベースの社員の数だけ、プログラムでその行を繰り返して表示します。

6.6 うまくいかないときは

症状 考えられる原因と対処
値が見出しと違う列に表示される その行の <td> の数や順番が、見出しの行と違います。マスの数を数え、順番を見出しの行と比べてください。
表が1行にまとまらず、文字がばらばらに並ぶ <tr> の書き忘れか、</tr> の閉じ忘れです。インデントを付けて、行ごとに <tr> と </tr> の組があるかを確かめてください。
表の中に書いた文字が、表の上にはみ出して表示される <table> の中で、<td> の外に文字を書いています。表の中の文字は、必ず <th> か <td> の中に書いてください。
表に罫線が付かない 正しい動きです。罫線は第7章の CSS で付けます。

ほかのつまずきは、付録A「よくあるつまずきと対処法」も参考にしてください。

6.7 まとめと確認問題

まとめ

  • 表は、<table>（表全体）・<tr>（1行）・<th>（見出しのマス）・<td>（データのマス）を入れ子にして作る
  • 表は上の行から1行ずつ、1行の中では左のマスから順に書く。列を表すタグは無く、各行の同じ順番のマスが縦にそろって列になる
  • どの行も、同じ数のマスを同じ順番で書く。マスが足りないと、値が左にずれる
  • 見出しのマスは、見出しであることを伝えるために <th> で書く
  • HTML だけでは罫線や背景の色は付かない。見た目は CSS で整える

この章で使ったタグは、付録B「タグの早見表」にまとめています。

確認問題

問1　<table>・<tr>・<th>・<td> は、それぞれ表の何を表しますか。

解答を見る

<table> は表全体、<tr> は1行、<th> は見出しのマス、<td> はデータのマスを表します。

問2　「部署」と「部署の人数」の2列で、見出しの行と、「営業部」「10」のデータの行がある表を書いてください。

解答を見る

次のように書きます。

解答例.html
<table>
  <tr>
    <th>部署</th>
    <th>部署の人数</th>
  </tr>
  <tr>
    <td>営業部</td>
    <td>10</td>
  </tr>
</table>

問3　社員一覧の表で、院照 心愛さんの行だけ、年齢の値が「性別」の列に表示されてしまいました。考えられる原因を答えてください。

解答を見る

院照 心愛さんの行で、性別の <td>（「女」のマス）を書き忘れています。マスが1つ足りないので、年齢から後ろの値が1つずつ左にずれます。

問4　見出しのマスを、<td> ではなく <th> で書くのはなぜですか。

解答を見る

そのマスが見出しであることを、ブラウザや読み上げのソフトウェアに伝えるためです。CSS で見出しのマスだけに見た目を付けることもできます。

前へ

第5章 リンクと画像

次へ

第7章 CSS で見た目を整える

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?