HTML Table Generator

HTML table generator: markup without the typing

Writing <tr> and <td> tags by hand for a 6×10 table is slow and it is easy to drop a cell. This HTML table generator builds the complete structure for you: a <thead> with header cells, a <tbody> with numbered placeholder cells and an optional <caption>. You then replace the placeholder text with your content.

Example: 2 × 2 table with header and caption

<table border="1" cellpadding="5" cellspacing="0" width="100%">
  <caption>Plans</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
</table>

Header cells are labeled "Header 1", "Header 2" and so on, and body cells "Row 1, Cell 1", which makes it easy to find the right cell when you fill in real content.

Attributes or inline CSS?

The generator offers two styling modes:

• HTML attributes – border, cellpadding, cellspacing and width on the <table> element. They are short and still supported by every browser, and they are the most reliable choice for HTML email, where many clients ignore stylesheets.
• Inline CSS – border-collapse:collapse and a width on the table, plus a border and padding on every cell. This is the modern, standards-compliant approach; the cellpadding and cellspacing attributes are obsolete in HTML5.

For a website with its own stylesheet, the cleanest option is often to generate the table with border 0, remove the inline styles and style the table, th and td elements in CSS.

Accessible tables

• Use a header row – <th> cells tell screen readers which label belongs to each data cell.
• Add a caption – it names the table for all users and is announced first by assistive technology.
• Use tables for data only – page layout belongs in CSS grid or flexbox, not in tables.

Options

• Rows 1–100 and columns 1–30.
• Border width 0–20 px, cell padding 0–50 px, cell spacing 0–50 px.
• Width as a percentage (100%) or pixels (600).

Already have the data?

If your table content lives in a spreadsheet, skip the placeholders: convert it directly with CSV to HTML or Excel to HTML. For Markdown documents, use the Markdown table generator instead. The table is generated in your browser.

Finishing the generated table

The generator gives you a clean grid. A few small additions turn it into a table that is easier to read and to style:

<th scope="col">Price</th>
...
<tfoot>
  <tr><td>Total</td><td class="num">$120</td></tr>
</tfoot>

tbody tr:nth-child(even) { background: #f6f7f9; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

• scope="col" on header cells makes the link between headers and data explicit for screen readers.
• <tfoot> holds totals or notes and belongs after the body.
• Right-aligned numbers with tabular figures line up digit by digit, which makes columns of prices easy to compare.
• Zebra stripes via nth-child(even) help the eye follow long rows without adding borders.