HTML tables are useful, but they’ve also been misused for years. If you’re just starting out with HTML, it’s important to know not only how to use tables but when to use them—and when to leave them alone.
What is the purpose of HTML tables?
Tables revolve around data.
They are ideal for structured data such as pricing charts, sports scoreboards, or regional sales lists. That’s what it was built for. Tables help present relationships between rows and columns in a clear, accessible way.
Here’s a quick example:
And the output:
The example shows a table that is simple, readable, and screen-reader friendly (since it uses semantic elements like <thead>, <tbody>, and <th> correctly).
What should you not use tables for?
Layout.
We’ve all seen it—or done it. Back in the early 2000s, developers used tables to build entire websites: headers, sidebars, navigation, all crammed into a grid of <td> and <tr> elements. It was a workaround before CSS matured, but today it’s outdated, bloated, and just entirely wrong.
Example: Using a Table for Page Layout (Old School, Bad Practice)
This is poor practice since tables are not responsive, hard to maintain, and not accessible. Screen readers have a hard time to understand layout tables.
Using tables is also semantically incorrect. Tables are made for structure data, not for design.
Modern web design relies on CSS Grid and Flexbox for layout—and they’re way more powerful, responsive, and maintainable than table-based design hacks.
The takeaway?
Use HTML tables only for tabular data. Not for positioning logos. Not for placing buttons. And definitely not for wrapping your site like a spreadsheet.
HTML gives you the structure. CSS gives you the style. Mixing those two the wrong way just leads to messy code and accessibility nightmares.
Know when to table your tables.
Although my blog doesn’t support comments, feel free to reply via email or X.