HTML Table Generator

How to use HTML Table Generator

1. Set the number of rows and columns and fill in the cells.
2. Mark the header row so it generates th elements with scope.
3. Copy the markup, add a caption, and wrap it for horizontal scroll on small screens.
4. Use th with scope=“col” or scope=“row” — that is what makes a table navigable by screen reader.
5. A caption element names the table for everyone, and is better than a preceding paragraph.
6. Never use a table for page layout, except inside HTML email.

What makes a table accessible

A screen reader announces a properly marked-up table’s dimensions, then reads the column and row headers with each cell, so a blind user can navigate it the way a sighted user scans it. That depends on real elements: th with a scope of col or row, thead and tbody separating headers from data, and a caption naming what the table shows. A grid of divs with CSS gives none of that — it is read as an undifferentiated stream of text, and the relationships that make a table meaningful are simply gone.

Use tables for data, and nothing else

Tables were used for page layout throughout the 1990s and early 2000s because CSS could not do it. Flexbox and grid solved that fifteen years ago, and layout tables are now purely harmful: they confuse assistive technology, they resist responsive design, and they are verbose. The one surviving exception is HTML email, where client support is so poor that table layout remains the only reliable approach — and there you should add role="presentation" so screen readers ignore the structure.

Making a table work on a phone

A wide table cannot shrink to 360 pixels without becoming unreadable, and the usual responses are all compromises. Horizontal scroll inside a wrapper is the simplest and keeps the data intact — give the wrapper overflow-x: auto and a tabindex of 0 so keyboard users can scroll it. Stacking each row into a card works for a few columns and falls apart beyond that. Hiding columns loses data. Pick deliberately; there is no option that costs nothing.

The styling details that make a table readable

border-collapse: collapse removes the doubled borders that make a table look like a spreadsheet from 1998. Right-align numeric columns so the digits line up and magnitudes are comparable at a glance, and use a tabular-figures font feature so the columns do not jitter. Generous vertical padding beats horizontal rules for separating rows. And zebra striping helps on wide tables and adds noise on narrow ones.