HTML table generator
Build production-ready tables with live cell editing, CSV/TSV import, striped & sticky headers, alignment, and one-click export as inline CSS, Tailwind, semantic classes, or Markdown. Free, private, runs entirely in your browser.
Click any cell to edit · Tab moves focus · ⌘/Ctrl+Shift+C copies active export
Why this table generator
Most generators spit out ugly markup or lock you into one framework. This one is built for real shipping: clean semantics, framework-friendly exports, and zero server round-trips.
Four export modes
Inline CSS for emails & docs, Tailwind utilities for modern apps, portable CSS classes, and GitHub-ready Markdown.
Spreadsheet-friendly
Paste from Excel/Sheets or drop CSV/TSV. Quoted fields, tabs, and basic Markdown tables are supported.
Accessible defaults
Optional caption, <th scope> headers, contrast-aware text color, sticky header, and keyboard-friendly editing.
Design control
Density, alignment, stripes, first/last column emphasis, last-row totals styling, presets, radius & shadow.
Private by design
Parsing and generation run locally. Nothing you type or import is uploaded to a server.
Copy-paste production HTML
contenteditable stripped on export. Consistent spacing, contrast text, and responsive overflow wrappers when you need them.
How to use
From blank canvas to production markup in under a minute.
- Set rows and columns — or import CSV/TSV/Markdown data.
- Click headers and cells to edit text inline.
- Tune colors, stripes, density, alignment, sticky header, and emphasis columns.
- Pick an export tab: Inline CSS, Tailwind, CSS Classes, or Markdown.
- Hit Copy output (or Download) and paste into your app, docs, CMS, or README.
Tailwind tips
Tailwind export uses utility classes (border, px-*, bg-*, arbitrary values like
bg-[#037DFF]) so custom brand colors just work. Drop the markup into any Tailwind v3/v4 project.
CSS Classes tips
The Classes export includes a scoped <style> block plus semantic markup
(.mhq-table, .is-striped, etc.). Change the class prefix if it collides with your design system.
FAQ
Is my table data uploaded anywhere?
No. Import parsing, preview, and export generation all run client-side in JavaScript. Your data stays in the page memory of your browser.
What’s the difference between Inline CSS and CSS Classes?
Inline CSS puts styles on each cell — ideal for emails, Notion-like docs, and CMS fields that strip <style> tags. CSS Classes emits lean HTML plus one reusable stylesheet block — better for sites and apps.
Does Tailwind export need a config change?
Usually no. Arbitrary color values like bg-[#037DFF] work with JIT out of the box. If you use a very strict safelist setup, prefer the Classes or Inline exports, or ensure content paths include your templates.
Can I build tables for emails?
Yes — use Inline CSS, prefer simpler colors, and keep “Responsive scroll wrap” off if your email client struggles with overflow wrappers. Always test in your target clients.
How do I make a totals row?
Style the last row with a distinct background/weight under More style settings, or bold the last column for numeric emphasis. Edit cell text inline as needed.