HTML Table Generator
Spreadsheet-style editing, accessible table markup out — styled, responsive and sortable.
Pasted data replaces the example table. Files: CSV, TSV, HTML, Markdown, LaTeX, JSON or a spreadsheet (.xlsx, .xls, .ods) — read on your device.
Table
Select cells by dragging or with Shift + arrow keys, then press Merge. Type to replace a cell, Enter or double-click to edit, Alt+Enter for a line break. Ctrl+V pastes cells from a spreadsheet, Ctrl+Z undoes.
HTML options
The table’s name; screen readers announce it.
Tables with several header levels need id/headers.
HTML code
Preview
How the table looks with the embedded styles. Sorting and filtering work here too.
About the HTML Table Generator
Type a table in the grid or paste it from Excel, Google Sheets or a CSV file — merged cells included — and get clean, accessible HTML: a <caption>, <thead>, <tbody> and <tfoot>, header cells with scope, colspan and rowspan, and on tables with several header levels the id and headers attributes that the W3C accessibility tutorial recommends for them.
Style it as striped, bordered, compact or with a hover highlight — as an embedded stylesheet with class names (light and dark mode), as inline style attributes for HTML email and CMS editors that strip <style>, as Bootstrap 5 classes, or as bare class names for your own CSS. Add a horizontal scroll wrapper for small screens, and a small dependency-free script that sorts columns and filters rows. Copy the snippet or download a complete page.
How to use it
- Edit the example or paste your data into Paste data to import — copied spreadsheet cells keep their merged cells. You can also open a CSV, HTML, Markdown or .xlsx file.
- Set Header rows and, for totals, Footer rows. Tick First column is row headers when each row is named by its first cell.
- Merge cells by selecting them and pressing Merge; set each column’s alignment (numbers usually right).
- Write a caption — it is the table’s name for screen readers too — and choose the style, how CSS is written and whether to add sorting and filtering.
- Check the live preview (sorting and filtering work there), then Copy HTML or Download page.
Examples
Plan | Price Starter | 149
<table id="data-table" class="data-table data-table--striped data-table--hover">
<thead>
<tr>
<th scope="col">Plan</th>
<th scope="col" class="data-table-right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Starter</td>
<td class="data-table-right">149</td>
</tr>
</tbody>
</table>Country (2 rows) | Population over 2011, 2021 India | 1210 | 1400
<th id="data-table-h1-2" scope="col" colspan="2">Population</th> … <td headers="data-table-h1-2 data-table-h2-2">1210</td>
Assistive technology can then announce both “Population” and “2011” with the cell — the explicit association WAI recommends for tables with multi-level headers.
Common uses
- Price lists, timetables, specifications and comparison tables for websites and blogs.
- Tables in HTML emails and newsletters (inline styles work in most email programs).
- Moving a spreadsheet range into a CMS such as WordPress (custom HTML block), with merged headings intact.
- Long data tables on a web page that readers can sort and filter without any library.
What makes the markup accessible
- Caption — names the table; screen readers announce it on entering the table (WCAG 2.2 SC 1.3.1). Hide it visually if the page already has a heading, but keep it.
- th with scope —
scope="col"on column headers,scope="row"on row headers, so each data cell is announced with its headings. - id + headers — on tables with two or more header rows, merged headings or merged row headers, every data cell lists the ids of all its header cells (W3C WAI Tables Tutorial, “Tables with multi-level headers”). Header associations: Automatic adds them only where needed.
- thead / tbody / tfoot — header and footer rows are marked up as such (and a merged cell cannot run from one into the other, so the generator cuts it there).
- Scroll wrapper —
role="region", a label andtabindex="0"let keyboard users scroll a wide table. - Sort buttons — a
<button>in each header cell andaria-sorton the sorted column, as in the WAI-ARIA Authoring Practices “Sortable Table” example; the filter box has a label and announces how many rows match.
The sort and filter script
The script is about 60 lines of plain JavaScript with no dependencies. It sorts numbers as numbers (also 1,250, ₹1,250, 12% and (300) for −300), text in natural order (B-9 before B-10), keeps empty cells last and keeps equal rows in their order. A data-sort attribute on a cell overrides its text for sorting. Filtering hides body rows that do not contain the typed text. If your site uses a Content-Security-Policy without unsafe-inline, put the script in a .js file.
Limitations
- Sorting and filtering are left out when body cells are merged across rows — moving or hiding rows would tear such cells apart.
- Inline styles cannot express hover effects or dark mode; email programs also do not run scripts.
- Cells hold text: line breaks become
<br>and web addresses can become links, but other HTML typed into a cell is shown as text (escaped), never inserted as markup. - Bootstrap and “class names only” output need the matching CSS on your page.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
How do I make an HTML table from Excel?
Copy the cells in Excel or Google Sheets and paste them into Paste data to import (or into the grid with Ctrl+V). Merged cells come along as colspan/rowspan. Then copy the HTML.
How do I merge cells in an HTML table?
colspan="2" makes a cell two columns wide and rowspan="2" two rows tall; the cells it covers are left out of the following markup. In the grid, select the cells and press Merge.
How do I make a table responsive on mobile?
Keep Scroll wrapper on: the table sits in a <div> with overflow-x: auto, so a wide table scrolls sideways inside the page instead of breaking the layout. The wrapper is focusable and labelled for keyboard users.
Which style mode should I use for email?
Inline style attributes. Many email programs drop <style> blocks and classes, but keep style attributes. Hover and dark-mode colours are not possible inline.
Is the code valid HTML?
Yes — elements are nested as the HTML standard requires (caption first, then thead, tbody, tfoot), ids are unique, cell text is escaped, and the page download starts with <!DOCTYPE html> and a lang attribute.
Is my data uploaded?
No. The table, imports (also .xlsx files) and the generated code stay in your browser.