HTML
テーブルの表示が崩れる
tr/td の入れ子が間違っている
こんな症状
テーブルのセルが変な位置に表示される。HTMLテーブルを初めて作るときに構造を間違えやすいよ。
まず試す
<table> の中に <tr>（行）、その中に <td>（セル）という入れ子にする。
html
<table>
<tr><td>データ</td></tr>
</table>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓table の直下に td を書いた / tr が抜けている
→ <tr> で行を作り、その中に <td> を置く。 - ✓見出しセルにしたい
→ <td> ではなく <th> を使う。 - ✓セルの数が行でバラバラ
→ 各 <tr> のセル数（<td>）を揃える。
なぜ起きる？
HTMLのテーブルは<table>→<tr>（行）→<td>（セル）という入れ子構造が必須だよ。<table>の直下に<td>を書いたり、<tr>を省略したりすると、ブラウザが構造を正しく解釈できずレイアウトが崩れるんだ。
✕ エラーが起きるコード
<table>
<td>データ</td>
</table>
<!-- tr が抜けている -->✓ 直したコード
<table>
<tr><td>データ</td></tr>
</table>✅ 直ったか確認
表が崩れず格子状に表示されればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- リスト要素が正しくネストされない — ul/olの直下にli以外の要素がある
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- 文字化けする — charset の指定がない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説