gizmobench

HTML Table Generator

Type into the grid and the markup is written beside it, cell by cell, with a caption, a thead, and scope attributes a screen reader can follow. The generators on this search hand back a table and leave you to find out later that a cell containing an ampersand or a less-than sign broke the page you pasted it into; here every cell is escaped before it reaches the markup, so a pasted script tag, a quote or an ampersand comes out as text in a td and nothing else. The grid is editable in place: add or remove a row or a column, set alignment per column, switch the header row and header column on or off, and type a caption to turn one on. Alignment is written onto the cells themselves rather than into the stylesheet, so a table copied without the CSS still lines its numbers up on the right. A CSV pastes or opens straight into the grid, quoted values intact, with the comma, semicolon or tab worked out from the file and overridable, and the tool says what it did: how many rows and columns arrived, how many short rows were padded, how many blank lines were skipped. The preview under the markup is the same grid drawn with the same stylesheet the Copy CSS button hands over, so what you see is what you are about to paste.

Grid3 x 3
The editable grid. Each cell is a text box, Tab moves to the next one.
C1
C2
C3
1
2
3
HTML22 lines
<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.

Order
NameQtyPrice
Wrench24.50
Hammer112.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.

  • Header row3 columns
    th with scope="col"
  • Header column toosame grid
    off, the first column is ordinary data
  • Text with <a < b
    escaped to a &lt; 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 &amp;, the angle brackets become &lt; and &gt;, the double quote becomes &quot; and the apostrophe becomes &#39;. 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.

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.