HTML Table Generator

Pick the number of rows and columns, edit and merge cells, and copy the generated HTML table markup. You can add CSS such as borders and zebra stripes, and cell text is escaped automatically. To pull data out of an HTML table instead, use the HTML Table to CSV Converter.

🔒 Runs in your browser · Your data is never sent to a server

Table size

Rows

Columns

Paste from Excel or a spreadsheet (tab-separated)

Table editor

Merge cells

From row

To row

From column

To column

Style and output

Use the first row as the header (thead, th)

Style

CSS output

Padding (px)

Border color

Class name

Caption (optional)

Stretch to full width

Preview

HTML

How to use

Set the size with "Rows" and "Columns", then type into the cells. A table from Excel can be pasted with "Load into table".
Enter the range to join using "From row" through "To column", then press "Merge cells". To undo, pick any cell in the range and press "Unmerge".
Choose a "Style", the "CSS output" method, and the padding and border color. The preview and the code update right away.
Press "Copy" on the "HTML" box below, or "Download" to save it as a file.

Notes

Characters such as & < and > in cells are escaped automatically, and line breaks become br tags (<br>). HTML typed into a cell will not act as markup.
With the header row on, the first row is written as th cells inside thead, and a vertical merge (rowspan) in that row is ignored.
Merging clears the text of every cell in the range except the top-left one.
Stripe and header colors are fixed. For finer design, edit the generated CSS.
The preview is rendered with this page's own styles. Your site's CSS may change how the table looks.

Glossary

colspan / rowspan

HTML attributes that make a cell span several columns (colspan) or rows (rowspan).

thead / tbody / th

thead groups the header rows, tbody groups the body rows, and th marks a header cell. They help screen readers understand the table structure.

Inline styles

CSS written directly in an element's style attribute. Useful where a style tag is not allowed, such as HTML email.

FAQ

How do I merge cells, and how do I undo it?

Enter the range with "From row", "To row", "From column" and "To column", then press "Merge cells". The top-left cell gets colspan and rowspan. To undo, pick any cell in the range and press "Unmerge". The text of the other cells in the range is cleared when you merge.

Is it safe to type "<" or "&" in a cell?

Yes. Cell text is escaped to entities like < and & in the output, so it is never read as HTML. Line breaks become br tags.

Should I use a style tag or inline styles?

For a normal web page, a style tag with a class is easier to maintain. Choose inline styles where a style tag is not allowed, such as HTML email or some CMS fields; each element then gets its own style attribute.

Why can I not merge the header row vertically?

The header row is written inside thead, separate from the body rows, so its rowspan is ignored. Turn off the header option if you need a vertical merge there. Horizontal merges (colspan) still work.

Share this page

X f LINE Threads Bluesky Reddit