Type into the grid above and the HTML updates underneath, live. This generator works the way tables are actually built: you see the table while you edit it, and the markup you copy is exactly what the preview shows — serialized from a real DOM element, not stitched together from strings.
Building the table
Click any cell and type. The Rows and Columns steppers resize the grid (up to 20 × 12); cells keep their content when you grow and shrink, so reworking the layout does not mean retyping. Toggle a Header row to mark the first row as <th> cells, and a Header column to do the same down the first column — the grid shows headers shaded while you edit so the structure is always visible.
Merge → and Merge ↓ combine the selected cell with its neighbor (producing real colspan and rowspan attributes); Split restores a merged cell back to individual cells. The merge buttons light up once you select a cell in the grid — click a cell, merge, keep typing.
A Caption adds the accessible <caption> element, which screen readers announce before the table contents and which stays attached to the table wherever you paste it.
Clean, semantic output
The Semantic output toggle (on by default) wraps the header row in a real <thead> with scope="col" on header cells and scope="row" on header-column cells — the attributes assistive technology uses to read tables correctly. Style options cover the practical variations: borders (all, outer-only, none), striped rows, and cell padding (compact, normal, roomy). The preview reflects every choice, and the generated markup stays minimal — no classes you did not ask for, no inline styles, no framework noise.
Copy HTML puts the current markup on your clipboard ready to paste into your page or email template. Download .html packages the same table into a standalone styled document.
Importing what you already have
Import file accepts CSV (comma or tab separated, quoted fields handled) and existing HTML tables, with auto-detection choosing between them. Importing an HTML table preserves its structure — headers, captions, and any colspan/rowspan merges — into the grid so you can rework it and export a cleaner version. Importing CSV turns each line into a row, ready for headers and styling. Either way, the table becomes editable the moment it lands.
Everything stays on your device
The generator runs entirely in your browser: the grid, the source, and the preview are one page, with nothing sent anywhere. Your table is saved in local storage as you work, so a closed tab is not a lost table — Reset clears back to the starter example when you want a fresh one.
Frequently asked questions
Does the markup work in email? The generated fragment uses standard table elements and semantic header markup. The Download .html option also includes a small stylesheet for the border and spacing choices, so the standalone file preserves the visual settings without adding presentational attributes to the copied fragment.
Can I paste this into Markdown? Markdown tables have no merge or caption support. For Markdown, keep the table simple — or use the Markdown editor on this site, whose table syntax this generator’s simple cases match.
Why serialize from a DOM element? Building markup by string concatenation is how stray quotes and unescaped text sneak into output. Serializing a real element means the browser’s own parser guarantees well-formed markup.
Can I generate styled tables? The download includes a small stylesheet matching your border, stripe, and padding choices; the copied fragment stays class-minimal so it drops into your existing CSS cleanly.