tableタグ・とは？初心者にも分かる使い方と実例ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

tableタグ・とは？

tableタグは、ウェブページで情報を整理して見やすく並べるための基本的なタグです。データを表の形で示すと、読み手が比較しやすくなります。

基本的な構造

表は大きく三つの要素で成り立ちます。tableは表の箱、trは行、thは列の見出し、tdはデータのセルです。なお、ここでは見出しセルにはを、データセルにはを使います。

実際のHTMLでは以下のように書きます。見出しにはを使い、データにはを使います。シンプルな例として、最初の行を見出しとして扱います。

では実際に簡単な表を作ってみましょう。以下は3列の表です。

項目	説明	例
tableタグ	HTMLで表を作る基本的なタグ	<table>の開始
tr	行を作るためのタグ	1行のセルをまとめる
td	データセルを作るタグ	データを格納

表を作る時のコツは、データの意味がはっきりするように見出しを工夫することです。「何のデータか」を最初に分かるようにすることで、読み手が理解しやすくなります。

見出しの数や列の幅は、データの量に応じて調整します。狭すぎると読みづらく、広すぎるとスクロールが多くなります。実用的な幅を考えつつ、必要な情報だけを並べることが大切です。

アクセシビリティの観点からは、見出しセルを th でマークすることにより、スクリーンリーダーが列の意味を理解しやすくなります。ただし今回の例では、シンプルさを重視して head 部分を使わずに最初の行を見出しにしています。

表はデータの比較や集計を楽にしますが、レイアウト目的だけで表を使うのは避けるべきです。デザインの都合だけで表を使うと、情報の伝わり方が難しくなります。代替としては CSS を使ったリストや段組みなど、他の手段を検討しましょう。

最後に、実務で役立つポイントをいくつか紹介します。セルを適切に結合したり、データの並びを揃えたりすることで、見やすさが大きく向上します。また、スマートフォンなどの小さな画面では、横スクロールを活用したり、データを崩さずに見せる工夫が求められます。

tableタグの同意語

テーブル要素

HTMLで表を作るための要素。タグを指し、行（）とセル（

、

）を組み合わせてデータを表形式で表示します。

表要素

表形式のデータを表示するHTMLの要素。行とセルを使ってデータを整理します。

HTMLテーブル

HTMLで表を指す言い方。実装上は <table> 要素を使います。

HTMLの表タグ

HTMLで表を作るタグのこと。主にのことを指します。

表タグ

表構造を作るタグの総称。日本語での呼び方で、

タグを意味します。

テーブルタグ

表を作るHTMLタグの呼び方。

タグを指します。

表組み要素

表を組み立ててデータを整列させるHTML要素。行とセルで構造を作ります。

表形式のHTML要素

データを表形式で表示するHTMLの要素の総称。

とその子要素を含みます。

HTMLの表構造要素

HTMLで表の構造を表す要素のこと。通常は

と head>///

などを指します。

HTMLテーブル要素

HTMLで表を作る要素。データを格納して表示する基本的な構造です。

tableタグの対義語・反対語

ulタグ: データを項目として縦に並べるリスト表示。表のような格子にはせず、情報を箇条書きで整理する。
olタグ: 順序付きリスト。アイテムを番号付きで並べ、表の代わりに連続性と順序を示す。
dlタグ: 定義リスト。用語とその説明をペアで並べ、表形式とは違う意味の対応を表現する。
divタグ: 汎用ブロック要素。レイアウト作成の土台として使われ、表の代替として使う場合は CSS で整列する。
pタグ: 段落。文章を段落で区切って表示する表現で、表形式のデータとは無関係。
spanタグ: インライン要素。テキストの小さな範囲をまとめる役割で、表のセル格子とは別の表示単位。
CSSグリッド: CSS で格子状に要素を並べるレイアウト手法。データを表のように整列する目的にも使えるが、意味は表そのものではない。
CSSフレックス: Flexbox による横並び/縦揃えのレイアウト手法。表格ではなく、柔軟な配置を実現する。
プレーンテキスト表示: 文字だけの表示。セルや罫線などの表形式要素は使われない。
リスト表示: 項目をリストとして連ねて表示する基本的な非表形式のデータ表現。
テーブルレスデザイン: 表を使わず、CSS・リスト・見出しなどで情報を整理するデザイン方針。
見出し＋セクション構造: 見出し（h1など）とセクションを使って階層的に情報を整理する方法。表の格子配置は用いない。

tableタグの共起語

HTML

ウェブページの構造を定義するマークアップ言語。tableタグはこのHTMLの中で表を作る要素の一つです。

表

データを行と列で整理した、視覚的に読みやすいデータの集合。HTMLでは表を表す要素としてtableが使われます。

テーブル構造

thead/tbody/tfoot、tr、td/th など、表を構成する部品の全体像。

table要素

HTMLの表を表す要素。タグに対応します。

表の横方向の行を表す要素。複数のtd/thを横に並べてデータを配置します。

データセル。表の中の実データを格納するセルです。

ヘッダセル。列見出しや行見出しとして使われます。

thead

