Tables are for data, not layout
The single most important thing to know about HTML tables is what they are for. A table marks up genuinely tabular data — rows and columns with a meaningful relationship, like a price list, a schedule, or a comparison. Using tables to lay out a page, which was common two decades ago, is now firmly wrong: it breaks on mobile, confuses screen readers, and should be done with CSS grid or flexbox instead.
When your data is genuinely tabular, though, a table is exactly the right tool and nothing else expresses the relationship as clearly.
The structure that matters for accessibility
A proper table uses header cells for its column headings rather than styling ordinary cells to look bold. This is not cosmetic. Screen readers announce the relevant header when reading each data cell, so a user hearing "£4.99" also hears which column it belongs to. Without header cells, a table of numbers is an incomprehensible stream of values to someone who cannot see the layout.
This generator marks the first row as header cells when the header option is on, producing an accessible table by default.
Editing in place
The grid above is directly editable — click any cell and type. This is faster than writing the markup by hand and less error-prone, since you see the result as you build it. The HTML updates live as you edit.
Inline styles versus a stylesheet
The tool offers both, and the choice depends on where the table is going. A separate stylesheet block is cleaner, keeps the markup readable, and lets you restyle every table at once — this is the right choice for a website you control.
Inline styles put the formatting directly on each element, which is uglier and heavier but survives being pasted into environments that strip stylesheets. HTML email is the main case: most email clients ignore or remove a style block, so inline styling is effectively mandatory for a table in an email. Some content management systems and rich text editors have the same limitation.
Making tables work on mobile
Tables are inherently awkward on narrow screens, since columns cannot shrink indefinitely. The width setting here makes the table fill its container, and the common technique for small screens is to let a wide table scroll horizontally within a wrapper rather than forcing it to reflow. For tables with many columns, consider whether every column is truly needed on mobile, or whether the data could be presented differently there.
Striped rows and borders
Alternating row colours, known as zebra striping, genuinely aids readability in tables with many rows by helping the eye track across a line without slipping to the wrong row. Borders serve a similar purpose. Both are optional here; for short tables they can be omitted for a cleaner look, but for anything long they are worth keeping.
Generated in your browser
The markup is built locally with nothing transmitted, and there are no limits or watermarks.
Frequently Asked Questions
Should I use tables for page layout?
No. Tables are for tabular data. Page layout should use CSS grid or flexbox, which adapt to mobile and work correctly with screen readers.
Why use header cells instead of bold text?
Screen readers announce the relevant header when reading each data cell, so users know which column a value belongs to. Bold styling gives no such information.
When should I use inline styles?
For HTML email and some content editors that strip stylesheets. For a website you control, a separate stylesheet is cleaner and easier to maintain.
How do I make a table work on mobile?
Let a wide table scroll horizontally within a wrapper, and consider whether every column is needed on a small screen.
Does zebra striping help?
Yes, for long tables. Alternating row colours help the eye track across a row without slipping. For short tables it is optional.