<table>: TABLE 要素

最終更新：2026-10-13

<table>TABLE 要素

<table> 要素はデータを表形式で表示します。行（<tr>）とセル（<td>/<th>）で構成され、<thead>/<tbody>/<caption> を伴うことが多いです。

カテゴリ	テーブル
コンテンツモデル	任意の <caption>、0 個以上の <colgroup>、0 個以上の <thead>/<tbody>/<tfoot>、<tr>
許可される親要素	フローコンテンツを受け入れる要素
閉じタグ	必要 `</table>` タグ
ステータス	標準

📝 構文

<table>
  <tr>
    <th>見出し</th>
    <td>データ</td>
  </tr>
</table>

すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<table>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

警告： ページレイアウト（ナビやサイドバー）にテーブルを使わないでください。それは CSS の役目です。テーブルは表データ専用です。

❓ よくある質問

Qtable でページのレイアウトはまだ作れますか？

A作るべきではありません。10年以上前に廃れたやり方で、テーブルレイアウトはアクセシビリティ・モバイル対応・意味の面で害を及ぼします。テーブルは実際の二次元データ（成績表・価格表・比較一覧）だけに使います。レイアウトは Flexbox と Grid に任せましょう。

Qtable の行には tbody を書く必要がありますか？

A書かなくても大丈夫です。tbody を省略すると、ブラウザのパーサーが自動で <tr> を暗黙の tbody に包みます（DOM 上には常に存在します）。tbody を明示する利点は、それ単体にスタイルを当てられることや、thead/tfoot と組み合わせて表頭の固定などの高度な操作ができることです。

Qレスポンシブなテーブルはどう作りますか？

Aテーブルは狭い画面が苦手です。定番の方法は、外側のコンテナに overflow-x: auto を付けて横スクロール（最も簡単）、狭い画面では行をカードに変える（display: block ＋ data-label）、最初の列を固定する、の3つです。データ列が5列を超えるなら横スクロール方式を優先しましょう。