初心者でも簡単！HTMLで表（テーブル）を作る基本とデザインのコツ

ホームページやブログにデータを見やすく並べたいとき、表（テーブル）はとても便利です。

しかしHTML（エイチティーエムエル）で表を作ろうとすると、どのタグを使うのか迷ってしまう方も多いのではないでしょうか？

この記事では、初心者の方にもわかりやすいようにHTMLで表を作る基本から、よく使う応用テクニック、デザインを整えるポイントまでを詳しく紹介します。

HTMLで表を作る基本タグ

表に使用する主要なタグ

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

タグ	意味	用途
`<table>`	表全体を囲む	表の開始と終了を示す
`<tr>`	表の行（ロー）を示す	横一列のデータをまとめる
`<th>`	見出しセル（ヘッダー）	列や行のタイトル
`<td>`	データセル（普通のマス）	実際のデータを入れる

基本的な表の構造

シンプルな表の例

以下のコードを見てください。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>28</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>鈴木</td>
    <td>34</td>
    <td>デザイナー</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>25</td>
    <td>営業</td>
  </tr>
</table>

これをブラウザで表示すると、「名前」「年齢」「職業」のヘッダーがあり、その下に各人のデータが並ぶ表ができます。

表の構造を理解しよう

入れ子構造の重要性

HTMLの表は以下のような入れ子構造になっています：

table（表全体）
 └ tr（行）
    ├ th（見出しセル）
    └ td（データセル）

重要なポイント

<table>タグが表全体を囲む
<tr>タグが各行を作る
<th>や<td>が各セルを作る
必ず正しい順序で閉じタグを書く

より構造化された表

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ノートパソコン</td>
      <td>98,000円</td>
      <td>5台</td>
    </tr>
    <tr>
      <td>マウス</td>
      <td>2,500円</td>
      <td>50個</td>
    </tr>
  </tbody>
</table>

追加タグの説明

<thead>：表のヘッダー部分
<tbody>：表のデータ部分
<tfoot>：表のフッター部分（必要な場合）

HTMLの表はtable → tr → th or tdという入れ子構造で作るのが基本です。

次は、表をもっと見やすくするためのデザイン方法について紹介します。

CSSで表をデザインしよう

基本的なスタイリング

HTMLだけだと表はただのシンプルな枠なしデータです。

CSS（シーエスエス）を使うことで、枠線や背景色、余白をつけて見やすくできます。

枠線をつける基本的な方法

<style>
table {
  border-collapse: collapse; /* 枠線を結合 */
  width: 100%; /* 幅を100%に */
}

th, td {
  border: 1px solid #ddd; /* 薄いグレーの枠線 */
  padding: 12px; /* 内側の余白 */
  text-align: left; /* 左揃え */
}

th {
  background-color: #f2f2f2; /* ヘッダーの背景色 */
  font-weight: bold; /* 太字 */
}
</style>

より洗練されたデザイン

<style>
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

th {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  text-align: left;
}

td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

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

tr:hover {
  background-color: #f5f5f5; /* マウスオーバー時の色 */
}
</style>

レスポンシブデザインへの対応

スマートフォン対応

<style>
@media screen and (max-width: 768px) {
  table {
    font-size: 14px;
  }
  
  th, td {
    padding: 8px;
  }
}

@media screen and (max-width: 480px) {
  table {
    font-size: 12px;
  }
  
  th, td {
    padding: 6px;
    word-break: break-word;
  }
}
</style>

横スクロール対応

<style>
.table-container {
  overflow-x: auto;
}

.table-container table {
  min-width: 600px;
}
</style>

<div class="table-container">
  <table>
    <!-- 表の内容 -->
  </table>
</div>

CSSを使えば簡単にデザインを変えられます。

次は、表でよく使われる便利な属性について説明します。

よく使うHTML表の属性とテクニック

セルの結合（colspan・rowspan）

表でセルを横や縦にまたがせたいときに使います。

colspan（横に結合）

