HTML Table Generator: Free Online Builder

An HTML table generator builds the markup for a table so you do not have to type every tag by hand. With this free tool, you pick 1 to 20 rows and 1 to 10 columns, choose whether to include a header row, check a live preview, and copy clean table code in one click.

What Is an HTML Table?

An HTML table is a grid of rows and columns that displays data in a structured way, written with the table element and a handful of child tags. Browsers use that structure to line up values, and screen readers use it to announce which header belongs to which cell.

Six tags do most of the work:

• table wraps the whole grid.
• thead holds the header row, and tbody holds the data rows.
• tr creates one row.
• th is a header cell, which tells browsers and assistive technology that the text labels a column.
• td is a regular data cell.

Tables are for data that has a natural row and column relationship, such as prices, schedules or comparisons. They are not a page layout method. Use CSS Flexbox or Grid for layout instead.

How Do You Use the HTML Table Generator?

You use the generator by setting the table size, choosing your options, clicking one button and copying the code. It takes under a minute.

1. Enter the number of Rows, from 1 to 20. The default is 4. This counts data rows only, because the header row is added separately.
2. Enter the number of Columns, from 1 to 10. The default is 3.
3. Keep Include header row ticked if you want a thead section with th cells. Untick it for a table with data rows only.
4. Look at the style controls: Striped rows, Show borders, Header Color (default #6366f1) and Stripe Color (default #f0f0ff). Treat them as a design reference. The Generated HTML box holds the table structure, and you apply borders, stripes and colors with your own CSS (examples below).
5. Click Generate Table. The preview appears first, and the code appears in the Generated HTML box under it.
6. Click Copy. The button changes to Copied! for two seconds, and the code is on your clipboard.
7. Paste it into your page and replace the placeholder text with your real content.

Worked Example: A 4 by 3 Table With a Header

If you leave the defaults (4 rows, 3 columns, header row on) and click Generate Table, you get a complete 15-cell table. Here is what each setting produces.

The header cells are labeled Header 1, Header 2 and Header 3. The data cells are labeled by position, so Cell 1,1 is row 1, column 1 and Cell 4,3 is row 4, column 3. That makes it easy to see where each value belongs.

Suppose you want a small pricing table with a Plan column, a Price column and a Storage column. Replace the three header labels with those names, then overwrite the 12 placeholder cells with your plans. The structure stays valid, and you never touch a closing tag.

How Do You Read and Use the Generated Code?

The Generated HTML box shows exactly what you will paste, so read it before you copy. It contains the table, its optional header section, the body rows and the placeholder text, with no extra wrapper.

Preview versus code

The preview shows how the browser renders the markup with default styling, which is plain and unbordered. A plain preview is normal. The code is the structure, and the look comes from your stylesheet.

Add borders, stripes and header color with CSS

A short stylesheet turns the plain table into a styled one. These rules reproduce the tool's default choices:

• table { border-collapse: collapse; width: 100%; }
• th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
• thead th { background: #6366f1; color: #fff; }
• tbody tr:nth-child(even) { background: #f0f0ff; }

Swap the hex values for your brand colors. If you want no borders, delete the border declaration. If you want no stripes, delete the last rule. Paste the rules into your site stylesheet or a style block, and every table on the page picks them up.

Header row on or off

With the header row on, your table gets a thead section, which helps accessibility and gives you one place to style all headings. Turn it off only when the table truly has no column labels, such as a simple list of paired values.

How Do You Make an HTML Table Responsive or Scrollable?

Wrap the table in a container that scrolls sideways, and the table stays readable on small screens. Add <div style="overflow-x: auto;"> before the table and a closing </div> after it. Wide tables then scroll inside the wrapper instead of breaking the page layout.

You can also limit the height with max-height and overflow-y: auto on the wrapper to make a table scroll vertically. For a header that stays visible, give thead th the rules position: sticky; top: 0; and a background color.

Column width and fit-to-content

To control widths, set table-layout: fixed on the table and give the first row of cells a width, for example th:first-child { width: 30%; }. To make a column shrink to its content, set width: 1% and white-space: nowrap on that column's cells. Columns that users can drag to resize need JavaScript, because plain HTML and CSS do not provide that.

Who Is This Tool For?

The tool suits anyone who needs correct table markup quickly. Common situations include:

• Bloggers who need a comparison or schedule table in a post editor that accepts custom HTML.
• Beginners learning how thead, tbody, tr, th and td fit together, since the preview and code sit side by side.
• Developers who want a clean starting skeleton before adding classes, data or scripts.
• Email and documentation writers who paste a table into a template, then style it to match.
• Anyone working in a plain text editor, such as Notepad: paste the code into a file, save it with an .html extension and open it in your browser.

Best Practices, Common Mistakes and Troubleshooting

Most table problems come from content and styling choices, not from the markup itself. These fixes cover the issues people hit most often.

Practical tips

• Replace every placeholder before publishing. Pages that still say Header 1 or Cell 2,3 look unfinished and give search engines nothing to read.
• Keep headers short and specific, such as Plan, Price and Storage. Clear headers help screen reader users and make the table easier to quote.
• Test your edits in an online HTML editor with a live preview before they go on your site.
• The generated code is compact. Run it through an HTML formatter if you want indented, readable markup while you edit.
• When the page is final, an HTML minifier can shrink the file for production.
• If a cell needs characters like less-than signs or ampersands, an HTML encoder converts them into safe entities so they display as text.

Mistakes to avoid

• Using a table for layout. Reserve tables for real data.
• Skipping the header row. Without th cells, the table loses meaning for assistive technology.
• Forgetting the scroll wrapper. A 10-column table will overflow a phone screen without one.
• Expecting colors in the copied code. If your pasted table looks plain, that is expected. Add the CSS from the section above.

If you see an error message

If you enter 0, 25 rows, a decimal or leave a field empty, the preview shows the message "Enter 1 to 20 whole rows and 1 to 10 whole columns." and the code box stays empty. Type whole numbers inside those ranges and click Generate Table again.

What Are the Limits of This Generator?

The generator creates a simple grid, and it is honest to say what it does not do. Cells are filled with placeholder text, so you type your own content. It does not import data from Excel or CSV files, and it does not merge cells for you.

To merge, edit the copied code by hand. Add colspan="2" to a cell to span two columns, or rowspan="2" to span two rows, and delete the cells that the merged cell now covers. Sizes are capped at 20 rows and 10 columns, which covers most page tables. For longer data, paste the code and duplicate a row.

For more helpers like this one, browse the Web Developer Tools collection. If your finished table sits inside a rounded card, the border radius generator creates the corner CSS.

Set your rows and columns above, click Generate Table, and copy a valid table in seconds. Then add your content and a few lines of CSS, and your table is ready to publish.