HTMLテーブルの作り方【table・tr・td解説】

HTML テーブルとは？

ウェブページでよく見る「表」は、HTML テーブルで作られています。時間割・成績表・商品一覧など、データを行と列に整理して表示するときに使います。

この記事では、HTMLテーブルの作り方を初心者向けにわかりやすく解説します。table・tr・th・td の4つのタグを覚えれば、基本的な表が作れます。

テーブルを作る4つのタグ

基本のテーブル

<table>
  <tr>
    <th>名前</th>
    <th>教科</th>
    <th>点数</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>数学</td>
    <td>85点</td>
  </tr>
  <tr>
    <td>鈴木</td>
    <td>英語</td>
    <td>92点</td>
  </tr>
</table>

構造は「テーブル全体 → 行 → セル」の順で入れ子にします。

📖 詳しくはdivとspanの違いで解説しています。

thead・tbody・tfootで構造を整える

大きなテーブルでは、<thead>（ヘッダー行）・<tbody>（データ行）・<tfoot>（フッター行）で区分けすると、コードが読みやすくなります。

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>個数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>150円</td>
      <td>3個</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>200円</td>
      <td>1本</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>650円</td>
      <td>—</td>
    </tr>
  </tfoot>
</table>

セルを結合する（colspan・rowspan）

複数のセルを1つにまとめることができます。

• colspan="数"：横方向に結合（列をまたぐ）
• rowspan="数"：縦方向に結合（行をまたぐ）

<table>
  <tr>
    <th colspan="2">前期（4〜9月）</th>
  </tr>
  <tr>
    <td>4月</td>
    <td>5月</td>
  </tr>
</table>

👉 ブロック要素とインライン要素も参考にしてください。

CSSでテーブルをデザインする

table {
  width: 100%;
  border-collapse: collapse; /* セル間の隙間をなくす */
}

th, td {
  border: 1px solid #ccc;
  padding: 10px 16px;
  text-align: left;
}

th {
  background-color: #0d9488;
  color: white;
}

tr:nth-child(even) {
  background-color: #f0f9ff; /* 偶数行に背景色 */
}

border-collapse: collapse を指定すると、セルの境界線が重ならずきれいに表示されます。

🔥 HTMLリンクの作り方で実践してみましょう。

テーブルをCSSで見やすくするコツ

HTMLだけで作ったテーブルは、枠線がなくて見にくいことがあります。CSSを使って見やすく整えましょう。

コツ1：枠線をつける

border-collapseプロパティをcollapseに設定すると、セル同士の枠線が1本にまとまります。これがないと、枠線が二重に表示されてしまいます。

コツ2：余白を入れる

セルの中にpaddingを設定すると、文字と枠線の間に余白ができて読みやすくなります。8px〜12pxくらいがおすすめです。

コツ3：交互に背景色をつける

偶数行と奇数行で背景色を変えると、行を目で追いやすくなります。CSSの擬似クラス「nth-child(even)」を使えば、偶数行だけに色をつけられます。

コツ4：ヘッダー行を目立たせる

theadの中のセルに背景色をつけたり、文字を太字にしたりすると、見出し行が一目でわかります。

テーブルを使うべき場面と使わない場面

テーブルは「データを表形式で見せたいとき」に使います。たとえば時間割、成績表、料金表、比較表などです。

一方、ページのレイアウト（横並びや段組み）にテーブルを使うのは避けましょう。昔はテーブルでレイアウトを組むことがありましたが、今はflexboxやグリッドを使うのが正しい方法です。テーブルはあくまで「表データ」のためのタグです。

テーブルのアクセシビリティ

テーブルを作るとき、アクセシビリティ（誰にとっても使いやすいこと）にも気を配りましょう。

ポイント1：theadとtbodyを使い分ける

theadで見出し行、tbodyでデータ行を囲みます。スクリーンリーダーがテーブルの構造を正しく読み上げるために必要です。

ポイント2：thタグを使う

見出しセルにはtdではなくthタグを使いましょう。thタグを使うと、スクリーンリーダーが「これは見出しです」と認識してくれます。

ポイント3：captionタグでテーブルの説明を書く

tableタグの直後にcaptionタグを書くと、テーブルの内容を説明するタイトルをつけられます。「2年3組の時間割」のように、何のテーブルかがわかる説明を書きましょう。

スマホでテーブルを見やすくする工夫も大切です。テーブルは横幅が広くなりがちなので、スマホでは画面からはみ出すことがあります。親要素にoverflow-x: auto;を設定すると、横スクロールで全体を見られるようになります。ユーザーが情報を見逃さないための配慮です。

まとめ

HTMLの基礎はHTML入門で復習できます。テーブルのストライプ模様はnth-childセレクタで実装できます。

あわせて読みたい記事

• HTMLとは？初心者向け解説 — HTML基礎に戻る
• HTMLでアクセシビリティを高める方法 — テーブルのアクセシビリティ
• CSSのnth-childセレクタ — ストライプ模様の実装
• レスポンシブデザインの作り方 — テーブルのレスポンシブ対応
• marginとpaddingの違い — テーブルの余白調整
• HTMLテーブルの応用 — テーブル応用