<table>
  <tr>
    <th>項目</th>
    <th colspan="2">2024年実績</th>
  </tr>
  <tr>
    <td>売上</td>
    <td>上半期</td>
    <td>下半期</td>
  </tr>
  <tr>
    <td>利益</td>
    <td>500万円</td>
    <td>750万円</td>
  </tr>
</table>

rowspan（縦に結合）

<table>
  <tr>
    <td rowspan="3">商品A</td>
    <td>サイズS</td>
    <td>1,000円</td>
  </tr>
  <tr>
    <td>サイズM</td>
    <td>1,200円</td>
  </tr>
  <tr>
    <td>サイズL</td>
    <td>1,400円</td>
  </tr>
</table>

複雑な結合の例

<table>
  <tr>
    <th rowspan="2">地域</th>
    <th colspan="2">2023年</th>
    <th colspan="2">2024年</th>
  </tr>
  <tr>
    <th>売上</th>
    <th>利益</th>
    <th>売上</th>
    <th>利益</th>
  </tr>
  <tr>
    <td>東京</td>
    <td>1,000万円</td>
    <td>200万円</td>
    <td>1,200万円</td>
    <td>300万円</td>
  </tr>
</table>

表のキャプション

caption要素の使用

<table>
  <caption>2024年度 売上実績一覧</caption>
  <tr>
    <th>月</th>
    <th>売上</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>500万円</td>
  </tr>
</table>

キャプションのスタイリング

<style>
caption {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}
</style>

並び替え可能な表

JavaScriptを使った並び替え

<table id="sortableTable">
  <thead>
    <tr>
      <th onclick="sortTable(0)">名前 ▲▼</th>
      <th onclick="sortTable(1)">年齢 ▲▼</th>
      <th onclick="sortTable(2)">得点 ▲▼</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中</td>
      <td>28</td>
      <td>85</td>
    </tr>
    <tr>
      <td>鈴木</td>
      <td>34</td>
      <td>92</td>
    </tr>
  </tbody>
</table>

