Layout Tables Are a Trap

Years ago developers built page layouts with the table element. That habit lingers in old code and still causes real accessibility harm today.

A screen reader treats every table as data. It announces rows, columns, and cell counts for your layout, drowning users in meaningless structure.

Layout tables often scatter content into cells in a confusing sequence. The visual order and the reading order drift apart, leaving users lost.

Modern layout belongs to CSS. Reach for flexbox or grid to arrange a page, and keep the table element only for genuine tabular data.

When you line items up in a row or a column, flexbox is the natural tool. It adapts to content without any table semantics getting in the way.

For rows and columns together, CSS grid gives you a true layout system. It separates how a page looks from what its markup means.

With CSS layout, your HTML can use real landmarks like header, nav, and main. Screen reader users get a meaningful map instead of cell counts.

If you truly cannot remove a legacy layout table, add role=presentation. It strips the table semantics so assistive tech ignores the grid.

Treat role=presentation as a temporary bandage. The real fix is migrating to CSS, which removes the problem instead of merely hiding it.

No caption, no th, and cells holding whole sections rather than values are red flags. That pattern almost always signals a layout table to refactor.

Ask a simple test of any table: does it present data with rows and columns of related values? If not, it is a layout table and CSS should replace it.

You inherit a page that uses a table purely to position columns of content.

Never lay out a page with a table. Use flexbox or grid, reserve table for real data, and treat role=presentation only as a stopgap on legacy code.