HTML Table Generator

Paste rows from a spreadsheet or type comma-separated values and get clean, semantic table markup: a caption, a thead with column headers, a tbody, and th elements with the right scope so screen readers announce headers as people move through the cells. Every cell is HTML-escaped, so prices, ampersands and angle brackets come through intact.

CSS & Frontend Runs in your browser

Generate an Accessible HTML Table

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

Table dataPaste from a spreadsheet (tab-separated) or type comma-separated values. Use "quotes" around cells that contain the delimiter.

Delimiter

Caption (table title)

Class name (optional)

First row contains column headers

First column contains row headers

How to Use the HTML Table Generator

Paste or type the data, one row per line.
Check the delimiter (automatic detection handles tabs, commas, semicolons and pipes).
Write a short caption and choose whether the first row and first column are headers.
Copy or download the HTML.

About This Tool

Content editors, bloggers and developers who need to publish a data table in a CMS or static page without hand-typing tags, and accessibility reviewers fixing tables that were built from div elements.

Input: CSV, TSV or pasted spreadsheet cells · Output: HTML table.

Features and Limitations

Features

Header cells get scope="col" or scope="row" automatically.
Proper CSV parsing, including quoted cells with commas, quotes and line breaks.
Short rows are padded so every row has the same number of cells.
Readable, indented output with every cell escaped.

Limitations

Merged cells (colspan and rowspan) and multi-level headers are not generated; complex tables need hand-written headers and id attributes.
Formatting such as bold text, links or colours from the spreadsheet is not copied, only the cell text.
No styling is added beyond an optional class name.
Results are computed in your browser; nothing you enter is sent to a server.

Example

The sample four-row price list becomes a table with a caption, four column headers in the thead and plan names as row headers (th scope="row") in the tbody.

Frequently Asked Questions

Why does a table need a caption?

The caption is the table's title. Screen readers announce it when users reach the table, and it helps everyone understand what the data is about. You can hide it visually with CSS if your design already has a heading.

What does the scope attribute do?

scope tells assistive technology whether a header labels a column or a row, so each data cell can be announced with the right headers.

Should I use tables for page layout?

No. Use tables only for tabular data. For layout, use CSS grid or flexbox; layout tables confuse screen readers and are hard to make responsive.

How do I make a wide table work on phones?

Wrap it in a container with overflow-x: auto and a focusable region label, so it scrolls sideways without making the whole page scroll.