Email clients (Gmail, Outlook on Windows, many mobile clients) strip {' '} blocks and external CSS. Inline styles (style="..." attributes) are the only way to ensure consistent rendering across email environments. For web pages where {' '} works, you can extract the inline styles into a CSS class manually after copying.

Why not use a real spreadsheet HTML export?

Excel / Google Sheets / Apple Numbers can export to HTML but produce extremely verbose markup with vendor-specific CSS that doesn't render well in email or other contexts. The output here is hand-curated minimal HTML that renders consistently. For one-off transcription, this is faster than fighting a spreadsheet's export.

What about responsive tables?

Tables don't naturally adapt to narrow screens. Two patterns: (1) horizontal scroll on mobile (set the table inside a div with overflow-x: auto); (2) card view on mobile (use media queries to display the table as stacked cards under ~600px). The generator outputs basic tables; add responsive CSS in your destination if needed.

How accessible is the output?

Reasonable: uses {' '}, {' '}, {' '}, {' '}, {' '} — semantically correct HTML elements that screen readers understand as table data. To improve: add {' '} for table description, {' '} for header relationships. The generator outputs basic semantic structure; add caption and scope attributes manually for accessibility-critical content.

Will the table look the same everywhere?

In email: mostly yes — major clients (Gmail, Outlook, Apple Mail) render inline-styled tables consistently. Edge cases: very old Outlook (Office 2007 era) has some quirks; some mobile email clients have limited CSS support. For mission-critical email, test in Litmus or Email on Acid (commercial preview tools).

Can I sort the rows after pasting?

Not from the generated HTML alone — that's static. For sortable tables, paste the HTML into a JS framework (React + TanStack Table, plain HTML + DataTables.js) which adds sorting / filtering / pagination interactively. This generator is for static-content tables.

Developer Utilities · Free tool

HTML Table Generator

Design interactive HTML tables by clicking cells to edit headers, stripes, and borders. Get inline-styled output for emails instantly with this free, no-download generator.

Updated June 2026

Rows (3)Columns (3)

Header rowStriped rowsBorders

<table style="border-collapse:collapse;font-family:system-ui,sans-serif;border:1px solid #cbd5e1">
  <tr>
    <th style="padding:0.5rem 0.75rem;border:1px solid #cbd5e1;background:#f1f5f9;font-weight:600;text-align:left;">Heading 1</th>
    <th style="padding:0.5rem 0.75rem;border:1px solid #cbd5e1;background:#f1f5f9;font-weight:600;text-align:left;">Heading 2</th>
    <th style="padding:0.5rem 0.75rem;border:1px solid #cbd5e1;background:#f1f5f9;font-weight:600;text-align:left;">Heading 3</th>
  </tr>
  <tr>
    <td style="padding:0.5rem 0.75rem;border:1px solid #cbd5e1;">Cell 1-1</td>
    <td style="padding:0.5rem 0.75rem;border:1px solid #cbd5e1;">Cell 1-2</td>
    <td style="padding:0.5rem 0.75rem;border:1px solid #cbd5e1;">Cell 1-3</td>
  </tr>
  <tr>
    <td style="padding:0.5rem 0.75rem;border:1px solid #cbd5e1;">Cell 2-1</td>
    <td style="padding:0.5rem 0.75rem;border:1px solid #cbd5e1;">Cell 2-2</td>
    <td style="padding:0.5rem 0.75rem;border:1px solid #cbd5e1;">Cell 2-3</td>
  </tr>
</table>

Found this useful?Email Buy Me a Coffee

What it does

Build an HTML table interactively: set rows × columns, click any cell to edit its content, toggle styling options (header row, striped alternate rows, borders, padding, background color), and copy the resulting inline-styled HTML for use in emails, quick web pages, or any HTML context. The output uses inline styles (style="..." on each element) so the table survives email clients that strip <style> blocks.

Common use cases:

