thead・tbody・tfootの正しい使い分け【完全ガイド】CSS/JS/印刷対応まで網羅

この記事で学べること

• thead・tbody・tfoot の HTML仕様と正しい使い方
• ブラウザの自動補完動作と省略時のリスク
• CSS で実現するヘッダー固定・tbody スクロール・印刷改ページ
• JavaScript での動的テーブル操作（行追加・ソート・フィルタ）
• アクセシビリティ対応（スクリーンリーダー・ARIA属性）
• レスポンシブテーブルの実装パターン
• 実務で頻出するミスと対処法

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>単価</th>
      <th>数量</th>
      <th>小計</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="3">合計</th>
      <td>15,000円</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>ノートPC</td>
      <td>5,000円</td>
      <td>2</td>
      <td>10,000円</td>
    </tr>
    <tr>
      <td>マウス</td>
      <td>2,500円</td>
      <td>2</td>
      <td>5,000円</td>
    </tr>
  </tbody>
</table>

注意：上記のコードでは <tfoot> が <tbody> より前に記述されていますが、ブラウザは thead → tbody → tfoot の順に描画します。HTML5 では tfoot を tbody の後に書くことも許可されています。

ポイント：<tbody> は複数配置できます。データを論理的なグループに分けたい場合（例：部署ごと、カテゴリごと）に活用できます。

<table>
  <thead>
    <tr>
      <th scope="col">社員番号</th>
      <th scope="col">氏名</th>
      <th scope="col">部署</th>
      <th scope="col">入社年</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>田中太郎</td>
      <td>開発部</td>
      <td>2020</td>
    </tr>
  </tbody>
</table>

<thead>
  <!-- 1行目: 大分類 -->
  <tr>
    <th rowspan="2">商品</th>
    <th colspan="2">上半期</th>
    <th colspan="2">下半期</th>
  </tr>
  <!-- 2行目: 小分類 -->
  <tr>
    <th>売上</th>
    <th>利益</th>
    <th>売上</th>
    <th>利益</th>
  </tr>
</thead>

/* HTMLソースコード */
<table>
  <tr>
    <td>データ1</td>
  </tr>
</table>

/* ブラウザが構築するDOM */
<table>
  <tbody>  <!-- 自動挿入される -->
    <tr>
      <td>データ1</td>
    </tr>
  </tbody> <!-- 自動挿入される -->
</table>

注意：この自動補完により、table.children や table > tr といった CSS セレクタ・JavaScript の操作が意図どおりに動かないケースがあります。後述のトラブルシューティングで詳しく解説します。

<table>
  <thead>
    <tr>
      <th>氏名</th>
      <th>役職</th>
    </tr>
  </thead>

  <!-- 開発部 -->
  <tbody class="dept-dev">
    <tr><td>田中</td><td>リーダー</td></tr>
    <tr><td>佐藤</td><td>メンバー</td></tr>
  </tbody>

  <!-- 営業部 -->
  <tbody class="dept-sales">
    <tr><td>鈴木</td><td>マネージャー</td></tr>
    <tr><td>高橋</td><td>メンバー</td></tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
      <th>経費</th>
      <th>利益</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1月</td><td>500万</td><td>300万</td><td>200万</td></tr>
    <tr><td>2月</td><td>600万</td><td>350万</td><td>250万</td></tr>
    <tr><td>3月</td><td>700万</td><td>400万</td><td>300万</td></tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <td>1,800万</td>
      <td>1,050万</td>
      <td>750万</td>
    </tr>
    <tr>
      <th>平均</th>
      <td>600万</td>
      <td>350万</td>
      <td>250万</td>
    </tr>
  </tfoot>
</table>

ポイント：この印刷時の繰り返し動作は CSS の display: table-header-group / display: table-footer-group によるものです。ただし、ブラウザによってサポート状況が異なるため、印刷プレビューで必ず確認しましょう。

<!-- HTML4 時代の正式な順序 -->
<table>
  <thead>...</thead>  <!-- 1. ヘッダー -->
  <tfoot>...</tfoot>  <!-- 2. フッター（先に記述） -->
  <tbody>...</tbody>  <!-- 3. ボディ -->
</table>

<!-- HTML5 で推奨される自然な順序 -->
<table>
  <thead>...</thead>  <!-- 1. ヘッダー -->
  <tbody>...</tbody>  <!-- 2. ボディ -->
  <tfoot>...</tfoot>  <!-- 3. フッター（後に記述） -->
