HTML Table Generator
Type or paste your data into the grid, choose a style, and get clean, accessible HTML table code with matching CSS and a live preview. Nothing is uploaded: the table is built in your browser.
Click a cell to type. Enter moves down, Shift+Enter adds a line break, Tab moves right. Pasting several cells from a spreadsheet fills the grid.
Live preview
How to use the HTML Table Generator
- Enter your data: click a cell and type, or paste a block of cells copied from Excel or Google Sheets. Use Paste CSV / Excel to import a whole file's text.
- Adjust the structure with + Row, + Column, − Row and − Column; they act on the selected cell.
- Choose the look: style preset, borders, alignment, padding, header row or column, stripes and hover.
- Pick the CSS output: a class with a style block, inline styles for emails and CMS editors, or plain HTML for your own stylesheet.
- Copy the code with Copy HTML and Copy CSS, or download a complete HTML page.
Anatomy of an accessible HTML table
The generator outputs semantic markup that browsers, search engines and screen readers understand:
| Element | Purpose |
|---|---|
<table> | The container for tabular data. |
<caption> | A visible title for the table; screen readers announce it first. |
<thead>, <tbody> | Group header rows and data rows. Browsers can repeat thead on each printed page. |
<tr> | A table row. |
<th scope="col"> | A column header cell. |
<th scope="row"> | A row header cell (the Header column option). |
<td> | A data cell. |
Table styling tips
- Use
border-collapse: collapseso adjacent cell borders merge into single lines. Without it, every cell draws its own border with a gap between them. - Right-align numbers and use
font-variant-numeric: tabular-numsso digits line up and amounts are easy to compare. The generator detects numeric columns such as prices, percentages and counts automatically. - Zebra stripes (
tr:nth-child(even)) help readers follow long rows; a subtle hover color does the same on desktop. - Keep the header readable: strong contrast between header text and background (the Green and Dark header presets use white text on a dark fill).
- Wide tables on phones: wrap the table in a container with
overflow-x: autoinstead of shrinking the text. - Emails: many email clients ignore
<style>blocks, so choose Inline styles for newsletters and keep widths simple.
Importing data
The importer accepts comma, semicolon, tab and pipe separated text and detects the separator from the first line. Quoted CSV fields can contain commas, line breaks and doubled quotes ("He said ""hi"""). Markdown tables (| a | b |) are imported too, with the |---| divider line skipped. Need the reverse direction? Turn CSV into JSON with the CSV to JSON converter, or explore a large file first in the CSV viewer.
Frequently asked questions
How do I create a table in HTML?
A table is a <table> element containing rows (<tr>) made of header cells (<th>) and data cells (<td>). Put the header row in <thead> and the data rows in <tbody>, add a <caption> to describe the table, and give header cells scope="col" or scope="row" so screen readers can announce them. This generator writes that structure for you.
How do I convert an Excel sheet to an HTML table?
Select the cells in Excel or Google Sheets, copy them, click the first cell of the grid here and paste. The tab-separated data fills the grid, and the HTML updates instantly. You can also paste CSV text into the Paste CSV / Excel panel.
Should I use inline styles or a CSS class?
Use a class with a style block or stylesheet for websites: it keeps the HTML small and lets you restyle every table at once. Use inline styles when the destination strips <style> tags, such as many email clients and some CMS editors. Hover effects need CSS, so they are only available with the class option.
How do I make an HTML table responsive?
Keep the Responsive scroll wrapper option on. It wraps the table in a <div> with overflow-x: auto, so wide tables scroll sideways on phones instead of breaking the page layout.
How do I merge cells (colspan and rowspan)?
The grid creates a regular table without merged cells. After copying the code, add colspan="2" or rowspan="2" to the cell that should span and delete the cells it covers. Keep merged cells to a minimum because they make tables harder to read for screen readers.
Are tables bad for layout?
Tables are the right element for tabular data such as prices, schedules and comparisons. Do not use them to lay out page sections; use CSS grid or flexbox for that.