HTML Table Generator

Build an HTML table from a spreadsheet-style grid, with Bootstrap styling and a live preview.

Client-side

About this tool

Hand-writing table, thead, tbody, tr, and td tags for even a small dataset is tedious and error-prone — a single missing closing tag can break your page layout. This tool gives you a spreadsheet-like grid editor instead: type your data into cells, and get correctly structured, indented HTML table markup instantly.

Toggle whether the first row renders as a semantic header, add a caption, and wrap the whole table in a responsive overflow-x-auto div for mobile-friendly horizontal scrolling. For projects using Bootstrap 5, flip on the Bootstrap classes toggle to automatically add table, table-bordered, table-striped, and table-hover utility classes — the Bordered/Striped/Hover toggles only take effect when this is on, since plain HTML has no built-in table styling to apply them through.

Every cell value is HTML-escaped during generation, so pasting in text that happens to contain angle brackets or ampersands never breaks the output or lets stray markup leak into the live preview, which renders the actual generated HTML so you can sanity-check the result before copying it into your project.

FAQ

Why don't the Bordered/Striped/Hover toggles change anything?

Those three toggles only add Bootstrap 5 utility classes to the generated markup. They have no visual effect unless you also enable "Bootstrap 5 classes" — with it off, the output is framework-free HTML with no CSS applied.

Is the generated HTML safe to preview directly?

Yes. Every cell value is HTML-escaped before being inserted into the table markup, so typing markup into a cell renders as literal text rather than executing.

Can I import data from a CSV or spreadsheet?

This tool uses a manual grid editor for direct typing. For CSV-based workflows, use the CSV to Markdown tool, or paste spreadsheet rows directly into the grid cells.

What does the responsive wrapper do?

It wraps the entire table in a div with overflow-x-auto, so wide tables scroll horizontally within their container on small screens instead of breaking your page layout.

Does the header row need to be the first row?

Yes — when "First row is header" is enabled, whatever is in row one is rendered as the header. Reorder your grid rows manually if you need the header data elsewhere.