When it comes to HTML, tables don’t get the respect they deserve.
Despite being a part of HTML since 1997 - and with many others tags from the time now being deprecated - tables are considered by many to be awkward, verbose and perhaps even unnecessary (I know what you’re thinking, could we just use divs?).
The fact is, HTML tables are readable, keep information organised, and come with accessibility features, too (like caption). In this article, we’ve made some mistakes in a table, and want you to spot them.
Let us know on socials if you spot the five mistakes, or check the bottom of the article for answers.
The Code
<table>
<thead>
<tr>
<th>Product</th>
<th>Price<th>
</tr>
</thead
<tbody>
<tr>
<td>Apple</td>
<td>$1</td>
</tr>
<div>
<tr>
<td>Banana</td>
<td>$0.50</td>
</tr>
</div>
<tr>
<td>Cherry
<td>$2
</tr>
</tbody>
</table>
The Answers
Think you’ve found the answers? See if you found them all below.
Mistake 1
Unclosed <th> tag for "Price"
The "Price" column header doesn't have a proper closing tag. It ends with <th> instead of </th>, breaking the table structure.
Mistake 2
Missing closing </thead> tag
The <thead> is left open (</thead missing a closing >), causing invalid nesting for the table sections.
Mistake 3
Invalid <div> inside <tbody>
A <div> element is incorrectly placed inside the table's <tbody>. Only table-related tags like <tr>, <td>, and <th> are allowed inside tables.
Mistake 4
Missing closing </td> tags in "Cherry" row
The "Cherry" product and its price don't have their </td> tags closed. This can cause browsers to misinterpret the layout and break the table visually or semantically.
Mistake 5
Missing <caption> element for table
A <caption> describing the purpose of the table is missing. While not strictly required, it greatly improves accessibility, especially for screen reader users.