table 要素は「行と列で“表形式のデータ”を並べるための箱」
<table> は、
「行（よこ）と列（たて）で整理されたデータ」を表にするためのタグ です。
時間割
料金表
成績表
比較表
みたいな、「表で見ると一番わかりやすい情報」を
きちんと構造として表現するための“箱”が <table> です。
見た目を作るための罫線ツールではなく、
「これは表形式のデータですよ」とブラウザや機械に伝えるための要素
だと捉えるのが大事なポイントです。
table の基本構造をざっくりイメージする
「表全体」が table、その中に行（tr）とセル（th / td）
最低限の構造はこういうイメージです。
<table>
<tr>
<th>曜日</th>
<th>午前</th>
<th>午後</th>
</tr>
<tr>
<th>月</th>
<td>会議</td>
<td>開発</td>
</tr>
<tr>
<th>火</th>
<td>設計</td>
<td>開発</td>
</tr>
</table>
ここでの役割を整理すると、
table … 表全体の箱tr … table row（行）th … table header（見出しセル）td … table data（普通のセル）
という構造になっています。
「行の中にセルが並ぶ」
「セルには“見出し用”と“データ用”がある」
この二段階の構造をイメージできれば OK です。
th と td の違いをしっかり押さえる
th は「見出しセル」、td は「データセル」
<th> は「この列（または行）の意味を表すセル」です。<td> は「実際のデータが入るセル」です。
さっきの例でいうと、
<tr>
<th>曜日</th>
<th>午前</th>
<th>午後</th>
</tr>
ここは「列の見出し」です。
なので全部 th。
次の行はこうでした。
<tr>
<th>月</th>
<td>会議</td>
<td>開発</td>
</tr>
左端の「月」は「行の見出し」なので th。
「会議」「開発」はデータなので td。
つまり、
列や行のラベル → th
そのラベルに対応する中身 → td
という役割分担です。
ここをきちんと分けておくと、
スクリーンリーダーや検索エンジンが
「このセルは何の見出しなのか」を理解しやすくなります。
シンプルな比較表を作ってみる
プラン比較の表
例として、料金プランの比較表を考えます。
<table>
<tr>
<th>プラン名</th>
<th>月額料金</th>
<th>ユーザー数</th>
</tr>
<tr>
<th>ベーシック</th>
<td>1,000円</td>
<td>1人</td>
</tr>
<tr>
<th>スタンダード</th>
<td>2,000円</td>
<td>5人</td>
</tr>
<tr>
<th>プレミアム</th>
<td>5,000円</td>
<td>無制限</td>
</tr>
</table>
ここでも、
1 行目の th は「列の見出し」
2 行目以降の左端の th は「行の見出し」
残りのセルは td（データ）
という構造になっています。
この「見出しセル」と「データセル」の区別が、
表の意味をはっきりさせるうえでとても重要です。
CSS で table を“ちゃんとした表”っぽく見せる
枠線・余白・ヘッダーの強調
素の <table> は、ブラウザによっては枠線が出なかったりして
少し味気ない見た目です。
CSS で最低限整えると、ぐっと見やすくなります。
table {
border-collapse: collapse; /* 枠線を重ねて1本にする */
width: 100%;
}
th,
td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f5f5f5;
}
これで、
セル同士の境界に線が付き
ヘッダー行が少しグレーになり
表としての視認性が上がります。
ポイントは、
見た目は CSS に任せて、HTML では“構造と意味”に集中する
という考え方です。
table を「レイアウト目的」で使わない、という超重要ポイント
レイアウトは CSS、表は table
昔は「ページのレイアウト」を table で組む、というやり方がよくありました。
例えば、
左カラム・右カラムの 2 カラムレイアウトを
table で無理やり作る、みたいなやつです。
でも今は、
レイアウトは CSS（flex や grid）でやるのが大前提 です。
table はあくまで
「表形式のデータを表現するための要素」。
レイアウトのために table を使うと、
HTML の意味が崩れる
アクセシビリティが悪くなる
メンテナンスが地獄になる
という三重苦になります。
「これは“表としてのデータ”か？ それとも“レイアウト”か？」
と自分に問いかけて、
表なら table、レイアウトなら CSS、
と役割を分けるのがプロのやり方です。
JavaScript と table：データ配列から表を生成する
配列の配列 → table という定番パターン
JavaScript で、
配列から表を動的に作ることもよくあります。
データのイメージ：
const rows = [
["プラン名", "月額料金", "ユーザー数"],
["ベーシック", "1,000円", "1人"],
["スタンダード", "2,000円", "5人"],
["プレミアム", "5,000円", "無制限"],
];
これを table に変換するイメージ：
const table = document.querySelector("#planTable");
rows.forEach((row, rowIndex) => {
const tr = document.createElement("tr");
row.forEach((cell, cellIndex) => {
const cellElement =
rowIndex === 0 || cellIndex === 0
? document.createElement("th")
: document.createElement("td");
cellElement.textContent = cell;
tr.appendChild(cellElement);
});
table.appendChild(tr);
});
HTML 側：
<table id="planTable"></table>
ここでやっていることは、
1 行目 → 列の見出しなので th
各行の 1 列目 → 行の見出しなので th
それ以外 → データなので td
というロジックです。
この「どこを th にして、どこを td にするか」を
意識してコードを書くことが、
意味のある表を作るうえでとても大事です。
table を使うか迷ったときの判断基準
「これは“表にした方が意味が伝わるデータ”か？」
自分にこう聞いてみてください。
横方向に項目（列）があり
縦方向にレコード（行）があり
交差するマスに値が入る
という構造になっているか？
YES なら table が候補になります。
時間割
料金表
比較表
成績表
こういうものは、
「表形式のデータ」として table がぴったりです。
逆に、
単に横に要素を並べたいだけなら flex / grid、
箇条書きなら ul / ol、
ラベルと値のペアなら dl、
というように、他の要素の方が自然なことも多いです。
初心者として「table タグ」で絶対に掴んでほしいこと
<table> は、
「行と列で整理された“表形式のデータ”を表すための箱」 です。
中には行（tr）が入り、
行の中には「見出しセル（th）」と「データセル（td）」が入る。
th は「列や行のラベル」、td は「その中身」。
見た目の線や余白は CSS に任せる。
レイアウト目的では使わず、「本当に表にすべきデータ」にだけ使う。
あなたが <table> を書くときに、
「これは“表にした方が意味が伝わるデータ”か？ それともレイアウトをしたいだけか？」
と一度自分に問いかけられるようになったら、
もう table を“罫線を引くための道具”ではなく、
“データの構造と意味を正しく伝えるためのタグ”として扱えている状態です。