HTML Table Generator

What Is an HTML Table Generator?

An HTML table generator is a web-based code generation tool that converts data typed into a visual grid, or pasted from a spreadsheet, into ready-to-paste table markup. You fill cells, pick a style, and copy the HTML table code.

The output covers the core tags: <table>, <tr>, <th>, <td> and, in the better tools, <caption>. Most generators also write a CSS block for borders, padding and colors.

Browsers have rendered HTML tables the same way for decades, so the markup itself is simple. Typing it out for 40 rows is the tedious part.

What it is not:

• A layout tool. The Web Almanac 2025 points to CSS Flexbox and Grid for layout. Tables are for data.
• A spreadsheet (no formulas, no recalculation)
• A charting library

What Code Does an HTML Table Generator Produce?

An HTML table generator produces two blocks: CSS rules and the table markup. Clean output puts headers in <thead> as <th> cells, data in <tbody>, a <caption> on top, and colspan or rowspan wherever cells merge.

Weak output skips <thead>, fakes headers with bold <td> cells, and styles everything with attributes HTML dropped years ago.

Table elements and their order

Totals belong in <tfoot>. A proper table footer beats a bolded last row, and screen readers can tell the difference.

The GOV.UK Design System shows the target markup: a caption, <th scope="col"> across the header, and <th scope="row"> on the first cell of each data row. Its table macro has a firstCellIsHeader option for exactly that.

The WHATWG HTML Living Standard defines every one of these elements. MDN Web Docs explains them in plainer English.

Merged cells with colspan and rowspan

The HTML Living Standard caps colspan at 1000 and rowspan at 65534, and browsers clamp anything higher.

Nobody hits those limits. The real trap is arithmetic: a cell with colspan="2" replaces two cells, so that row needs one fewer <td>.

• Merge after the data is final
• Count cells per row in the output
• Recheck after deleting a column

Writing the attributes by hand instead? Here's how to merge cells in HTML without any tool.

Obsolete attributes to remove

Some generators still write attributes HTML5 made obsolete.

The HTML Standard's list of obsolete features names them on table elements, with one instruction: use CSS instead. The swaps:

• cellpadding: padding on th and td
• cellspacing: border-spacing on the table
• bgcolor: background-color
• align: text-align, or margin: auto for the whole table
• width: the CSS width property

Browsers still render them. The W3C Markup Validation Service still flags them, which buries the errors you actually care about.

How Do You Create an HTML Table With a Generator?

Set the grid size, enter or paste data, mark the header row, merge cells, add a caption, pick a style, then copy the code. CSS goes in the page head or stylesheet, and the table goes in the body.

1. Set the size. Count one extra row for the header.
2. Fill the cells by typing, pasting from a spreadsheet, or pasting CSV text into Paste data.
3. Mark the header row so it renders as <th>.
4. Merge cells once the data is final.
5. Add a caption with a real name.
6. Pick a style: borders, zebra striping, alignment, font size.
7. Copy the code, CSS and HTML together. It updates as you edit, so there is no generate step.
8. Paste the CSS into the <head> or your stylesheet, and the table into the body.
9. Preview at phone width and desktop width.

Step 5 gets skipped more than any other. Captions like "Table 1" go live every day. Obvious advice, ignored constantly.

Step 6 is where tables go wrong visually. Heavy grid lines on every cell look dated, and this breakdown of table border styles in HTML shows lighter options.

Want the table centered on the page? Some generators handle it, some don't. Here's how to center a table with a line of CSS either way.

How Do You Convert Excel, Google Sheets or CSV Data Into an HTML Table?

Copy the cells and paste them into this HTML table generator. Working from a CSV file? Open it in a text editor, copy everything and paste it into Paste data.

Both routes give you static HTML. Formulas show up as their calculated values, frozen at the moment you copied.

Pasting from Excel and Google Sheets

Keeps: cell text, displayed numbers, row and column order.

Drops: formulas, charts, filters, data validation.

Partly kept: bold, italic and links, when you paste an HTML table into Paste data. Colors and fonts stay behind, so set those in the Style and Colors panels.

Tables copied straight off a web page paste in fine too. Handy when you're rebuilding somebody else's table.

Check merged cells after pasting. If they came in split, merge them again in the generator. Takes ten seconds, but people forget and publish a broken header row.

Data that changes weekly needs a different setup. Embedding Excel in HTML with wpDataTables keeps a live link to the workbook instead of a frozen copy.

Pasting CSV data

