What is an HTML table generator?
An HTML table generator lets you type data into a spreadsheet-style grid and produces the matching <table> markup, so you do not have to hand-write dozens of <tr>, <th> and <td> tags. It is ideal for pricing comparisons, specification sheets, opening hours, schedules and any other genuinely tabular content in a blog post, documentation page or email.
Good table markup is about more than rows and cells. Header cells belong in <th> elements inside a <thead>, a <caption> gives the table a name that screen readers announce, and scope="col" or scope="row" tells assistive technology which data cells each header describes. This generator adds all of that for you and escapes cell content, so text such as <5 kg or R&D cannot break the page.
You can also paste data from Excel, Google Sheets or a CSV file. The importer understands quoted fields containing commas, line breaks and doubled quotes, and detects whether the data is separated by commas, tabs, semicolons or pipes. Export the result as HTML, as a Markdown table for GitHub or a static-site generator, or back to CSV.
How to use the HTML Table Generator
- Set the number of rows and columns, or paste existing data into the import box and click Import into table.
- Edit the cells directly in the grid. Use the row and column delete buttons to remove what you do not need.
- Choose a header row and/or header column, add a caption, keep scope attributes on for accessibility, and optionally set a CSS class.
- Check the preview, pick HTML, Markdown or CSV as the output format, then copy or download the code.
Example
A two-column table with a header row, caption and scope attributes:
<table class="hours">
<caption>Opening hours</caption>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mon–Fri</td>
<td>9:00–18:00</td>
</tr>
</tbody>
</table>Accessible table checklist
- Use tables for data only — never for page layout. Use CSS Grid or Flexbox for layout.
- Give every table a
<caption>(or a nearby heading referenced witharia-labelledby). - Mark header cells with
<th>and addscopeso each data cell is announced with its headers. - Avoid merged cells where possible; simple grids are far easier to navigate with a screen reader.
- On narrow screens, wrap the table in a container with
overflow-x: autoso it scrolls instead of overflowing the page.
Frequently Asked Questions
How do I paste a table from Excel or Google Sheets?
Select the cells in your spreadsheet, copy them, and paste into the import box. Spreadsheets copy cells as tab-separated text, which the importer detects automatically. Click Import into table and the grid fills in.
Can I style the table?
Yes. Enter a class name and the generator adds it to the <table> tag, so you can target it from your stylesheet — for example borders, zebra striping and padding. The generated HTML has no inline styles, which keeps it clean for any theme. In WordPress, paste the code into a Custom HTML block (the class is already on the table) and add the matching CSS under Appearance → Customize → Additional CSS or in the Site Editor’s custom CSS.
Why does the Markdown output need a header row?
GitHub-flavoured Markdown requires every table to start with a header row followed by a --- separator line. If you turn the header row off, the generator inserts an empty header so the table still renders.
What does the scope attribute do?
scope="col" on a header cell means it labels the cells below it; scope="row" means it labels the cells to its right. Screen readers use this to read “Price: $29” instead of just “$29” when a user moves through the table.
Is my data uploaded anywhere?
No. The grid, the CSV import and the code generation all run in your browser. If you need the data as JSON instead, use the CSV to JSON converter.