Tech

HTML table generator

Build HTML tables from scratch or from a CSV: pick rows and columns, edit the cells right in the preview, and copy cleanly indented code with thead, zebra stripes, borders and caption.

Instant🔒In your browserNo signup
Live

Tip: click any cell in the preview to edit its content; the code updates automatically.

Preview
Generated HTML code

What an HTML table generator is for

Writing an HTML table by hand is tedious and error-prone: one unclosed tag and the whole page falls apart. This generator gives you complete, indented, valid code in seconds. The most common uses: HTML emails, where tables with inline styles are still the only reliable way to build layouts (email clients ignore much of modern CSS); CMSs and platforms that only accept pasted HTML, such as online-store description fields, corporate wikis, forums or editors without a table button; technical documentation, where you need a quick, tidy table of parameters or prices; and practice, because seeing how a well-formed table is structured — with thead, tbody, scope and caption — is the best way to learn semantic HTML. If your data already lives in a spreadsheet, export it as CSV, paste it into "From CSV" mode and you are done: the table builds itself.

HTML table elements: quick reference

ElementWhat it isRole and accessibility
<table>The root container of the whole table.Screen readers announce that a table starts and its dimensions (rows × columns).
<caption>The visible title of the table. Goes first, right after opening <table>.It is the first thing a screen reader announces: it gives context before diving into the data. Much better than a loose paragraph above.
<thead>Groups the header row (or rows).Semantically separates the header from the body and lets the browser repeat it on every page when printing long tables.
<tbody>Groups the data rows.Delimits the table body; also handy for applying styles or scrolling to the content only.
<tfoot>Groups closing rows, typically totals or sums.Announced as the table footer and, when printing, repeated at the bottom of every page.
<tr>One row (table row).The unit of vertical navigation: screen readers move row by row.
<th>Header cell (table header).Not just bold text: it declares that the cell describes others. It is the key piece that makes a table navigable with assistive technology.
<td>Data cell (table data).The actual content. It is automatically associated with the <th> cells of its column and row.
<colgroup> / <col>Defines whole columns before the content.Lets you apply width or background to an entire column without repeating styles cell by cell.
scope (attribute)Placed on each <th>: scope="col" or scope="row".Tells the screen reader whether the header applies to the column or the row, so every value is announced with its context ("Price: 25").

Accessible tables: th, scope and caption

A visually perfect table can be a maze for someone navigating with a screen reader. The three pieces that prevent it: use <th> (not bold <td>) for headers, add scope to state what they head, and give the table a <caption> that summarizes what it is about. This generator applies scope="col" automatically to every header and lets you set the caption with a single field.

Tables in HTML emails: why inline styles

Email clients strip or ignore stylesheets: Gmail removes <style> in many contexts and Outlook renders with Word's engine. That is why email layout is still built with tables and inline styles on every cell. The collapsed-borders and zebra-stripes toggles in this tool generate exactly that: style="border:1px solid #cccccc;padding:8px" cell by cell, ready to paste into your campaign.

From CSV to HTML table in seconds

"From CSV" mode accepts the standard RFC 4180 format: comma-separated fields, quoted fields that may contain commas and line breaks, and quotes escaped by doubling them. Export your Excel or Google Sheets file as CSV, paste it, tick whether the first row is a header, and copy the HTML. All your cell content comes out escaped (&amp;, &lt;, &gt;), so the code is safe even if the data carries odd symbols.

FAQ

How do I make an HTML table responsive?

Wrap it in a container with overflow-x:auto: on small screens it scrolls horizontally without breaking the layout. Alternatives: media queries that stack cells with display:block. Never hardcode pixel widths.

What is the difference between th and td?

th is a header cell and td a data cell. th is not just cosmetic: it tells screen readers that the cell describes the others in its column or row.

Why use the scope attribute?

It states what each th heads: scope="col" a column, scope="row" a row. That way a screen reader announces "Price: 25" instead of loose numbers. The generator adds it automatically.

Do HTML tables work in emails?

Yes, they are the backbone of email layout because email clients support CSS unevenly. The rule is inline styles on every cell, which is what this tool generates.

Does CSV with commas inside a field work?

Yes, the parser supports RFC 4180: quoted fields can contain commas and line breaks, and a double quote is escaped by doubling it ("").

Can I edit the cells in the preview?

Yes, in "From scratch" mode every cell is editable: click, type, and the HTML code updates instantly.

Why does the generated code escape characters like < and &?

So the content displays literally and is not interpreted as tags. We convert them to &lt; and &amp;, making the HTML you copy safe to paste anywhere.

What is the table size limit?

50 rows × 20 columns. If your CSV exceeds it, we show a clear message instead of freezing your browser.

Is my data sent to a server?

No — CSV parsing, code generation and the preview all happen in your browser. Your data never leaves your device.

Was this generator useful?