HTML Table Generator - Free Online

Back to Tools

HTML Table Generator Pro

Create, edit, and export professional HTML tables with live visual synchronization

0Total Cells

Rows:

Columns:

Table Class:

Include Header

Build an HTML table without typing every tag

Writing table markup by hand means repeating tr, th and td dozens of times, and one forgotten closing tag can wreck the layout. This generator creates the skeleton for you from a few numbers, lets you type your content directly into a visual grid, and keeps a code panel in sync so you can copy the finished HTML.

Creating and filling a table

Set Rows (1 to 50) and Columns (1 to 15) at the top of the tool.
Optionally type a name into Table Class, for example a class from your own stylesheet, so the output already carries it.
Leave Include Header ticked if you want a thead row of th cells, or untick it for a body-only table.
Click Generate Editable Table. The stat in the header shows the total number of cells.
In the Live Visual Editor, click any cell and type. Placeholder text such as Header 1 or Cell 2-3 is replaced as you write.
Copy the markup from Generated HTML Code using Copy HTML.

Working in both directions

The link between the two panels goes both ways. Editing a cell rewrites the code instantly. Editing the code, for example to add a colspan attribute, a caption element or an id, redraws the visual table above it. If the code has grown untidy after manual edits, press Format HTML to re-indent it.

What ends up in the output

A thead with one row of th cells when a header is requested, followed by a tbody with your data rows.
Only structural markup: there are no inline styles, borders or colours, so all appearance comes from your own CSS.
The editing helper class and the contenteditable attributes are stripped, leaving clean tags.

Ideas for using it

Drafting a pricing or comparison table for a blog post in a CMS that accepts raw HTML.
Making a quick schedule or specification sheet for an email template.
Creating a starter table for a student web-design assignment.
Producing a table skeleton to be filled by a developer's template loop.

Good to know

The header row is not counted in the total cell figure, which is simply rows multiplied by columns. If you leave Table Class empty the table tag may keep an empty class attribute that you can delete. There is no built-in merge or split cell button, so use the code panel for colspan and rowspan. Nothing is saved between visits, so copy your work before closing the page. The tool runs in the browser, and the code box should be treated as the source of truth for what you publish.

Related Tools

Frequently Asked Questions

How large a table can I make?

The number fields accept up to 50 rows and 15 columns per table, each with a minimum of 1. If you need something bigger, generate the largest size and duplicate rows in the code panel by hand.

Does the generated code include CSS styling?

No. The markup contains only table, thead, tbody, tr, th and td tags plus any class you type. Borders, spacing and colours come from your own stylesheet or a framework like Bootstrap, whose class you can enter.

Can I merge cells?

There is no merge button, but you can edit the code area directly, adding colspan or rowspan attributes and removing the cells they cover. The visual table redraws as you type, so you can check the result.

Will my typed cell text be kept if I regenerate?

No. Pressing Generate Editable Table builds a fresh grid with placeholder text, so copy your HTML first if you have written content. Editing the code or the cells does not require regenerating.

Is there a way to import data from a spreadsheet?

Not in this tool. You create a grid and type or paste text into each cell. For bulk data, generate the empty structure here and fill the code with your own script or template.