よくあるテーブルのミス

ミス1: rowspan で省略すべき <td> を書いてしまう

NG — 列がずれる

rowspan="2" で1つのセルが2行分を占有しているのに、次の行にも <td> を3つ書いている。

A（2行分） B C
D（不要） E F

OK — rowspan 分の <td> を省略する

rowspan="2" のセルが占有する行では、その列の <td> を書かない。

A（2行分） B C
E F

ミス2: border-collapse: collapse を忘れて二重線になる

NG — セル間に余白・二重線が残る（border-collapse なし）

名前 得意技
テリー・ボガード バスターウルフ
草薙京 八稚女

OK — border-collapse: collapse でセル間の隙間をなくす

名前 得意技
テリー・ボガード バスターウルフ
草薙京 八稚女

ミス3: <td> を <tr> の外に書いてしまう

NG — <table> の直下に <td> を書く（<tr> が抜けている）

ブラウザが自動補正するため表示されることもあるが、構造が不正で予期しないレイアウト崩れが起きる。

<table border="1">
  <!-- NG: tr なしで td を直接書いている -->
  <td>ID</td>
  <td>名前</td>
  <td>1</td>
  <td>テリー・ボガード</td>
</table>

OK — 必ず <tr> で行を囲む

ID 名前
1 テリー・ボガード