HTML Table Generator — Visual Editor, Header Cells, CSV Paste

Real-world use cases

• Drop a pricing comparison into a marketing email

  Email clients are the harshest rendering environment on the web — Gmail and Outlook strip <style> blocks and external CSS entirely. Build your three-tier pricing table here, keep CSS delivery on "inline style", set the first row as the header, turn on borders, and copy. Every <td> carries its own style="" so the table looks identical in the recipient's inbox. No more "it looked fine in my editor but arrived as an unstyled wall of text" surprises.

• Build a spec table for a CMS post without touching code

  Your WordPress / Ghost / Contentful editor has a "custom HTML" block but no table builder. Type your rows here, set the header column so the left-hand labels render as <th scope="row">, copy the inline-styled HTML, and paste it into the custom HTML block. The table is accessible (proper scope attributes) and self-styled, so it survives the CMS's stylesheet without inheriting weird theme borders.

• Convert an Excel range to clean documentation HTML

  You have a 12-row config table in a spreadsheet and need it in your docs as real HTML. Copy the range in Excel, paste it straight into the top-left cell — the tab-separated data fills the grid in one shot. Switch CSS delivery to "class + <style>" for clean markup your docs site can theme, set header row, and copy. What used to be ten minutes of hand-typing <tr><td> is now two clicks.

• Prototype a table layout before wiring up a component

  Before you build a React/Vue table component, you want to see the structure: which cells are headers, where borders sit, whether zebra striping helps readability. Sketch it here with the live preview, toggle thead/tbody and striping, and read the generated HTML as a reference for your JSX. The scope attributes and section structure are exactly what you'd hand-author — copy them across.

• Make a comparison table for documentation accessibility audits

  A11y audits flag tables that use <td> for headers or omit scope. Rebuild the flagged table here with header row or header column, which emits <th scope="col"> / <th scope="row"> automatically, plus <thead> / <tbody> sectioning. Paste the corrected markup back and the next axe / Lighthouse run passes the table-headers check without you memorising the ARIA table contract.

Common pitfalls

• Using inline style for a large data-heavy page. Inline style="" repeats the same declarations on every cell, so a 200-row table bloats your HTML. For real web pages prefer class + <style> mode — the CSS is defined once. Inline mode is for email / CMS where external CSS gets stripped.

• Forgetting scope on header cells. A table that uses <td> for headers (or <th> with no scope) fails accessibility audits and reads poorly in screen readers. Pick header row or header column here and the correct scope="col" / scope="row" is emitted for you — don't hand-strip it afterwards.

• Pasting HTML into a cell and expecting it to render. Cell content is escaped on purpose, so <b>bold</b> shows up literally as text. That's the safe default — if you genuinely need markup inside one cell, copy the generated table out and edit that cell by hand in your own editor.

Privacy