How the table generator works
The grid on the left starts with 4 rows and 4 columns, labelled like a spreadsheet (A, B, C across and 1, 2, 3 down). Use + Row, - Row, + Column, and - Column to resize it. Adding appends a row at the bottom or a column on the right, and removing always deletes the last one, together with anything typed in it. The grid never goes below one row and one column.
Type a value in each cell, then click Generate. The tool builds the HTML in the right editor and renders it in the Preview box underneath. Two options change the structure:
- First row as header (th) moves row 1 into a
<thead> and uses <th> cells for it. All other rows go into <tbody>.
- Caption adds a
<caption> element with the text from the caption field. If the field is empty, the placeholder text "Table Caption" is used, so fill it in or untick the option.
Once there is output, changing either option or typing in the caption field regenerates the table immediately. Editing a cell does not, so click Generate again after changing values.
Example: a pricing table
Click - Column once to get a 4 by 3 grid, fill it in, tick both options, and enter "Hosting plans" as the caption:
| A | B | C |
|---|
| 1 | Plan | Storage | Price per month |
| 2 | Starter | 10 GB | $4 |
| 3 | Pro | 100 GB | $12 |
| 4 | Agency & Teams | 1 TB | $40 |
Generate produces:
<table border="1" cellpadding="6" cellspacing="0">
<caption>Hosting plans</caption>
<thead>
<tr>
<th>Plan</th>
<th>Storage</th>
<th>Price per month</th>
</tr>
</thead>
<tbody>
<tr>
<td>Starter</td>
<td>10 GB</td>
<td>$4</td>
</tr>
<tr>
<td>Pro</td>
<td>100 GB</td>
<td>$12</td>
</tr>
<tr>
<td>Agency & Teams</td>
<td>1 TB</td>
<td>$40</td>
</tr>
</tbody>
</table>
Note that the ampersand in "Agency & Teams" was written as &. Every cell value is escaped, so characters such as < and & display exactly as you typed them and cannot break the markup.
Making the output production-ready
Replace the presentational attributes with CSS
border="1", cellpadding="6", and cellspacing="0" are there so the table looks like a table wherever you paste it, including emails and CMS fields that strip styles. HTML5 marks them as obsolete, and HTML validators flag them. On a website, delete them and use CSS instead:
table { border-collapse: collapse; }
th, td { border: 1px solid #d1d5db; padding: 6px; text-align: left; }
Add scope for complex headers
The generated <th> cells have no scope attribute. For a table with a single header row, screen readers work that out on their own. If you later turn the first column into row headers as well, add scope="col" and scope="row" so each header is announced correctly.
Add links and formatting after generating
Because cell values are escaped, typing <a href="/pricing"> in a cell produces visible text, not a link. Make those changes in the output editor, which you can edit directly. Clicking Generate, toggling an option, or editing the caption replaces the output, so do your manual edits last.
What the generator does not do
- No merged cells:
colspan and rowspan have to be added by hand.
- No header column,
<tfoot>, column alignment, CSS classes, or styling options.
- No import. You cannot paste a spreadsheet range or load a CSV file into the grid.
- No saving. The grid is lost when you reload the page, so copy or download (as
table.html) before leaving.
When to use a different tool
- To style the table or combine it with the rest of a page, paste the output into the HTML Editor.
- To write the table CSS from the example above, use the CSS Editor.
- If your table is headed for a README or wiki, write it in Markdown and convert it with Markdown to HTML, which supports GitHub-style table syntax.
- If your data is already in a spreadsheet export, the CSV to JSON converter turns it into structured data for code.
Frequently asked questions
How do I make the first row a header row?
Tick "First row as header (th)" before or after clicking Generate. Row 1 of the grid is then output inside a thead element with th cells instead of td cells, and the remaining rows go into tbody. Screen readers use th cells to announce which column a value belongs to.
Can I merge cells with colspan or rowspan?
Not in the grid. Every row has the same number of cells. Generate the table, then edit the output: add colspan="2" to the cell that should span two columns and delete one of the cells next to it in the same row. Do this as your last step, because clicking Generate again replaces the output.
Can I paste data from Excel or Google Sheets?
No. Each cell is a single-line text field, so pasting a copied range puts all of it into one cell. For a large spreadsheet, exporting it as HTML from the spreadsheet program is faster than retyping it here.
Why does the output use border, cellpadding, and cellspacing?
They make the table readable when you paste it somewhere without CSS, such as an email or a basic CMS field. These attributes are obsolete in HTML5 and validators will warn about them, although browsers still support them. For a website, delete them and style the table with CSS.
Why does the bold tag I typed show up as text?
Everything you type in a cell is escaped, so characters like <, >, and & are output as entities and appear on the page exactly as typed. This keeps a stray < from breaking the table. To add links or formatting, edit the generated HTML.
Is my table saved?
No. The grid lives only in the open page and is lost when you reload or close it, so copy or download the output when you are done. Nothing you type is sent to a server.