<script>
function sortTable(n) {
  // 並び替え処理（簡易版）
  var table = document.getElementById("sortableTable");
  var switching = true;
  var dir = "asc";
  var switchcount = 0;
  
  while (switching) {
    switching = false;
    var rows = table.rows;
    
    for (var i = 1; i < (rows.length - 1); i++) {
      var shouldSwitch = false;
      var x = rows[i].getElementsByTagName("TD")[n];
      var y = rows[i + 1].getElementsByTagName("TD")[n];
      
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

colspanとrowspanを使うと、表に複雑なレイアウトを簡単に作れます。

最後に、HTMLの表を作るときの注意点について見てみましょう。

HTML表を作るときの注意点とベストプラクティス

アクセシビリティを考慮した表作成

適切な見出しの設定

<table>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">価格</th>
      <th scope="col">在庫数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">ノートPC</th>
      <td>98,000円</td>
      <td>5台</td>
    </tr>
  </tbody>
</table>

scope属性の説明

scope="col"：列の見出しを示す
scope="row"：行の見出しを示す
scope="colgroup"：列グループの見出し
scope="rowgroup"：行グループの見出し

複雑な表での見出し関連付け

<table>
  <tr>
    <th id="name">名前</th>
    <th id="age">年齢</th>
  </tr>
  <tr>
    <td headers="name">田中太郎</td>
    <td headers="age">28</td>
  </tr>
</table>

SEO対策とセマンティックHTML

構造化データの活用

<table>
  <caption>商品比較表</caption>
  <thead>
    <tr>
      <th>機能</th>
      <th>プランA</th>
      <th>プランB</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">価格</th>
      <td>月額1,000円</td>
      <td>月額2,000円</td>
    </tr>
    <tr>
      <th scope="row">容量</th>
      <td>10GB</td>
      <td>100GB</td>
    </tr>
  </tbody>
</table>

表の適切な使用場面

表を使うべき場面

データの比較

商品仕様の比較
価格表
スケジュール表
統計データ

構造化された情報

連絡先一覧
売上実績
成績表
カタログ情報

表を使うべきでない場面

レイアウト目的

<!-- 悪い例：レイアウトのためのテーブル -->
<table>
  <tr>
    <td>ナビゲーション</td>
    <td>メインコンテンツ</td>
    <td>サイドバー</td>
  </tr>
</table>

<!-- 良い例：CSSでレイアウト -->
<div class="layout">
  <nav>ナビゲーション</nav>
  <main>メインコンテンツ</main>
  <aside>サイドバー</aside>
</div>

単純なリスト

<!-- 悪い例：リストをテーブルで -->
<table>
  <tr><td>項目1</td></tr>
  <tr><td>項目2</td></tr>
</table>

<!-- 良い例：適切なリストタグ -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

パフォーマンス最適化

大きな表の処理

仮想スクロール

<style>
.large-table-container {
  height: 400px;
  overflow-y: auto;
}

.large-table-container table {
  width: 100%;
}
</style>

ページング機能

<div class="table-pagination">
  <button onclick="previousPage()">前のページ</button>
  <span>ページ 1 / 10</span>
  <button onclick="nextPage()">次のページ</button>
</div>

モバイル対応の工夫

縦並び表示への変換

<style>
@media screen and (max-width: 600px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
  }
  
  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .responsive-table tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  
  .responsive-table td {
    border: none;
    position: relative;
    padding-left: 50%;
  }
  
  .responsive-table td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
  }
}
</style>

<table class="responsive-table">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="名前">田中太郎</td>
      <td data-label="年齢">28歳</td>
      <td data-label="職業">エンジニア</td>
    </tr>
  </tbody>
</table>

実践的な表の作成例

料金プラン比較表

<table class="pricing-table">
  <caption>料金プラン比較</caption>
  <thead>
    <tr>
      <th scope="col">機能</th>
      <th scope="col">ベーシック</th>
      <th scope="col">スタンダード</th>
      <th scope="col">プレミアム</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">月額料金</th>
      <td>無料</td>
      <td>1,000円</td>
      <td>3,000円</td>
    </tr>
    <tr>
      <th scope="row">ストレージ</th>
      <td>1GB</td>
      <td>10GB</td>
      <td>100GB</td>
    </tr>
    <tr>
      <th scope="row">サポート</th>
      <td>メールのみ</td>
      <td>メール・チャット</td>
      <td>電話・メール・チャット</td>
    </tr>
  </tbody>
</table>

スケジュール表

<table class="schedule-table">
  <caption>週間スケジュール</caption>
  <thead>
    <tr>
      <th scope="col">時間</th>
      <th scope="col">月曜日</th>
      <th scope="col">火曜日</th>
      <th scope="col">水曜日</th>
      <th scope="col">木曜日</th>
      <th scope="col">金曜日</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">9:00-10:00</th>
      <td>会議</td>
      <td>作業</td>
      <td>会議</td>
      <td>作業</td>
      <td>会議</td>
    </tr>
    <tr>
      <th scope="row">10:00-11:00</th>
      <td>作業</td>
      <td>会議</td>
      <td>作業</td>
      <td>会議</td>
      <td>作業</td>
    </tr>
  </tbody>
</table>

商品カタログ表

<table class="product-catalog">
  <caption>商品カタログ</caption>
  <thead>
    <tr>
      <th scope="col">商品画像</th>
      <th scope="col">商品名</th>
      <th scope="col">価格</th>
      <th scope="col">在庫状況</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="product1.jpg" alt="商品1" width="50"></td>
      <td>ワイヤレスマウス</td>
      <td>2,980円</td>
      <td class="in-stock">在庫あり</td>
      <td><button>カートに追加</button></td>
    </tr>
    <tr>
      <td><img src="product2.jpg" alt="商品2" width="50"></td>
      <td>キーボード</td>
      <td>8,980円</td>
      <td class="out-of-stock">在庫切れ</td>
      <td><button disabled>在庫切れ</button></td>
    </tr>
  </tbody>
</table>