</table>

// HTMLソース上は tbody がない
// <table id="myTable"><tr><td>A</td></tr></table>

const table = document.getElementById('myTable');

// 直感的にはこれで行が取れそうだが...
console.log(table.children.length);   // 1（tr ではなく tbody）
console.log(table.children[0].tagName); // "TBODY"

// 正しい取得方法
console.log(table.tBodies[0].rows.length); // 1
console.log(table.rows.length);              // 1（rows は全行を返す）

/* これは効かない（tbody が自動挿入されるため） */
table > tr {
  background: #f0f0f0;
}

/* 正しい書き方 */
table > tbody > tr {
  background: #f0f0f0;
}

/* または子孫セレクタ（こちらは tbody の有無に関係なく効く） */
table tr {
  background: #f0f0f0;
}

/* ヘッダー: ダーク背景 + 白文字 */
thead {
  background: #1e293b;
  color: #fff;
}

thead th {
  padding: 12px 16px;
  font-weight: 600;
  text-align: left;
  letter-spacing: 0.05em;
}

/* ボディ: 交互行の色分け */
tbody tr:nth-child(even) {
  background: #f8fafc;
}

tbody tr:hover {
  background: #e2e8f0;
  transition: background 0.2s ease;
}

/* フッター: 強調表示 */
tfoot {
  background: #f1f5f9;
  font-weight: 700;
  border-top: 2px solid #334155;
}

/* テーブルを囲むコンテナ */
.table-container {
  max-height: 400px;
  overflow-y: auto;
}