表のヘッダ部分をまとめるセクション。ヘッダ行を含みます。

tbody

表の本体部分をまとめるセクション。データセルを多く含みます。

tfoot

表のフッタ部分をまとめるセクション。要約や合計などを配置します。

caption

表全体の説明を表示するキャプション（タイトル）要素。

colgroup

列のグループを定義する要素。列ごとの設定を適用できます。

col

列の設定を定義する要素。主に colspan などと組み合わせて使います。

colspan

セルを横方向に複数列へまたがせる属性。データを横断して表示します。

rowspan

セルを縦方向に複数行へまたがせる属性。

scope

th要素の適用範囲を指定する属性。列全体や行全体など、関連を宣言します。

headers

セルと対応するヘッダを関連付ける属性。アクセシビリティを高めます。

summary

表の要約を記述する属性。HTML5では推奨されず、現代の実装では使われません。

border

表の枠線を表示するHTML属性。現在はCSSで管理するのが一般的です。

border-collapse

枠線の結合方法を決めるCSSプロパティ。枠線をどのように結合して表示するかを指定します。

cellpadding

セル内の余白を指定する属性。HTML5では非推奨、CSSの padding を使います。

cellspacing

セル間の間隔を指定する属性。HTML5では非推奨、CSSで制御します。

CSS

表の見た目を整えるスタイル指定言語。色、余白、枠線などを設定します。

レスポンシブテーブル

小さな画面でも見やすくするための表の設計。横スクロールや折り返しを活用します。

アクセシビリティ

視覚に頼らず読み上げや認識ができるようにする配慮。scopeやheadersの活用がポイントです。

スクリーンリーダー

視覚障害者向けの読み上げソフトウェア。正しくマークアップすることで理解が深まります。

セマンティック

意味論的に正しく表現すること。データの構造を明確にします。

データテーブル

データを表示する表。ソート・フィルタリングと結びつくことが多い。

tableタグの関連用語

tableタグ: HTMLで表全体を表す要素。表の枠組みを作り、行やセルを含む子要素を格納する容れ物です。
thead: 表の見出し行をまとめるセクション。列見出しを含むことが多く、データの読み取りを助けます。
tbody: 表のデータ本体をまとめるセクション。実際のデータセル(td)が並ぶ部分です。
tfoot: 表の集計情報や補足情報を含むセクション。長い表では最後に出ることが多いです。
tr: 表の1行を表す要素。行内にはセル(td または th)が配置されます。
th: セルの見出しを表す要素。通常は列見出しとして使われ、スコープ情報を付けてアクセシビリティを高められます。
td: データセルを表す要素。表のデータを格納します。
caption: 表のタイトルや説明を表示する要素。視覚的にも意味的にも表の説明として機能します。
colgroup: 列全体の設定をまとめて定義する要素。コラムの幅などを一括設定するために使います。
col: 列単位の設定を定義する要素。colgroup の子として、列に対する属性を指定します。
colspan: セルが横方向に何列にまたがるかを指定します。2列またはそれ以上跨ぐときに使います。
rowspan: セルが縦方向に何行にまたがるかを指定します。複数行にまたがるセルのときに使います。
scope: th 要素に適用して、その見出しが行見出しか列見出しかを宣言します。アクセシビリティを向上させる重要な属性です。
headers: td 要素に関連付ける見出しセルの id のリストを指定します。複数見出しを結びつける際に使います。
caption-side: キャプションの表示位置を制御する CSS 概念。表のキャプションを上か下に配置する際に使います（主に CSS の話題）。
border-collapse: 境界線の描画方法を決める CSS 的な設定。表のセル境界をどう描くかを決めます。
border-spacing: セル間の隙間を設定する CSS 的な設定。セルとセルの間の間隔を調整します。
border: 表の外枠線を設定する古い HTML 属性。HTML5 では非推奨で、代わりは CSS を使います。
cellpadding: セル内の余白を指定する古い HTML 属性。現在は CSS で管理するのが通例です。
cellspacing: セル間の隙間を指定する古い HTML 属性。現在は CSS で管理するのが通例です。
summary: 表の要約を指す HTML4 の属性。HTML5 では推奨されず、キャプションや説明で代替します。
align: 表やセルの水平位置を指定する古い HTML 属性。HTML5 では非推奨です。
valign: セルの垂直位置を指定する古い HTML 属性。HTML5 では非推奨です。
セマンティックHTML: 意味を伝える markup の考え方。正しく table/thead/tbody/tfoot などを使い、意味を明確にします。
アクセシビリティ: 障害のある人にも使いやすい設計。スクリーンリーダーで読みやすい表構造や適切な要素配置を重視します。
ARIA: 補助技術向けの追加属性群。読み上げ順や関係性を強化するために使われます。
データテーブルとレイアウトテーブル: データテーブルは意味のある情報を伝える表、レイアウトテーブルは見た目のレイアウト目的の表で使わないのが推奨されます。
レスポンシブテーブル: 画面サイズに応じて表示を適切に変える工夫。横スクロールや折り返し、表示列の絞り込みなどが含まれます。