HTML Table Generator

Writing HTML tables by hand is repetitive and unforgiving: every row repeats the same tags, and one missing closing tag breaks the whole layout. This generator gives you a visual grid instead. Set the size, click cells to type, toggle a few styling options, and copy clean semantic HTML5 plus matching CSS into a website, blog post, or email template. The editor, live preview, and code output all sit on one page, so you can see exactly what will be pasted before you copy it.

Building a Table Step by Step

1. Set the number of rows and columns, then press Update Size. The grid starts at 3 by 3.
2. Click any cell to edit it in place. An input replaces the cell text; press Enter to save the value, or Escape to discard the edit and restore the previous value.
3. Toggle Bordered, Striped, Hoverable, and Header, and optionally type a caption. Each change redraws the preview and the code immediately.
4. Use the two Copy buttons to take the HTML and the CSS separately, then paste them into your project.

A Generated Example

A 2-column by 2-row table with a caption and the default toggles enabled produces markup in this shape:

<table class="handytools-table bordered striped hoverable">
  <caption>Pricing</caption>
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>$0</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$12</td>
    </tr>
  </tbody>
</table>

The matching CSS sets width: 100% and border-collapse: collapse on the base class, adds eight pixels of vertical and twelve of horizontal padding to every cell with left-aligned text, then appends rules for whichever options are enabled.

Styling Options Explained

Toggle	Adds to the HTML	Adds to the CSS
Bordered	bordered class	1px solid #ddd border on th and td
Striped	striped class	Light background on tbody tr:nth-child(even)
Hoverable	hoverable class	Background change on tbody tr:hover
Header	thead with th cells	Th shading and bold weight

The class names are additive, so switching a toggle off simply removes the modifier and its rule. Because everything shares one base class, restyling later means editing a single rule rather than hunting through inline styles. The header option is slightly special: when it is on, the first row is wrapped in thead and the remaining rows in tbody, and the th shading rule is emitted. When it is off, all rows stay in tbody, but the first row’s cells are still written as th because the grid stores them that way. If you need ordinary cells in the first row, edit the copied markup after generating it.

Writing Cell Content

Cell values are HTML-escaped on output, so typing <, >, &, ", or ' produces safe text rather than broken markup. That makes the tool convenient for comparison tables that mention code or operators, such as “a < b” or “price & tax”. The escaping happens in the generated code, not in the on-screen editor, so the grid shows what you typed while the output shows the safe equivalent. There are no formatting controls: no bold, italic, links, or line breaks inside a cell. For richer content, generate the skeleton and then hand-edit the copied HTML.

Resizing and Edge Cases

The most important limitation is destructive resizing: Update Size calls the table builder fresh, so it clears every cell. The grid is otherwise plain — there is no merge or split, no rowspan or colspan, no alignment controls, and no insert-row or insert-column buttons in the interface. Rows are limited to 50 and columns to 20; a number typed outside that range is clamped rather than rejected. If you need a structure the grid cannot express, generate a starting point and refine the copied markup by hand.

Where the Output Fits

• Blog and CMS content: add comparison or pricing tables without touching code.
• Documentation and README files: produce consistent data tables quickly.
• Email templates: build a table, then inline the CSS if a client strips style blocks.
• Prototyping: sketch a layout, then keep or replace the generated CSS.

One caveat for email: :hover and nth-child are ignored by some mail clients, so striped and hoverable effects may not survive there even though the markup is valid. Bordered and header shading, which use ordinary properties, travel more reliably.

Accessibility Notes

The generated markup is a reasonable accessibility starting point. Header cells use th inside thead, which lets screen readers associate a column heading with the values beneath it, and the caption element gives the table an accessible name that assistive technology can announce. What the generator does not add is scope attributes on header cells or a longer summary of the table’s purpose. For a large or complex table, edit the copied HTML to add scope="col" or scope="row" to each header cell. Striping improves readability for sighted users, but it is not a substitute for marking the header row semantically. Keep the caption short and descriptive, because it is the first part of the table that a screen reader announces.

Related Tools

• Markdown Table Generator
• HTML Encoder
• CSV Viewer
• CSS Formatter