/* thead 内の th を固定 */
thead th {
  position: sticky;
  top: 0;
  background: #1e293b;
  color: #fff;
  z-index: 10;
  /* スクロール時にボーダーが消えないように */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

注意：position: sticky は thead 自体ではなく、th 要素に適用する必要があります。thead に sticky を指定しても、多くのブラウザでは正しく動作しません。また、親要素に overflow: hidden があると sticky が無効になります。

table {
  width: 100%;
  border-collapse: collapse;
}

thead, tbody, tfoot {
  display: block;  /* テーブルレイアウトを解除 */
}

tbody {
  height: 300px;
  overflow-y: auto;
}

/* 列幅を固定で揃える */
thead tr, tbody tr, tfoot tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

注意：display: block に切り替えるとテーブル本来のレイアウトが失われ、列幅の自動調整が効かなくなります。table-layout: fixed と固定幅で対応しますが、前述の sticky ヘッダー方式のほうが実務では使いやすいです。

/* tbody 同士の間にスペースと線を入れる */
tbody + tbody {
  border-top: 3px solid #0284c7;
}

/* 各 tbody の最初の行にクラス名的な装飾 */
tbody:nth-of-type(odd) {
  background: #fafafa;
}

tbody:nth-of-type(even) {
  background: #f0f9ff;
}

tfoot {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  font-weight: 700;
}

tfoot td, tfoot th {
  padding: 12px 16px;
  border-top: 2px solid #334155;
  font-size: 1.05em;
}

const table = document.getElementById('dataTable');
const tbody = table.tBodies[0];

// 方法1: insertRow() + insertCell()
const row = tbody.insertRow();
row.insertCell().textContent = '田中太郎';
row.insertCell().textContent = '開発部';
row.insertCell().textContent = '2020';

// 方法2: innerHTML（大量データの一括追加に高速）
tbody.innerHTML += '<tr><td>佐藤花子</td><td>営業部</td><td>2021</td></tr>';

// 方法3: DocumentFragment（大量追加のベストプラクティス）
const fragment = document.createDocumentFragment();
const data = [
  ['山田次郎', '総務部', '2019'],
  ['鈴木三郎', '経理部', '2022']
];

data.forEach(([name, dept, year]) => {
  const tr = document.createElement('tr');
  tr.innerHTML = `<td>${name}</td><td>${dept}</td><td>${year}</td>`;
  fragment.appendChild(tr);
});
tbody.appendChild(fragment);

ポイント：insertRow() を table に対して呼ぶと、最後の tbody（なければ自動生成された tbody）に行が追加されます。意図したセクションに追加するには、必ず tbody.insertRow() のように対象セクションを明示しましょう。

function sortTable(table, colIndex, ascending = true) {
  const tbody = table.tBodies[0];
  const rows = Array.from(tbody.rows);

  rows.sort((a, b) => {
    const aText = a.cells[colIndex].textContent.trim();
    const bText = b.cells[colIndex].textContent.trim();

    // 数値として比較可能ならば数値比較
    const aNum = parseFloat(aText);
    const bNum = parseFloat(bText);
    if (!isNaN(aNum) && !isNaN(bNum)) {
      return ascending ? aNum - bNum : bNum - aNum;
    }

    // 文字列比較
    return ascending
      ? aText.localeCompare(bText, 'ja')
      : bText.localeCompare(aText, 'ja');
  });

  // ソート結果を tbody に反映
  rows.forEach(row => tbody.appendChild(row));
}

// thead の th にクリックイベントを設定
const table = document.getElementById('sortableTable');
let ascending = true;

table.tHead.querySelectorAll('th').forEach((th, index) => {
  th.style.cursor = 'pointer';
  th.addEventListener('click', () => {
    sortTable(table, index, ascending);
    ascending = !ascending;
  });
});

function filterTable(table, keyword) {
  const tbody = table.tBodies[0];
  const lowerKeyword = keyword.toLowerCase();

  Array.from(tbody.rows).forEach(row => {
    const text = row.textContent.toLowerCase();
    row.style.display = text.includes(lowerKeyword)
      ? '' : 'none';
  });
}

// 検索入力フィールドと連携
document.getElementById('searchInput')
  .addEventListener('input', (e) => {
    filterTable(
      document.getElementById('dataTable'),
      e.target.value
    );
  });

function updateTotals(table) {
  const tbody = table.tBodies[0];
  const tfoot = table.tFoot;

  if (!tfoot) return;

  // 各列の合計を計算（2列目以降が数値と想定）
  const colCount = tbody.rows[0]?.cells.length || 0;
  const totals = new Array(colCount).fill(0);

  Array.from(tbody.rows).forEach(row => {
    Array.from(row.cells).forEach((cell, i) => {
      const num = parseFloat(
        cell.textContent.replace(/[^0-9.-]/g, '')
      );
      if (!isNaN(num)) totals[i] += num;
    });
  });

  // tfoot のセルに反映
  const footCells = tfoot.rows[0].cells;
  totals.forEach((total, i) => {
    if (i > 0 && footCells[i]) {
      footCells[i].textContent =
        total.toLocaleString() + '円';
    }
  });
}

<!-- caption でテーブルの概要を提供 -->
<table aria-describedby="table-desc">
  <caption>2025年度 四半期売上報告</caption>

  <thead>
    <tr>
      <th scope="col">四半期</th>
      <th scope="col">売上</th>
      <th scope="col">前年比</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>1,200万円</td>
      <td>+15%</td>
    </tr>
    <tr>
      <th scope="row">Q2</th>
      <td>1,500万円</td>
      <td>+22%</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">年間合計</th>
      <td>2,700万円</td>
      <td>+18%</td>
    </tr>
  </tfoot>
</table>

<thead>
  <tr>
    <th
      scope="col"
      aria-sort="ascending"
      role="columnheader"
      tabindex="0"
    >
      氏名 ▲
    </th>
    <th
      scope="col"
      aria-sort="none"
      role="columnheader"
      tabindex="0"
    >
      部署
    </th>
  </tr>
</thead>

@media print {
  /* thead を各ページの先頭に繰り返し表示 */
  thead {
    display: table-header-group;
  }

  /* tfoot を各ページの末尾に繰り返し表示 */
  tfoot {
    display: table-footer-group;
  }

  /* tbody は通常のテーブル行グループとして表示 */
  tbody {
    display: table-row-group;
  }

  /* 行の途中での改ページを避ける */
  tr {
    page-break-inside: avoid;
  }

  /* 印刷時の背景色を有効化 */
  thead th {
    background: #1e293b;
    color: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  min-width: 600px;
}

<tbody>
  <tr>
    <td data-label="氏名">田中太郎</td>
    <td data-label="部署">開発部</td>
    <td data-label="入社年">2020</td>
  </tr>
</tbody>

@media (max-width: 768px) {
  /* thead を非表示 */
  thead {
    display: none;
  }

  /* 各行をカードとして表示 */
  tbody tr {
    display: block;
    margin-bottom: 1em;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5em;
  }

  tbody td {
    display: flex;
    justify-content: space-between;
    padding: 0.5em 0.75em;
    border-bottom: 1px solid #f1f5f9;
  }

  /* data-label で列見出しを疑似要素として表示 */
  tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #334155;
  }

  /* tfoot もカード型に */
  tfoot tr {
    display: block;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 0.5em;
    font-weight: 700;
  }
}

ポイント：カード型レイアウトでは data-label 属性に列名を重複して記述する必要があります。JavaScript で自動設定する方法もありますが、thead が非表示であってもDOMには残るため、スクリーンリーダーは引き続きヘッダー情報を利用できます。

<table class="invoice-table">
  <caption>請求明細（2025年3月分）</caption>
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">品目</th>
      <th scope="col">単価</th>
      <th scope="col">数量</th>
      <th scope="col">金額</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Webサイト制作</td>
      <td>500,000</td>
      <td>1</td>
      <td>500,000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>保守・運用（月額）</td>
      <td>30,000</td>
      <td>1</td>
      <td>30,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="4" scope="row">小計</th>
      <td>530,000</td>
    </tr>
    <tr>
      <th colspan="4" scope="row">消費税（10%）</th>
      <td>53,000</td>
    </tr>
    <tr>
      <th colspan="4" scope="row">合計</th>
      <td><strong>583,000</strong></td>
    </tr>
  </tfoot>
</table>

<table>
  <thead>
    <tr>
      <th></th> <!-- 空セル -->
      <th scope="col">月曜</th>
      <th scope="col">火曜</th>
      <th scope="col">水曜</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1限</th>
      <td>数学</td>
      <td>英語</td>
      <td>国語</td>
    </tr>
    <tr>
      <th scope="row">2限</th>
      <td>理科</td>
      <td>社会</td>
      <td>音楽</td>
    </tr>
  </tbody>
</table>

<table id="userTable">
  <thead>
    <tr>
      <th>
        <input type="checkbox"
               id="selectAll">
      </th>
      <th>ID</th>
      <th>名前</th>
      <th>メール</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody aria-live="polite">
    <!-- JavaScript で動的に行を追加 -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5">
        <button id="deleteSelected">
          選択項目を削除
        </button>
        <span id="rowCount">
          0件表示中
        </span>
      </td>
    </tr>
  </tfoot>
</table>

// 誤り: table.children で直接 tr を期待
const table = document.querySelector('table');
// table.children[0] は tbody であり tr ではない

// 正解1: table.rows を使う（全セクションの行）
const allRows = table.rows;

// 正解2: tbody を明示的に取得
const dataRows = table.tBodies[0].rows;

// 正解3: querySelectorAll
const rows = table.querySelectorAll('tbody tr');

<!-- 誤り: thead 内で td を使用 -->
<thead>
  <tr>
    <td>名前</td>  <!-- th を使うべき -->
    <td>年齢</td>  <!-- th を使うべき -->
  </tr>
</thead>

<!-- 正しい: thead 内で th を使用 -->
<thead>
  <tr>
    <th scope="col">名前</th>
    <th scope="col">年齢</th>
  </tr>
</thead>

/*
 * 複数 tbody がある場合:
 * tbody:first-of-type  → 1つ目の tbody
 * tbody:nth-of-type(2) → 2つ目の tbody
 *
 * 各 tbody 内の :nth-child は
 * その tbody 内で独立してカウントされる
 */

/* 1つ目の tbody の奇数行 */
tbody:first-of-type tr:nth-child(odd) {
  background: #eff6ff;
}

/* 2つ目の tbody の奇数行 */
tbody:nth-of-type(2) tr:nth-child(odd) {
  background: #f0fdf4;
}

この記事のポイント

• thead は列見出しのグループ。<th scope="col"> と組み合わせてアクセシビリティを向上
• tbody は本体データのグループ。省略してもブラウザが自動補完するが、明示記述を推奨
• tfoot は集計・補足のグループ。印刷時に各ページ末尾で繰り返し表示される
• CSS では position: sticky を th に適用してヘッダー固定、tbody のスタイル分離が可能
• JavaScript では table.tHead・table.tBodies・table.tFoot で安全にアクセス
• アクセシビリティ では、スクリーンリーダーが thead の th を列見出しとして利用
• 印刷 では、thead/tfoot がページをまたいで繰り返し表示される
• レスポンシブ では、thead を非表示にして data-label で列名を表示するカード型変換が有効