Widget

HTML Table Generator

Details

How to use HTML Table Generator

What the tool does, how to run it, and what to expect from the result.

How to generate an HTML table

Set the number of rows and columns, then type into the cell grid. The live preview mirrors the header, striping, and border toggles, and the HTML output pane updates with every keystroke.

Choose your style output last. A separate CSS block is right for a web page; inline styles are for HTML email, where a <style> element is often stripped.

  • Set rows (up to 20) and columns (up to 12).
  • Type the contents into the cell grid, starting with the header row.
  • Toggle the header row, striping, and borders and watch the preview.
  • Pick a separate CSS block or inline styles.
  • Press Copy HTML and paste it into your page, wrapping it in an overflow-x: auto div if it is wide.
Tips

Getting a better result out of HTML Table Generator

Specific settings and thresholds, not general advice.

  • The grid is capped at 20 rows and 12 columns. If you need more than that, you are past the point where hand-building a table is the right approach, and should be rendering rows from data instead.
  • Every cell is HTML-escaped, so typing < or & produces &lt; and &amp; in the output. You cannot smuggle markup into a cell, which is the safe default but means you cannot put a link inside one either.
  • Separate CSS block gives you a .generated-table class and one <style> element. Inline styles repeat the same declarations on every single cell, which for a 20x12 table balloons the HTML. Use inline only where a stylesheet cannot reach, such as an HTML email.
  • The header row emits <th> elements. Keep it on: a table without header cells is unreadable to screen readers, which rely on <th> to announce which column a value belongs to.
  • Striping in CSS-block mode is done with tbody tr:nth-child(even), so it is applied by the browser and follows the rows even after you edit them. In inline mode the stripe color is baked into each row and will not re-flow if you reorder rows by hand.
Limits

What HTML Table Generator does not do

The honest boundary, so you do not lose time finding it yourself.

  • No colspan or rowspan. Every cell is a plain single cell.
  • No <thead>, <tbody>, or <caption> elements are emitted, and no scope attributes on the header cells.
  • No per-column alignment, width, or number formatting.
  • No paste-from-CSV or paste-from-spreadsheet import. Cells are typed in one at a time.
Reference

Terms used on this page

Short, plain-language definitions for the formats and settings above.

At a glance

Who HTML Table Generator is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Anyone building an HTML table to paste in.

Ideal for

Using the html table generator without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Should I pick inline styles or a separate CSS block?

A separate CSS block for anything on a web page: it is smaller, and you can restyle the whole table from one rule. Inline styles only for HTML email, where many clients strip <style> elements, so declarations have to sit on each cell. Inline output repeats the same padding and border on every cell, so it grows fast.

Is this table accessible?

Partly. Keeping the header row on gives you real <th> cells, which is the single most important thing. It does not add scope="col" or a <caption>, both of which help screen readers. Add them by hand: a caption naming the table and scope="col" on each th.

Can I put a link or an image inside a cell?

Not from the tool. Cell content is HTML-escaped, so <a href="..."> comes out as visible text rather than a link. Generate the table structure here, then paste the markup into your editor and replace the cell text with real markup.

How do I make the table scroll on mobile instead of breaking the layout?

Wrap the copied <table> in a div with overflow-x: auto. The generated table is width: 100%, which on a narrow screen squeezes columns until the text wraps to one character per line. A horizontally scrolling wrapper is almost always the better answer for a data table.

Why is my first data row striped instead of the second?

The generated markup has no explicit <tbody>, so the browser creates one containing every row, including the header. nth-child(even) then counts the header row as the first child. It looks right in most cases, but if the striping is off by one for you, adding a real <thead> around the header row fixes the count.

Can I resize the grid without losing what I typed?

Yes. Changing rows or columns keeps existing cell contents in place and only fills the new cells with blanks. Shrinking the grid discards the cells outside the new bounds, so widen before you narrow.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon