Selected:
Click a cell to select its row and column, then insert or delete at that position — no need to remove the rows below first.
The generated table is semantic and accessible: a caption when enabled, <th> headers with scope="col", and thead/tbody sections. Cell text is plain text — special characters are escaped automatically.
What is the HTML Table Generator?
The HTML Table Generator is a free online tool that builds an HTML table for you — the rows, columns, headers, caption and borders — and gives you semantic, accessible markup in return. You set the size, type straight into the cells, and the tool produces a proper <table> with a caption, <th> headers, and <thead> and <tbody> sections. It is made for anyone who needs a table on a page: a pricing comparison, a set of opening hours, a list of specifications, a class timetable, or a student learning how tables work in HTML.
The markup it produces is the correct way to write a table. Headers use <th> with scope="col", so a screen reader can announce which column a cell belongs to as the reader moves through it. The caption describes what the table is about. Cell text is plain text — special characters are escaped automatically, so a < in a cell displays as < and never breaks the table.
Everything runs in your browser. There is no sign-up, and nothing you type leaves your device.
How to use the HTML Table Generator
- Set the size. Choose the number of Rows (1–100, default 4) and Columns (1–20, default 3), then click “Apply size”. You can also add or remove a single row or column at the end at any time with the Add row, Remove row, Add column and Remove column buttons. To add or remove a row or column in the middle of the table, click a cell to select its row and column, then use Insert above, Insert below and Delete row, or Insert left, Insert right and Delete column — only the selected row or column is affected, the rest shifts up or down intact.
- Type into the cells. Click any cell in the editor and type. The first row is the header row by default — type your column headings there.
- Turn the Header row on or off. With it on, the first row is made of
<th>headers withscope="col". Turn it off if your table has no headers. - Add a Caption. With Caption ticked, the table gets a
<caption>— a short title that sits above the table and tells readers (and screen readers) what it is about. The default caption text is “Sample table”; change it to describe your data. - Choose the Borders. Pick “All cells” for a full grid, “Outer border only” for a clean outline, “Header row only” to underline just the headers, or “No border” for a borderless table you style yourself.
- Set the Border colour. The default is a light grey (
#d9d9d9). Pick a colour that fits your site. - Tick Striped rows if you want them. Alternate rows get a shaded background, which makes wide tables much easier to read across.
- Leave Full width on (or turn it off). Full width stretches the table across its container; unticked, it sizes to its content.
- Watch the live preview. The preview on the right shows the table exactly as a reader will see it, updating as you type.
- Copy or download. Click Copy HTML to take the markup, or Download HTML to save it. Clear table empties the cells; Reset restores the sample table.
Worked example
Say you need a small pricing table with three plans. Set Rows to 4 and Columns to 3 and click “Apply size”. In the header row, type Plan, Monthly and Yearly. In the next three rows, type Basic, $9, $90; Standard, $19, $190; and Premium, $39, $390. Keep the caption, and change the caption text to “Our pricing plans”. The generated HTML looks like this (shortened):
<table>
<caption>Our pricing plans</caption>
<thead>
<tr>
<th scope="col">Plan</th>
<th scope="col">Monthly</th>
<th scope="col">Yearly</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>$9</td>
<td>$90</td>
</tr>
<!-- more rows -->
</tbody>
</table>
The headers are <th> with scope="col", the caption describes the table, and the data rows sit in <tbody>. Paste it into your page and it is a complete, accessible table.
Where a table generator actually helps
Pricing comparisons. A pricing page is a table: plans across the top, features down the side, prices and ticks in the cells. Build it here, turn on Striped rows so readers can follow a row across, and the markup is ready to style with your own CSS.
Opening hours and timetables. A shop’s opening hours, a class timetable, a bus schedule — all of these are tables, and all of them change. Typing into the cell editor is far quicker than editing <tr> and <td> tags by hand, and adding a row when a new day or class appears takes one click.
Specification sheets. Product pages often need a table of specifications — size, weight, material, warranty. A table keeps the labels and values aligned, and the header row tells the reader what each column means. With a caption like “Technical specifications”, a screen reader user knows what they are about to hear before the first cell.
Tips for better tables
- Always use a header row and a caption. A table without headers is a grid of numbers with no meaning, and a table without a caption gives a screen reader user no context. Both are one tick in the settings — leave them on unless you have a specific reason not to.
- One thing per cell. A cell should hold a single value: a price, a time, a name. If you find yourself writing sentences in cells, the content probably belongs in paragraphs, or the table needs more columns.
- Keep tables narrow. A table with ten columns is hard to read on a phone, where it will either squeeze or scroll sideways. If your table is that wide, consider splitting it, or showing only the most important columns on small screens with CSS.
- Use striped rows on wide tables. When a table has many columns, the eye loses its place moving across a row. Striped rows give each row a background that guides the eye — the tool adds them with one tick.
- Do not use a table for layout. Tables are for tabular data. Using one to position a photo next to some text is an old habit from the 1990s, and it confuses screen readers. For layout, use the CSS Flexbox Generator or the CSS Grid Generator instead.
Frequently asked questions
What makes a table accessible?
Three things, and this tool does all of them: headers marked with <th scope="col"> so screen readers can announce the column for each cell, a <caption> that says what the table is about, and the data rows in <tbody> with the headers in <thead>. What the tool cannot do is choose a good caption — write one that describes the data, like “Monthly pricing by plan”, not “Table 1”.
Can I paste text with special characters into cells?
Yes. Cell text is plain text, and special characters are escaped automatically. A <, > or & in a cell displays as the character itself and never breaks the table’s markup. You can safely paste prices, times and measurements.
What is the difference between the border options?
“All cells” draws a border around every cell — the classic spreadsheet look. “Outer border only” draws just the outline of the table, which suits a cleaner design. “Header row only” underlines the header row and leaves the data cells borderless. “No border” draws nothing at all, which is the right choice if you plan to style the table entirely with your own CSS.
How many rows and columns can I have?
Up to 100 rows and 20 columns. That is generous for a page table — if your data is bigger than that, it probably belongs in a downloadable spreadsheet rather than on a page, where it would be hard to read on a phone.
Can I merge cells or add a footer row?
No — the tool builds a straightforward table with a header row, a caption and data rows, which covers the great majority of page tables. If you need merged cells (colspan or rowspan) or a <tfoot> summary row, add them to the generated HTML by hand after copying it.
Conclusion
A table is the right tool for data that belongs in rows and columns, and the HTML for it should be as careful as the data: real headers, a caption, and clean sections. The HTML Table Generator above builds exactly that in minutes, with a live preview so you can see the result as you type. Try it with your own data, then use the CSV to HTML Table Converter when your data already lives in a spreadsheet.