HTMLで表（table）の使い方を徹底解説｜初心者向けガイド

Webページでデータを整理して表示したいときに欠かせないのが**表（table）**です。商品一覧やスケジュール、料金表など、表を正しく使えると見やすいページが作れます。この記事では、HTMLのtableタグの基礎から応用までを、初心者でも理解できるように丁寧に解説します。

🔗 関連記事： HTMLの基本構文まとめ
🔗 関連記事： HTMLのセマンティックタグ徹底解説

1. tableタグの基本構造

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

• <table> … 表全体を囲む
• <tr> … 行を表す
• <th> … 見出しセル（太字・中央寄せになる）
• <td> … データセル

サンプルコード

<table border="1">
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
    <td>あり</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>80円</td>
    <td>なし</td>
  </tr>
</table>

表示イメージ

2. 表のレイアウトを整える

表はそのままでも使えますが、属性やCSSを使うと見やすく整えられます。

border-collapseで線をまとめる

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
}

3. 行や列をまとめる（rowspan・colspan）

列を結合（colspan）

<tr>
  <td colspan="2">合計</td>
  <td>180円</td>
</tr>

行を結合（rowspan）

<tr>
  <td rowspan="2">バナナ</td>
  <td>50円</td>
  <td>あり</td>
</tr>
<tr>
  <td>60円</td>
  <td>あり</td>
</tr>

4. 表に見出しやキャプションをつける

captionタグ

表のタイトルを表示します。

<table>
  <caption>フルーツ価格一覧</caption>
  ...
</table>

5. thead・tbody・tfootで表を構造化

大きな表を作るときは、<thead>・<tbody>・<tfoot>を使うと便利です。

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
      <td>あり</td>
    </tr>
    <tr>
      <td>みかん</td>
      <td>80円</td>
      <td>なし</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">平均価格</td>
      <td>90円</td>
    </tr>
  </tfoot>
</table>

6. アクセシビリティを意識する

表はスクリーンリーダーなどでも読み上げられるため、scope属性でセルの役割を明示すると親切です。

<th scope="col">商品名</th>
<th scope="col">価格</th>
<th scope="col">在庫</th>

まとめ

• 基本は <table> → <tr> → <th> / <td> の構造
• rowspan・colspan でセルを結合可能
• thead・tbody・tfoot で表を整理
• CSSで見やすくデザイン
• アクセシビリティ対応も大切

表を正しく使えるようになると、Webページの情報をきれいに整理して表示できます。

🔗 関連記事： HTMLのaタグの使い方まとめ
🔗 関連記事： CSSの基本プロパティ解説