HTML Table Generator

Building a clean HTML table without writing the markup

Hand-writing an HTML table is fiddly: every cell needs a <td>, headers need <th>, and merged cells require colspan and rowspan attributes that are easy to miscount. This tool turns that into a spreadsheet-style editing experience. You set the number of rows and columns, type directly into each cell, choose which row or column is the header, and the tool emits valid, ready-to-paste <table> markup with matching CSS — all generated in your browser, with nothing sent anywhere.

How the editor maps to the output

Behind the grid is a two-dimensional array of cell objects, each tracking its text, its colspan, its rowspan, and whether it is hidden by a merge. As you type, the corresponding cell's text updates and the output regenerates instantly. Two checkboxes control header semantics: Header Row renders the first row as <th> elements, and Header Column does the same for the first column. Using real <th> tags matters — it isn't just bold styling; screen readers and search engines treat header cells as labels for the data cells they describe, which is the difference between an accessible table and a grid of meaningless boxes.

Merging cells the right way

Merging is where hand-written tables go wrong, and where this tool earns its keep. Click and drag across a rectangular block of cells to select it, then press Merge Selection. The top-left cell of the block absorbs the others: its colspan becomes the selection's width and its rowspan its height, while the covered cells are marked hidden so they no longer emit their own tags. This produces exactly the markup a browser expects — a single spanning cell with the right attributes, and no leftover empty cells that would push the layout out of alignment. Unmerge reverses it, restoring every covered cell to a normal 1×1. The editor shows a small 2×1 style badge on merged cells so you can always see the span at a glance.

A worked example

Imagine a pricing table with three plans. You set 4 rows by 3 columns, tick Header Row, and type "Basic", "Pro", "Team" across the top, then fill in prices and features below. You want a banner across the top reading "2024 Pricing", so you add a row, select all three cells in it, and click Merge Selection. The result is a single header cell spanning the full width: <th colspan="3">2024 Pricing</th>. The two cells it swallowed are dropped from the output entirely, so the row still has the correct total width. Copy the generated HTML and it renders identically wherever you paste it.

Styling that ships with the table

The generated output is self-contained: a small <style> block precedes the table so it looks right immediately without depending on your site's CSS. You control several options, each of which is written into that CSS:

• Border style — solid, dashed, dotted, double, or none, applied to every cell.
• Zebra striping — a tbody tr:nth-child(even) rule that shades alternate rows, which makes wide tables far easier to read across.
• Hover highlight — a tr:hover rule that tints the row under the cursor, helpful for interactive data.
• Per-column alignment — the L / C / R buttons above each column set left, centre, or right text alignment, written as an inline text-align only where it differs from the default.

The fastest way in: paste CSV or TSV

If your data already lives in a spreadsheet, you don't have to retype it. Copy the range, paste it into the CSV/TSV box, and click Fill Table. The tool auto-detects the delimiter — it uses tabs if any are present (which is how spreadsheet copy-paste arrives), otherwise commas — splits each line into cells, strips surrounding quotes, and sizes the grid to fit. From there you can tweak headers, merge cells, and style as usual. This is the quickest path from a spreadsheet selection to publishable HTML.

Practical tips and common mistakes

• Always mark a header. A table without a header row is harder to read and worse for accessibility and SEO. Tick Header Row before you copy, even for simple tables.
• Only rectangular selections merge. Merging works on a clean rectangle. Select a true block, not an L-shape, and the result will be well-formed.
• Align by content type. Right-align numbers and currency so digits line up by place value, left-align text, centre short labels. Mixed alignment in one column makes a table look careless.
• The CSS travels with the table. Because styling is emitted as an inline <style> block, the table looks the same wherever you paste it — but if your page already styles tables globally, you may want to trim the block to avoid double rules.
• Re-applying the size resets the grid. Changing the row or column count and clicking Apply Size rebuilds the cells, which clears existing content. Set your dimensions first, then fill in data.