Email tables: Newsletters, transactional emails, reports — email clients (especially Outlook on Windows, which uses Word’s HTML engine) strip external CSS, so tables need inline styles to render.
Quick web pages: Static HTML pages where you don’t want to set up a CSS pipeline for one table.
WordPress / CMS posts: Where the visual editor lacks a clean table builder, hand- authored HTML works.
Notion / Confluence / wiki content: Where rich-text table editors are clunky and pasted HTML works better.

Why HTML tables persist in 2026: HTML tables remain the only reliable way to lay out tabular data across email and most legacy content systems. CSS Grid / Flexbox alternatives don’t work in email; ASCII- art tables don’t survive copy/paste; image tables aren’t accessible to screen readers. For tabular content, semantic HTML tables remain the right tool.

For more sophisticated tables (sortable, filterable, paginated), use a JS library like DataTables, AG-Grid, or TanStack Table. This generator is for static tables where you just need rows and cells.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/html-table-generator" width="100%" height="720" frameborder="0" loading="lazy" title="HTML Table Generator" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Set rows × columns. Adjust based on your data; you can change later.
Click any cell to edit its text. Tab between cells to fill quickly.
Toggle styling: header row (first row gets bold + slightly darker bg), striped rows (alternating backgrounds for readability), borders (visible cell separators), padding (cell whitespace).
Pick colors: header background, row alternation, border color. Match your brand or destination's design.
Copy the HTML. Paste into your destination — email body, blog post, wiki page.

When to use this tool

Email newsletters or transactional emails with tabular data.
Static HTML pages without a CSS framework.
Quick reference tables in blog posts where you don't want to fight a rich-text editor.
WordPress / Substack / Notion posts where you'd rather hand-author than use the visual table tool.

When not to use it

Sortable / filterable / interactive tables — use a JS library (DataTables, AG-Grid, TanStack Table).
Modern web design where the table won't go in an email — CSS Grid is more flexible and lightweight.
Layout (positioning page elements) — tables-for-layout is a 1990s antipattern. Use Grid / Flexbox / divs.
Massive tables (1000+ rows) — inline-styled HTML is huge for big tables. Use semantic HTML with external CSS.

Common use cases

Educational use — demonstrating the underlying concept
Onboarding a colleague who needs the same calculation/conversion
Verifying a number or output before passing it on
Quick generation during a typical workday

Frequently asked questions

Why inline styles?: Email clients (Gmail, Outlook on Windows, many mobile clients) strip {'<style>'} blocks and external CSS. Inline styles (style="..." attributes) are the only way to ensure consistent rendering across email environments. For web pages where {'<style>'} works, you can extract the inline styles into a CSS class manually after copying.
Why not use a real spreadsheet HTML export?: Excel / Google Sheets / Apple Numbers can export to HTML but produce extremely verbose markup with vendor-specific CSS that doesn't render well in email or other contexts. The output here is hand-curated minimal HTML that renders consistently. For one-off transcription, this is faster than fighting a spreadsheet's export.
What about responsive tables?: Tables don't naturally adapt to narrow screens. Two patterns: (1) horizontal scroll on mobile (set the table inside a div with overflow-x: auto); (2) card view on mobile (use media queries to display the table as stacked cards under ~600px). The generator outputs basic tables; add responsive CSS in your destination if needed.
How accessible is the output?: Reasonable: uses {'<table>'}, {'<thead>'}, {'<tbody>'}, {'<th>'}, {'<td>'} — semantically correct HTML elements that screen readers understand as table data. To improve: add {'<caption>'} for table description, {'<th scope="col|row">'} for header relationships. The generator outputs basic semantic structure; add caption and scope attributes manually for accessibility-critical content.
Will the table look the same everywhere?: In email: mostly yes — major clients (Gmail, Outlook, Apple Mail) render inline-styled tables consistently. Edge cases: very old Outlook (Office 2007 era) has some quirks; some mobile email clients have limited CSS support. For mission-critical email, test in Litmus or Email on Acid (commercial preview tools).
Can I sort the rows after pasting?: Not from the generated HTML alone — that's static. For sortable tables, paste the HTML into a JS framework (React + TanStack Table, plain HTML + DataTables.js) which adds sorting / filtering / pagination interactively. This generator is for static-content tables.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →