Common Table Mistakes
Mistake 1: Forgetting to omit <td> cells when using rowspan
NG — Columns shift out of alignment
Cell A spans 2 rows with rowspan="2", but the next row still has 3 <td> elements — one too many.
| A (spans 2 rows) |
B |
C |
| D (extra) |
E |
F |
OK — Omit the <td> covered by rowspan
In the row that the rowspan cell already covers, leave out that column's <td>.
Mistake 2: Forgetting border-collapse: collapse — getting double borders
NG — Gaps and double lines between cells (no border-collapse)
| Name |
Signature Move |
| Terry Bogard |
Buster Wolf |
| Kyo Kusanagi |
Yaotome |
OK — border-collapse: collapse removes the gaps
| Name |
Signature Move |
| Terry Bogard |
Buster Wolf |
| Kyo Kusanagi |
Yaotome |
Mistake 3: Writing <td> outside of <tr>
NG — <td> placed directly inside <table> (missing <tr>)
Browsers may silently repair this, but the structure is invalid and can cause unexpected layout issues.
<table border="1">
<!-- NG: <td> written directly without a <tr> -->
<td>ID</td>
<td>Name</td>
<td>1</td>
<td>Terry Bogard</td>
</table>
OK — Always wrap cells in <tr>