Htmlify.dev

HTML Table Generator

Fill in the grid, pick a style, copy the code. The generator writes a semantic table with a proper header row and escaped cells, and it keeps the CSS out of your markup unless you ask for a preset.

4 cols
3 rows
th
1
2
3

Tip: paste a block of cells from Excel or Google Sheets into any cell to fill the grid from there. Press Enter to move down a row.

Letters, digits, - and _ only.

4 columns · 3 rows · 1,064 characters

Plan Price Storage Support
Free $0 5 GB Community
Pro $12 / mo 200 GB Email
Team $49 / mo 2 TB Priority

How to use the table generator

  1. Type your column headings into the first (shaded) row.
  2. Fill in the cells. Press Enter to jump down a row, Tab to move right. Use the + and − controls to resize the grid.
  3. Optionally paste a block copied from a spreadsheet into any cell to fill from there.
  4. Choose a style preset, add a caption, then copy the HTML from the code tab or download it.

The HTML you get

<table class="htmlify-table">
  <caption>Pricing</caption>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>$0</td>
    </tr>
  </tbody>
</table>

scope="col" on the header cells lets screen readers announce the heading for each value, and the caption gives the table an accessible name. Both are cheap to include and easy to forget when hand-writing tables.

Style presets

  • Bare HTML: no class, no CSS. The table inherits whatever your page already styles.
  • Minimal: horizontal rules between rows, bold header, system font.
  • Striped rows: shaded header and alternating row background.
  • Bordered grid: a border on every cell, the classic spreadsheet look.

The CSS is scoped to the table’s class, so you can paste several generated tables into one page without them interfering with each other or with your existing tables.

Frequently asked questions

How do I make an HTML table without writing the tags by hand?
Type your headings in the first row of the grid, fill in the cells, and add rows or columns with the + buttons. The HTML code updates as you type. Copy it from the HTML Code tab or download it as a file.
Can I paste data instead of typing it?
Yes. Click any cell and paste a block copied from Excel, Google Sheets or a CSV file. The grid grows to fit the pasted block starting at that cell.
What markup does the generator produce?
A table element with a thead containing th elements marked scope="col", a tbody with one tr per row, and an optional caption. Cell text is escaped. If you choose a style preset, a short style block is added above the table; choose Bare HTML for markup only.
Can I add borders or striped rows?
Pick Bordered grid or Striped rows in the Style selector. The CSS is scoped to the class on the table (htmlify-table by default, or the class you type), so it will not affect other tables on your page.
How many rows and columns are supported?
Up to 20 columns and 100 rows in the editor. For larger data sets, use the CSV, JSON or Excel converters on this site instead.

More free HTML converters