HTML Table Generator
Fill the grid, import CSV or paste cells copied from a spreadsheet to create an HTML table. Add a caption, choose row and column headers, and align each column. Copy the table markup and, if wanted, the separate bordered or striped stylesheet. Cell contents are escaped as text, and headers include scope attributes. The editable grid holds up to 100 rows and 20 columns; the preview shows the table with the selected style.
Grid
C1 | C2 | C3 | ||
|---|---|---|---|---|
| 1 | ||||
| 2 | ||||
| 3 |
HTML
<table class="data-table">
<caption>Order</caption>
<thead>
<tr>
<th scope="col" style="text-align: left">Name</th>
<th scope="col" style="text-align: right">Qty</th>
<th scope="col" style="text-align: right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wrench</td>
<td style="text-align: right">2</td>
<td style="text-align: right">4.50</td>
</tr>
<tr>
<td>Hammer</td>
<td style="text-align: right">1</td>
<td style="text-align: right">12.00</td>
</tr>
</tbody>
</table>- Header
3 rows by 3 columns, header row on, header column off, caption on, bordered CSS.
Preview
The markup above, drawn with the stylesheet above it, on white. Long text wraps here so nothing widens the page.
| Name | Qty | Price |
|---|---|---|
| Wrench | 2 | 4.50 |
| Hammer | 1 | 12.00 |
Import a CSV
Paste rows from a spreadsheet or open a file. A value wrapped in double quotes keeps its commas, its line breaks and any quote written twice inside it. Importing replaces the grid.
- th with scope="col"
- off, the first column is ordinary data
- escaped to a < b
Where each piece goes. The HTML pane is the whole table: paste it where you want the table to appear. The stylesheet is separate, so paste it into your CSS file or inside a style element, once per page rather than once per table. Column alignment is written onto the cells themselves, so a table copied without the CSS still lines its numbers up. The Rows and Columns fields apply when you press Enter or move on, so typing over a number cannot take a row with it on the way. Up to 100 rows by 20 columns, and the grid is kept in this browser alone, as a saved record of up to 200,000 characters, so it is still here when you come back. Start over above forgets it.
Accuracy. The markup is the grid on screen, with a caption and scope attributes so a screen reader can read it. Every cell is escaped, so text containing angle brackets or ampersands becomes text in the table rather than markup. The caption appears when you type one and the scope attributes when a header row or header column is on; how the table finally looks depends on the CSS of the page you paste it into.
Common questions
- Is the text I type escaped?
- Yes, every cell and the caption too. Five characters change meaning inside markup and all five are replaced before the cell is written: the ampersand becomes &, the angle brackets become < and >, the double quote becomes " and the apostrophe becomes '. The ampersand is handled first, so an entity you typed by hand stays literal instead of being half decoded. In practice that means a cell holding a script tag arrives in your page as the characters of that tag, on screen inside a td, with no script anywhere in the output, and a cell starting with a double quote cannot break out of the alignment attribute next to it. This matters most for the case people actually hit: a spreadsheet column of product names with ampersands in them, pasted into a page that then renders with half a table missing.
- What makes the markup accessible?
- Three things, and each one is switched by a control you can see. A header row emits a thead with th scope="col" on every heading, which is what tells a screen reader which column a value belongs to. A header column emits th scope="row" on the first cell of every body row, for a table whose rows are the labels. A caption is emitted only when you type one, inside the table and before the body, which gives the table a name read out before its contents. Turn both off and there is no thead and no scope attribute in the output, because inventing one for a table that has no headings would be worse than leaving it out. The row numbers and the remove buttons in the editor are part of the editor, not the table: they never appear in the markup.
- Can I paste a CSV or a spreadsheet column?
- Yes. Paste into the import box or open a .csv file from your device, and the grid is replaced by what arrives. Quoted values survive exactly: "Smith, John" stays one cell with the comma in it, a doubled quote inside quotes becomes one quote, and a line break inside quotes stays inside that cell. The separator is worked out from the file, counting commas, semicolons and tabs outside quoted values, so a sheet copied straight out of Excel as tab separated text lands correctly; when the guess is wrong the Comma, Semicolon and Tab buttons override it. Nothing is changed silently: rows shorter than the widest are filled out with empty cells and the count of them is reported, blank lines are skipped and counted, and a file past 100 rows or 20 columns is refused with both numbers rather than trimmed. Copy CSV writes the grid back out, quoting only the values that need it.
- How do I right align a column of numbers?
- Each column heading in the editor carries L, C and R buttons; pick R and that column aligns right in the preview and in the markup. The alignment is written onto each cell as style="text-align: right" rather than into the stylesheet, which is the whole point: a table pasted into a page that has no room for extra CSS still lines its numbers up. Header cells always carry their alignment explicitly, because every browser centres a th by default and a header would otherwise sit out of line with the column under it. An ordinary left aligned data cell carries nothing at all, since left is already what a td does.
- Where does the CSS go, and can I skip it?
- The stylesheet is separate from the markup on purpose. Copy CSS gives you rules written around the class data-table, which the table carries, so it goes in your stylesheet or inside a style element once per page rather than once per table. Three choices: No CSS emits a bare table tag with no class and hands over no stylesheet, for a page that styles its own tables; Bordered adds collapsed borders, padding and a shaded header; Striped adds a background to every second body row on top of that. The preview under the markup is drawn with those same rules under a different class name, so it shows what the copied stylesheet does rather than an approximation of it. It adds one thing of its own, stated under the heading: long text wraps in the preview so nothing widens the page.
- How large can the table be?
- Up to 100 rows by 20 columns. That is a hand-built table, which is what this is for, and the limit exists so an editable grid of text boxes stays quick to type in. Past it nothing is cut down quietly: a CSV with 21 columns or 101 rows is refused with its own numbers and the limit beside them, so you can split the file or drop the columns you do not need and import again. The same holds for the Rows and Columns fields: a value that is not a whole number, or one outside 1 to 100, says so and leaves the grid alone, and shrinking the grid reports how many filled cells went with the rows or columns you cut.
- Is my table uploaded, and is it still here tomorrow?
- Nothing is uploaded and there is no account. The grid, the caption, the header settings, the alignment and the stylesheet choice are worked out in your own browser, and the draft is kept in this browser alone, as a saved record of up to 200,000 characters, so the table is still there when you come back. Nothing is sent anywhere, and the text in your cells is never part of any measurement this site takes. The Start over button above the tool forgets the draft, and a browser with storage blocked or in private mode runs the tool exactly the same way: it simply does not remember.
- Does it generate a Markdown table or a CSV instead?
- It generates HTML, and it will hand the grid back to you as CSV with Copy CSV, which is the format a spreadsheet reads. Markdown is a different job and a different page. What the HTML gives you that a Markdown table cannot is the caption, the scope attributes and the per-column alignment written onto the cells, which is why this output is worth pasting into a page rather than a fenced block.
- How do I convert CSV to an HTML table?
- Paste CSV in the import box and press Import, or choose Open file. Use Detect or select Comma, Semicolon or Tab. Review the resulting grid, turn the header row on if appropriate, and copy the table markup. Copy CSS separately for borders or stripes. The result is a static table; it does not fetch CSV again, update from a URL or add sorting and filtering scripts.
- Can I convert an Excel spreadsheet to HTML?
- Copy the cells from Excel or another spreadsheet and paste the tab-separated values into the import box. You can also export a worksheet as CSV and open that file. This page does not read XLSX or DOCX directly, and pasted values do not retain formulas, merged cells, fonts or charts. Use <a href="/spreadsheet-converter">Spreadsheet Converter</a> first if you need a CSV from an XLSX file.
- Can I generate a table without CSS or with inline styles?
- No CSS omits the table class and stylesheet. Column alignment still appears inline on headers and on centered or right-aligned cells. Bordered and Striped put the other appearance rules in a separate stylesheet; this is not a full CSS-inlining tool or an email-template generator. Check the destination page or email client when using its own styling rules.
- Does it support merged cells, images or responsive layouts?
- Cells are plain text. There are no colspan or rowspan controls, nested tables, images, links, Bootstrap classes or div-based layouts. The preview wraps long text, but the copied markup does not include a scrolling wrapper or responsive breakpoint rules. Add those in the destination page if required; its CSS determines the final appearance.
- Can I paste it into WordPress or Blogger?
- Copy the HTML into a custom HTML block or another area that accepts table markup, and add the optional stylesheet wherever that site allows custom CSS. The tool does not publish to a CMS, install a plugin or control the destination theme. Some editors remove style attributes or other markup, so preview the pasted result there.
- Can it turn an existing HTML table back into CSV?
- Copy CSV exports the grid currently in this tool. It does not import HTML markup, scrape a web page or extract tables from a URL. For Markdown output from spreadsheet data, use <a href="/markdown-table-generator">Markdown Table Generator</a>.
The markup is the grid on screen, with a caption and scope attributes so a screen reader can read it. Every cell is escaped, so text containing angle brackets or ampersands becomes text in the table rather than markup. The caption appears when you type one and the scope attributes when a header row or header column is on; how the table finally looks depends on the CSS of the page you paste it into.