IZN Tools

HTML Table Generator

Build a table in a grid, get clean markup out.

<table>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Price</th>
      <th scope="col">Storage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>$0</td>
      <td>1 GB</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$9</td>
      <td>100 GB</td>
    </tr>
  </tbody>
</table>
3 × 3Header cells carry scope, so screen readers can announce which column and row a value belongs to.
Computed on this device
Related
HTML FormatterCSV to JSON ConverterEmail Signature GeneratorPassword GeneratorQR Code GeneratorCSS Gradient Generator

What makes table markup good

  • A header row that is <th>, not bold <td>. Styling is not structure.
  • scope on every header cell. col for a header row, row for a header column.
  • <caption> rather than a paragraph above. It binds the description to the table for assistive technology.
  • <thead> and <tbody>. Lets long tables repeat the header when printed.

All four come out of this generator automatically when you switch the header options on.

The output you get

| Output | Use for | | --- | --- | | HTML | the page itself | | CSS | borders, striping and spacing, as a separate block | | Markdown | README files, documentation, issue comments |

The CSS is generated to match a class name if you set one, so it can be dropped into a stylesheet without touching every other table on the site.

Making a table readable

Striping helps at more than about six rows and is noise below that. Right-align numeric columns so the digits line up — that alone makes a price column readable at a glance. And keep the header short: a wrapped header cell pushes every column out of alignment.

Built in your browser

The grid, the escaping and the markup generation all happen on this page. Paste in production data if you need to — none of it goes anywhere.

Questions

Why does the header cell need scope?+

Without it a screen reader reads a table as a flat run of values with no idea which column each belongs to. `<th scope="col">` lets it announce "Price, 10" instead of just "10". It costs nothing and it is the single biggest accessibility difference between a good table and a bad one.

Can I paste from Excel or Google Sheets?+

Yes. Spreadsheets put tab-separated text on the clipboard, and this reads that as well as CSV. Copy the range, click Paste data, paste, import.

Should I use a table for layout?+

Not for page layout — that is what CSS grid is for. The one exception is HTML email, where Outlook's rendering engine ignores flexbox and grid, so table layout is still the only thing that works.

Is the output escaped?+

Yes. Every cell, and the caption, are HTML-escaped, so a value containing `<` or `&` produces valid markup rather than breaking the page.