💡 記事の下にエディタを用意しています。壊してもOK！

更新日: 2026年5月31日

HTML tableタグでテーブルを作る方法｜tr tdの書き方

📌

結論

<table>・<tr>・<td> で表が作れます

HTMLでデータを表形式で表示するには、テーブルタグを使います。
📝 実際のコードはこちら
<table>
  <tr><td>A</td><td>B</td></tr>
  <tr><td>C</td><td>D</td></tr>
</table>

テーブルの構造

テーブルは3つのタグの組み合わせです。
タグ意味役割
<table>テーブル全体表の外枠
<tr>table row行（横の並び）
<td>table dataセル（各マス）
入れ子の構造をイメージしてください：table の中に tr、tr の中に td が入ります。

見出しセル <th>

1行目を太字の見出しにしたいときは、<td> の代わりに <th>（table header）を使います。
📝 実際のコードはこちら
<table>
  <tr><th>名前</th><th>年齢</th></tr>
  <tr><td>太郎</td><td>20</td></tr>
</table>

⚠️ レイアウトに使わない

昔はtableでページレイアウトを組んでいましたが、今は完全にNG。レイアウトにはFlexboxやGridを使い，tableはデータ表示専用にしましょう。

まとめ

・表は <table> > <tr> > <td> の3階層 ・見出しセルは <th> を使う ・レイアウト用途には使わない

演習で試してみよう

2行2列のテーブルを作ってみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

試してみる 一覧ページで解く →

■ 演習

2行2列のテーブルを作ってください。セルの内容は自由です。（例：A,B,C,D や 名前,年齢 など）

詰まったらヒント

table, tr, td を使います。

20pt

テーブル

2行2列のテーブルを作ってください。セルの内容は自由です。（例：A,B,C,D や 名前,年齢 など）

エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。

ロードマップ · 全解説

この演習を深掘りする

「テーブル」は初級レベルのHTML演習です。2行2列のテーブルを作ってください。セルの内容は自由です。（例：A,B,C,D や 名前,年齢 など） この課題は、ブラウザ内エディタでその場実行でき、正誤判定も自動で行われます。

tableは表形式のデータに使います。thで見出しセルも作れます。 実務では同様のパターンがコードレビューやUI実装の現場で繰り返し登場します。

学習ロードマップ「html-basic」とセットで進めると、インプット→アウトプットの循環が作れます。演習#13はカテゴリ「html-basic」の中核スキルを固める位置づけです。

取り組み手順（ステップバイステップ）

  1. ページ上部の解説記事を読み、「テーブル」のゴールを把握する
  2. エディタのHTML欄を確認し、スターターコードから書き始める
  3. 詰まったらヒントを開き、解答例と見比べながら差分を埋める
  4. 「実行」ボタンでプレビュー／コンソールを確認し、期待どおりの表示になるかテストする
  5. 正解判定では「<table>」「<td>」などが含まれることを確認します。
  6. 正解後は前後の演習リンクから続けて取り組み、同カテゴリを通しで完成させる

解答コードの読み解き方

解答コードでは table, tr, td などのHTMLタグが使われています。タグの入れ子と閉じタグの対応を確認しましょう。 解説: tableは表形式のデータに使います。thで見出しセルも作れます。 ヒントの要点: table, tr, td を使います。

実務・転職でどう活きるか

HTMLはブログ記事、ECサイトの商品説明、corporateサイトのすべてで使われます。SEOでは見出し階層（h1〜h3）とセマンティックマークアップが検索順位の間接要因になります。

よくある間違い

  • ヒントを読まずに解答を見る: table, tr, td を使います。
  • h1をページ内で複数使う
  • 閉じタグ</p>を忘れる
  • ulの直下にli以外を置く
  • imgのaltを省略する

トラブルシューティング

実行してもプレビューが変わらない
HTMLの編集欄を触っているか確認し、実行ボタンを押したあと数秒待ってから再確認してください。
正解なのに判定が通らない
正解判定では「<table>」「<td>」などが含まれることを確認します。 全角スペースやtypo、タグの閉じ忘れを疑ってください。
コンソールにエラーが出る
DevToolsのConsoleタブで行番号を確認し、括弧・引用符の対応を見直します。
スマホで入力しづらい
横画面にするか、PCブラウザで同じURLを開くと快適です。進捗はlocalStorageに保存されます。

