HTML Table Generator

1. Add your data. Type into the grid, paste a range of cells copied from a spreadsheet, or open the import panel to paste CSV, Markdown, or an existing HTML table.
2. Set the structure. Choose whether the first row or first column holds headers, mark a totals row as a footer, and add a caption that describes the table.
3. Align your columns. Use the alignment button above each column. Right-align numbers and prices so the digits line up.
4. Pick a style. Choose an output type and preset, then adjust the colors, borders, stripes, and spacing.
5. Copy the code. Check the preview, then copy or download the HTML. There's a Markdown version too, for GitHub, documentation sites, and Markdown editors.

Your table is saved in your browser as you work, so it's still there if you refresh the page. Click Start Over to wipe it.

Select the cells in Excel, Google Sheets, Numbers, or LibreOffice, copy them, click into the top-left cell of the grid above, and paste. Spreadsheets copy data as tab-separated text, so every value lands in its own cell, and the grid grows to fit. You can also save your sheet as a CSV file and load it with the Choose a CSV File button.

The generator handles quoted values, commas inside cells, and semicolon-separated files from European versions of Excel. It imports up to 500 rows and 30 columns at a time, which covers almost any table that belongs on a web page.

• HTML + CSS: The best choice for most websites. The table gets a class name, and a short <style> block styles everything with that class, so it won't affect other tables on your site. Change the class name if you plan to use more than one style on the same page.
• Inline styles: Built for email newsletters and HTML emails. Many email clients strip <style> blocks, so every style is written directly on each cell. Row hover effects and sideways scrolling aren't available in this mode because email clients don't support them.
• Semantic HTML only: Clean markup with no styling at all, apart from the column alignment you set. Use it when your theme or CMS already has a table style you want to keep consistent.

In the block editor, add a Custom HTML block and paste the code. In the Classic editor, switch to the Text tab and paste it there.

One thing to know: WordPress only lets administrators save <style> tags and inline styles in posts on most sites. If you're an editor or author, or your site has extra security filtering, the styling may be stripped when you save. In that case, choose Semantic HTML only, or ask your developer to add the CSS from the HTML + CSS output to your theme's Additional CSS (Appearance > Customize > Additional CSS). The table then picks up the styling from its class name.

Tables with more than three or four columns rarely fit on a phone. The most reliable fix is to wrap the table in a container that scrolls sideways, which is what the Scroll sideways on small screens option does. Readers can swipe across the table, and nothing gets squished into unreadable, one-word-per-line columns.

A few habits help too: keep header labels short, avoid long paragraphs inside cells, and split very wide tables into two smaller ones. If a table has more than about six columns, consider whether a list or a chart would communicate the information better.

Yes. The generator writes the markup that screen readers and search engines expect:

• Header cells use <th> with a scope attribute, so screen readers announce the right column or row header for every value.
• Header rows go in <thead>, body rows in <tbody>, and totals in <tfoot>.
• Captions use the <caption> element, which tells everyone what the table is about before they read it.

Well-structured tables are also easy for Google to read. Comparison and pricing tables with clear headers can be pulled into featured snippets, and they're far easier to understand than the same data as an image or a wall of text. Just don't use tables for page layout. They're for data with rows and columns.

No. The generator runs entirely in your browser, including CSV file imports, which are read on your device and never uploaded. Your current table is saved in your browser's local storage so you don't lose work, and it never leaves your computer. Cell text is escaped in the output, so pasted data can't inject code into your page, and the optional basic HTML mode only allows links and simple formatting tags.

Pasting a table from Word or Google Docs? Run it through our Word / Google Docs to Clean HTML tool first, or paste it into the import box here.