Encoding breaks more CSV imports than anything else. Save as UTF-8, or characters like é, ș and ü turn into junk.

• Excel: File, Save As, "CSV UTF-8"
• Google Sheets: File, Download, CSV (already UTF-8)

Put your column names in the first row. That's what becomes the header. Blank first rows (the kind exports love to add) push everything down by one.

JSON from an API is a separate job. The wpDataTables JSON to HTML table converter handles nested keys that CSV tools can't parse.

How Do You Style a Generated HTML Table and Make It Responsive?

Style it with 4 CSS basics: border-collapse, cell padding, zebra striping and right-aligned numbers. For phones, wrap the table in a container with overflow-x: auto, or restack rows as cards below a breakpoint.

Inline CSS, stylesheet or framework classes

Generators output CSS in one of three shapes, and each one has a cost.

The 4 rules that do most of the work:

• border-collapse: collapse
• padding on th and td
• tr:nth-child(even) for stripes
• text-align: right on number columns

On a Bootstrap site, turn off the generator's CSS and use the framework's classes instead. This guide to Bootstrap tables lists the ones worth knowing.

Responsive patterns for mobile screens

Mobile devices produced 52.61% of worldwide web traffic in July 2026, according to StatCounter. A 7-column table that spills off the screen fails more than half your readers.

The Scottish Government Design System puts the practical limit at about three columns on a phone. Past that, it switches to a scrolling table with a sticky first column.

Scroll wrapper: a div with overflow-x: auto around the table. Structure stays intact, but some columns sit off-screen.

Stacked rows: each row becomes a card below a breakpoint. Easier to read, though it needs data-label attributes and extra CSS.

Bootstrap's .table-responsive wrapper also sets overflow-y: hidden, which clips dropdowns inside cells. Test that before adding one.

Start with the scroll wrapper, since it's the safer default. Test it in Chrome DevTools device mode, then check this walkthrough on how to make a table responsive for the card layout.

Are Tables From an HTML Table Generator Accessible?

Not automatically. WCAG 2.2 success criterion 1.3.1 requires header cells tied to their data through markup, which means <th> with scope plus a <caption>.

Most generators output a header row and stop there. The rest is on you.

Key figures:

