ZumaTools

HTML Table Generator

Edit the grid below, adjust the style options, and copy the generated HTML — the code and preview update as you type.

Style

Import from CSV

Preview

Name Role City
Alice Engineer Berlin
Bob Designer Lisbon
Carol Manager Madrid

HTML code

<table style="border-collapse: collapse;">
  <thead>
    <tr>
      <th style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Name</th>
      <th style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Role</th>
      <th style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Alice</td>
      <td style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Engineer</td>
      <td style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Berlin</td>
    </tr>
    <tr>
      <td style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Bob</td>
      <td style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Designer</td>
      <td style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Lisbon</td>
    </tr>
    <tr>
      <td style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Carol</td>
      <td style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Manager</td>
      <td style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Madrid</td>
    </tr>
  </tbody>
</table>

Everything runs locally in your browser — your data is never uploaded.

How it works

  1. Set the number of rows and columns, then type your content directly into the grid cells. Toggle the header row off if your table has no headings.
  2. Pick your style: borders on or off, striped rows, cell padding, collapsed borders, and whether the code uses inline styles or a small CSS class block.
  3. Check the rendered preview, then click Copy code to put the generated HTML on your clipboard, ready to paste into your page or email template.

Frequently asked questions

What kind of HTML does this table generator produce?
It outputs a standard semantic table: a thead with th cells when the header row is on, and a tbody of tr and td rows. In inline mode each cell carries a short style attribute; in class mode you get a compact style block targeting a .data-table class instead, which keeps the markup itself clean.
Should I choose inline styles or the CSS class option?
Inline styles survive environments that strip style blocks, such as many email clients, CMS rich-text fields, and Markdown renderers that allow raw HTML. The class option produces shorter, more maintainable markup and is the better choice for a normal website where you control the stylesheet. Both render identically in the preview.
Can I import data from a spreadsheet or CSV file?
Yes. Open the Import from CSV section and paste comma-separated text — for example data copied out of Excel or Google Sheets after saving as CSV. Quoted fields, embedded commas, and escaped quotes are handled, and the grid resizes automatically to fit the pasted data so you can keep editing individual cells afterwards.
Is the table I build here uploaded anywhere?
No. The grid editor, the code generator, and the preview all run as JavaScript in your own browser, and the page makes no network requests with your content. You can verify this in the network tab of your browser’s developer tools, which makes the tool safe for internal or confidential data.
What does the border-collapse option actually change?
With collapse on, adjacent cell borders merge into a single line, which is the look most people expect from a data table. With it off, each cell keeps its own border and a small gap appears between cells, giving a more grid-like appearance. The difference is only visible when borders are enabled.

About this tool

This tool builds HTML tables visually so you never have to hand-count tr and td tags. You set the dimensions, type content straight into an editable grid, and the generated markup appears below alongside a rendered preview that shows exactly what the code will look like in a page. A header row toggle switches the first row between th and td cells, keeping the output semantically correct for screen readers and search engines.

Everything happens client-side in your browser. Each change to the grid or the style controls regenerates the code immediately — there is no server, no account, and nothing you type ever leaves your machine. Cell content is HTML-escaped automatically, so text containing angle brackets or ampersands produces valid markup instead of broken tags, a detail that hand-written tables frequently get wrong.

The style options cover the decisions that matter in practice: borders on or off, striped rows for readability in longer tables, three padding sizes, and collapsed versus separated borders. You also choose how the styling is delivered. Inline mode writes a short style attribute on every cell, which is the reliable choice for HTML email and CMS editors that strip style blocks. Class mode emits a small stylesheet targeting a .data-table class, producing leaner markup you can adapt to an existing design system.

For existing data, paste CSV from the import panel — quoted fields and embedded commas are parsed correctly, and the grid resizes to match. A practical tip: keep tables for genuinely tabular data and let the header row describe each column; if you find yourself using a table purely for page layout, CSS grid or flexbox is almost always the better tool. When the preview looks right, one click copies the finished code to your clipboard.

Related tools