📊 HTML Table Generator

What is the HTML Table Generator?

An HTML table is built from a small set of nested tags. The outer table tag wraps everything. Inside, rows are marked with tr (table row), and within each row you place cells. A header cell uses th, while a normal data cell uses td. Browsers render th text as bold and centered by default and, more importantly, screen readers announce th cells as the headings that describe the data beneath them. That accessibility link is the main reason to mark headers correctly rather than just bolding ordinary cells.

Well-formed tables also group their rows. The thead element holds the header row, and tbody holds the data rows. This grouping is optional for a browser to display the table, but it is good practice: it makes the markup easier to read, lets you style the header separately, and helps assistive technology and table-sorting scripts tell the heading apart from the content. This generator always emits thead (when you keep the header on) and tbody, with consistent indentation, so the output is clean enough to drop straight into a project.

The one risk with any user-supplied table content is unescaped text. If a cell contains a character such as the less-than sign, a literal ampersand, or a double quote, pasting it raw into HTML can corrupt the structure or, in a live app, open a path for injected markup. To prevent that, this tool converts those characters into their safe HTML entities before building the code. What you see in the preview is exactly what a browser will show, and what you copy is safe to publish.

When to use it

• Quickly scaffolding a data table for a blog post, documentation page, or email newsletter.
• Creating a clean starting point you can later style with CSS classes or a framework.
• Teaching or learning how thead, tbody, tr, th, and td fit together by seeing the markup update live.
• Building a small comparison or pricing table without hand-typing every tag.

How to use the HTML Table Generator

1. Set the number of body rows and columns you want.
2. Toggle the header row on or off, and optionally add a border attribute.
3. Type your text into each cell in the editable grid.
4. Check the live preview, then copy the generated HTML table code.

Formula & method

Worked examples

Core HTML table tags and what each one does

Characters that are escaped before being placed in a cell

Common mistakes to avoid

• Using td for headings instead of th. Bolding a normal cell looks like a header but is not one. Screen readers and table tools rely on th to know which cells are headings, so always mark heading cells as th. Keep the header toggle on for the top row.
• Pasting unescaped special characters. Typing a raw less-than sign or ampersand directly into hand-written HTML can break the table or display nothing. This tool escapes those characters automatically, so copy from here rather than retyping the tags by hand.
• Mismatched cell counts across rows. If one row has more or fewer cells than the others, the columns will not line up. Building from a fixed rows by columns grid, as this tool does, guarantees every row has the same number of cells.
• Relying on the border attribute for styling. The border attribute draws a basic outline but is considered outdated for real design. Use it for a quick check, then style borders, padding, and colors with CSS in production.

Glossary

table

The element that wraps an entire HTML table.

thead

A grouping element that contains the table header row.

tbody

A grouping element that contains the table body (data) rows.

tr

Table row: a single horizontal line of cells.

th

Table header cell: a heading cell, styled bold and announced as a header by assistive tech.

td

Table data cell: a standard cell holding ordinary content.

HTML escaping

Converting characters like the less-than sign or ampersand into safe entities so they display literally instead of being read as code.

Frequently asked questions