転職・面接で話せるポイント

  • 「テーブル」で扱う技術を自分の言葉で30秒説明できるようにしておく
  • 解答コードの各行が何をしているか、面接官に白板で説明する練習をする
  • HTMLタグ（table, tr, td）の意味とアクセシビリティ上の注意点を説明できる
  • 「なぜこの実装方法を選んだか」「別解はあるか」を必ず1つ用意する

用語集

h1
最上位見出し。1ページに1つが推奨。
p
段落（paragraph）を表すタグ。
a
アンカー。hrefでリンク先を指定。

このページで扱うキーワード

このページは「テーブル」「html-basic」「初級」「table」「tr」「td」「html table」などのキーワードで検索される方に向けた、テーブルの無料演習・解説です。

関連する開発ツール

学習ロードマップ

学習ロードマップ →

関連する演習

よくある質問（FAQ）

テーブルは無料ですか？

この演習は完全無料で、ブラウザだけで完結します。アカウント登録やクレジットカードは不要です。

難易度と所要時間は？

「テーブル」は難易度「初級」です。解説記事を読んでから取り組めば、プログラミング未経験でも30分以内に解ける設計になっています。 1問あたり5〜15分が目安です。詰まったらヒント→解答の順で確認してください。

正解後は何をすればいい？

正解したら「次の問題」リンクから続けてください。同カテゴリを一通り終えたら、学習ロードマップの次ステップへ進むのがおすすめです。

スマホでもできますか？

スマートフォンのブラウザでもエディタとプレビューは動作します。ただしコード入力はPCの方が快適です。

他の演習はどこ？

演習一覧は/learn/から。カテゴリ・難易度でフィルターできます。

「テーブル」で覚えるポイントは？

tableは表形式のデータに使います。thで見出しセルも作れます。 ヒント: table, tr, td を使います。

HTML基礎カテゴリの位置づけは？

HTMLはブログ記事、ECサイトの商品説明、corporateサイトのすべてで使われます。SEOでは見出し階層（h1〜h3）とセマンティックマークアップが検索順位の間接要因になります。

「テーブル」の具体的な手順は？

1. ページ上部の解説記事を読み、「テーブル」のゴールを把握する
2. エディタのHTML欄を確認し、スターターコードから書き始める
3. 詰まったらヒントを開き、解答例と見比べながら差分を埋める
4. 「実行」ボタンでプレビュー／コンソールを確認し、期待どおりの表示になるかテストする
5. 正解判定では「」「
」などが含まれることを確認します。
6. 正解後は前後の演習リンクから続けて取り組み、同カテゴリを通しで完成させる

解答コードの読み方は？

解答コードでは table, tr, td などのHTMLタグが使われています。タグの入れ子と閉じタグの対応を確認しましょう。

解説: tableは表形式のデータに使います。thで見出しセルも作れます。

ヒントの要点: table, tr, td を使います。

うまくいかないときは？

実行してもプレビューが変わらない → HTMLの編集欄を触っているか確認し、実行ボタンを押したあと数秒待ってから再確認してください。
正解なのに判定が通らない → 正解判定では「」「
」などが含まれることを確認します。 全角スペースやtypo、タグの閉じ忘れを疑ってください。
コンソールにエラーが出る → DevToolsのConsoleタブで行番号を確認し、括弧・引用符の対応を見直します。
スマホで入力しづらい → 横画面にするか、PCブラウザで同じURLを開くと快適です。進捗はlocalStorageに保存されます。

転職・ポートフォリオでどうアピールする？

「テーブル」で扱う技術を自分の言葉で30秒説明できるようにしておく 解答コードの各行が何をしているか、面接官に白板で説明する練習をする HTMLタグ（table, tr, td）の意味とアクセシビリティ上の注意点を説明できる 「なぜこの実装方法を選んだか」「別解はあるか」を必ず1つ用意する

スターターコードは変更していい？

はい。動けばOKですが、まずはスターターを理解してから差分だけ足すと学習効率が上がります。

点数（pt）の意味は？

20ptは難易度の目安です。合計点を競う必要はなく、理解度を測る指標として使ってください。

🛠️ おすすめの開発ツール

画像圧縮・WebP変換

完全ローカル処理で安全に画像を軽量化。Webサイトの爆速化に必須のツールです。

ツールを使う →

JSON整形・バリデーター

1行のJSONを瞬時に読みやすく整形。構文エラーのチェックにも便利。

ツールを使う →

JWTデコード・検証

トークンの中身を安全に解析。有効期限やクレームの確認を一瞬で。

ツールを使う →