Generator Tools

HTML Table Generator

Build an HTML table from an editable grid. Choose plain, inline, or class styles, set caption, alignment, borders, striped rows, and copy the code.

Table editor

3 rows, 4 columns (plus header)

Column 1	Column 2	Column 3	Column 4
				Header

Tip: alignment buttons control text alignment per column. Characters like &, <, >, and quotes are HTML-escaped automatically.

Output style

Caption

Leave blank to omit the <caption> element. Captions describe the table for assistive technologies.

Table options

Header rowFirst row becomes <thead><th>Border1px outline around the table and cellsStriped rowsAlternating row backgroundsHover highlightRow background on mouse hoverCompact paddingTighter cell paddingIndent outputPretty-print the HTML with newlines

Paste from spreadsheet (CSV or TSV)

Excel, Google Sheets, or Numbers

HTML output

<table style="border-collapse:collapse;width:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#111827;border:1px solid #d1d5db">
  <thead>
  <tr>
    <th style="padding:10px 14px;background:#f3f4f6;font-weight:600;border:1px solid #d1d5db">Product</th>
    <th style="padding:10px 14px;background:#f3f4f6;font-weight:600;border:1px solid #d1d5db">Category</th>
    <th style="padding:10px 14px;background:#f3f4f6;font-weight:600;border:1px solid #d1d5db;text-align:right">Price</th>
    <th style="padding:10px 14px;background:#f3f4f6;font-weight:600;border:1px solid #d1d5db;text-align:center">In stock</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td style="padding:10px 14px;border:1px solid #d1d5db">Notebook</td>
    <td style="padding:10px 14px;border:1px solid #d1d5db">Stationery</td>
    <td style="padding:10px 14px;border:1px solid #d1d5db;text-align:right">$4.99</td>
    <td style="padding:10px 14px;border:1px solid #d1d5db;text-align:center">Yes</td>
  </tr>
  <tr>
    <td style="padding:10px 14px;border:1px solid #d1d5db;background:#f9fafb">Headphones</td>
    <td style="padding:10px 14px;border:1px solid #d1d5db;background:#f9fafb">Electronics</td>
    <td style="padding:10px 14px;border:1px solid #d1d5db;background:#f9fafb;text-align:right">$89.00</td>
    <td style="padding:10px 14px;border:1px solid #d1d5db;background:#f9fafb;text-align:center">Yes</td>
  </tr>
  <tr>
    <td style="padding:10px 14px;border:1px solid #d1d5db">Desk lamp</td>
    <td style="padding:10px 14px;border:1px solid #d1d5db">Furniture</td>
    <td style="padding:10px 14px;border:1px solid #d1d5db;text-align:right">$32.50</td>
    <td style="padding:10px 14px;border:1px solid #d1d5db;text-align:center">No</td>
  </tr>
  </tbody>
</table>

Selected style: Inline styles. Switch between Plain, Inline, and CSS classes to match your target environment.

Live preview

How the generated table renders. The preview applies the same alignment, border, striped, hover, and compact options you picked.

Product	Category	Price	In stock
Notebook	Stationery	$4.99	Yes
Headphones	Electronics	$89.00	Yes
Desk lamp	Furniture	$32.50	No

How to use

Edit the starter grid. Add or remove rows and columns, set per-column alignment, and type your headers and values.
Pick an output style: Plain HTML, Inline styles for email and CMS use, or CSS classes with a <style> block.
Toggle header row, border, striped rows, hover, compact padding, and an optional caption to match the look you want.
Optionally paste CSV or TSV from a spreadsheet to replace the grid, then click Copy HTML to grab the code.

About this tool

HTML Table Generator turns an editable spreadsheet-style grid into clean, standards-compliant HTML table code. Pick how you want the table styled: Plain HTML produces a bare <table> with no inline styles or classes, ideal when your stylesheet already handles tables; Inline styles attach style attributes to every element, which is what email clients (Gmail, Outlook, Apple Mail) and many CMS sanitizers expect because they strip <style> blocks; CSS classes ship semantic class names and a matching <style> block you can drop into your stylesheet and tune. Toggle a <thead> header row, add a caption, control per-column alignment, and turn borders, striped rows, hover highlight, and compact padding on or off. The output is HTML-escaped so user content like ampersands and angle brackets never breaks markup. A live preview renders the table exactly as the generated HTML will look so you can iterate visually. Paste from Excel, Google Sheets, or any spreadsheet to fill the grid in one keystroke, and copy the final HTML when you are done. Everything runs in your browser, so the data never leaves your device.

Free to use. Works in your browser. No signup, no login.

Related tools

HTML Table Generator

How to use

About this tool

You may also like

Markdown Table Generator

CSV to Markdown Table Converter

CSV Viewer

HTML Formatter