• 1.6% of desktop sites include a table <caption> (HTTP Archive, Web Almanac 2025)
• 40.5% of screen reader users name JAWS and 37.7% name NVDA as their main desktop screen reader (WebAIM Screen Reader User Survey #10, 2024)
• Popular automated audit tools each detect under 50% of accessibility errors, per a GOV.UK comparison cited in Web Almanac 2025

What generators leave out by default

• scope="col" and scope="row" on header cells
• A meaningful caption
• id and headers attributes for tables with two header levels

The Scottish Government Design System makes a caption mandatory on every table and asks for scope on every header. Worth stealing as a house rule.

For simple grids, scope does the job. This breakdown of HTML table headers shows where id and headers become necessary.

WAI-ARIA's role="presentation" strips table semantics completely. Keep it off data tables, since it tells screen readers the grid means nothing.

Testing with a screen reader

Automated checkers can't hear a table. You can.

NVDA is free, and together with JAWS it covers most desktop users in the WebAIM survey. Open the page, move into the table, then step through cells with Ctrl+Alt+arrow keys.

Listen for: the column header read before each value. Hear only "42" with no label? The scope or <th> is missing.

The W3C WAI Tables Tutorial and WebAIM's data tables guide both cover the fixes. This piece on accessible tables pulls the patterns into one place.

How Do You Check Generated Table Code for Errors?

Run the code through the W3C Markup Validation Service, inspect the live table in Chrome DevTools, and reformat it in Visual Studio Code before publishing. Those three checks catch invalid markup, theme CSS overrides and uneven rows.

WebAIM's 2026 Million report found 948,225 tables across 143,575 of the top million home pages, and only 19% had valid data table markup.

Generated code isn't immune. A generator writes whatever you feed it, including a half-merged row you forgot about.

Validator messages worth recognizing:

• "A table row was X columns wide, which is less than the column count established by the first row (Y)." A cell is missing.
• "A table row was X columns wide and exceeded the column count established by the first row (Y)." A cell is extra, or a colspan runs too wide.

The first row sets the column count for the whole table. Fix that row first, then recheck the rest.

Theme conflicts are the sneaky one. In Chrome DevTools, press Ctrl+Shift+C, click a cell, and the Styles tab lists every rule hitting it, overridden declarations included.

The Computed tab shows only what actually applies. Compare the two and you'll find the theme rule beating the generator's CSS, then fix it with the selector patterns covered in this guide to styling HTML tables.

Zebra stripes vanishing is a classic case, since many themes set a background on every td. Setting the table background color on the row selector instead usually wins.

Readability check: paste minified output into Visual Studio Code and press Shift+Alt+F (Shift+Option+F on a Mac) to re-indent it. Keep the formatted copy for edits and publish the minified one.

How Do You Add a Generated HTML Table to WordPress?

Paste the table markup into a Custom HTML block in the WordPress block editor, then move the CSS into Additional CSS. Block themes keep it under Styles in the Site Editor. Classic themes keep it in the Customizer.

WordPress runs 40.2% of all websites, according to W3Techs data from September 2026. So for most people using the generator, this is the step they'll actually hit.

1. Type /html in the editor and pick the Custom HTML block.
2. Paste only the <table> markup.
3. Switch the block to Preview and check that it renders.
4. Put the CSS in Additional CSS, not in the block.

Watch the user role. Automattic's WordPress VIP docs note that only Administrators hold the unfiltered_html capability by default on single sites. On Multisite, it's Super Admins only.

Everyone else gets their markup filtered on save. A <style> block pasted along with the table is exactly the kind of thing that vanishes. (Editors and Authors find this out the annoying way.)

The native Table block is the other route. For simple grids, this walkthrough on how to create a table in WordPress without a plugin covers it.

Table block specifics: header and footer sections, a caption toggle, Default or Stripes styles, and fixed width cells switched on by default since WordPress 6.6. Its edit menu inserts and deletes rows and columns. That's it.

wpDataTables stores tables separately and embeds them with a block or shortcode, so one edit updates every page that uses the table. Sorting, filtering, search and responsive layouts come built in. If the data lives in a spreadsheet or database, the table can pull from it directly instead of waiting for you to paste a new copy.

When Should You Not Use an HTML Table Generator?

Skip it for page layout, for data that needs search or pagination, for tables that update on a schedule, and for tiny tables Emmet writes faster. A generator gives you a static snapshot. Anything live or large needs a different tool.

Key point: the generator isn't wrong in these cases. It's just the wrong layer.

Layout tables haven't died. The Web Almanac 2025 found 4.9% of mobile tables carrying role="presentation", up from 1% in 2022.

If a generated grid only exists to line up logos or form fields, that's the wrong trend to join.

Big datasets: click-to-sort is easy to bolt on. Search and pagination aren't. In WordPress, wpDataTables adds both, and its server-side processing mode loads only the rows a visitor is looking at, so tables with hundreds of thousands of rows stay usable.

Outside WordPress, you'll wire it up yourself. A walkthrough of building a JavaScript data table shows the setup.

One honest caveat. No library fixes bad header markup for you. If the <th> cells and scope attributes are wrong going in, sorting and filtering just make an inaccessible table interactive.

Database-backed data: product lists, member directories, price feeds. Pull rows with a query, as in this guide on fetching data from a database in a WordPress page, instead of pasting a copy that goes stale by Friday.

Tiny tables: Emmet ships inside Visual Studio Code, no extension needed. Type table>tr*3>td*4, accept the Emmet suggestion, and you have 3 rows of 4 cells faster than a generator page loads.

Trends over time? A line chart usually says it better than 40 rows of numbers. (wpDataTables can build one from the same data, by the way.)

FAQ on HTML Table Generators

What is the difference between an HTML table and a div table?

An HTML table uses <table>, <tr> and <td> elements, so browsers and screen readers understand rows, columns and headers.

A div table fakes the grid with styled <div> blocks. It needs extra CSS to display and carries no table semantics unless you add ARIA roles.

Do you need to know HTML to use an HTML table generator?

No. You can use the HTML table generator with no coding background: fill the grid, pick a style, copy the code.

Basic HTML still helps. Knowing what <th> and colspan do lets you spot a broken header row before it goes live.

Can generated tables include images or links?

Links, yes. Select text in a cell and use the Link button, or type [link text](https://example.com), and the code gets a regular <a> tag.

Images usually mean editing the static output by hand. In WordPress, wpDataTables has dedicated URL and image column types, so neither needs manual markup. For plain HTML, this guide to building an HTML table with images covers sizing and alt text.

Does Google use data from HTML tables in search results?

Yes. Google can turn real <table> markup into a table featured snippet, pulling the rows and columns straight from the page.

Clean <th> headers help. Div-based grids give it no table to read.