HTML table generator

Type or paste a table, pick a look, copy clean HTML.

PrivateNo uploadsRuns in your browser

Private

6 rows × 5 columns

	Column A	Column B	Column C	Column D	Column E
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6

Tab and Enter move between cells. Shift+click or Shift+arrows mark cells to merge. Paste from a spreadsheet straight into a cell.

Caption

Header rowFirst column as headersTotal row at the bottom

Name	Qty
Rice	2
Milk	1
Eggs	12

Name	Qty
Rice	2
Milk	1
Eggs	12

Name	Qty
Rice	2
Milk	1
Eggs	12

Name	Qty
Rice	2
Milk	1
Eggs	12

Name	Qty
Rice	2
Milk	1
Eggs	12

Name	Qty
Rice	2
Milk	1
Eggs	12

Name	Qty
Rice	2
Milk	1
Eggs	12

LookCleanThin lines, lots of airStripedSoft bands guide the eyeBorderedA line round every cellRounded cardSoft shadow, round cornersDarkLight text on a dark tableCompactTight rows for lots of dataLedgerLike a neat account book

Cards on phones: each row becomes a labelled card on small screens

Live preview

Your code

Inside the HTMLClass + CSS

<table style="border-collapse: collapse; width: 100%; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 15px; color: #1f2937">
  <caption style="caption-side: top; text-align: left; font-weight: 600; padding: 0 0 8px">Sunday cricket scores</caption>
  <thead>
    <tr>
      <th scope="col" style="text-align: left; padding: 10px 12px; background: #334155; color: #ffffff; font-weight: 600">Player</th>
      <th scope="col" style="text-align: right; padding: 10px 12px; background: #334155; color: #ffffff; font-weight: 600">Runs</th>
      <th scope="col" style="text-align: right; padding: 10px 12px; background: #334155; color: #ffffff; font-weight: 600">Balls</th>
      <th scope="col" style="text-align: right; padding: 10px 12px; background: #334155; color: #ffffff; font-weight: 600">Fours</th>
      <th scope="col" style="text-align: right; padding: 10px 12px; background: #334155; color: #ffffff; font-weight: 600">Sixes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" style="padding: 10px 12px; text-align: left; font-weight: 600">Arun</th>
      <td style="padding: 10px 12px; text-align: right">48</td>
      <td style="padding: 10px 12px; text-align: right">35</td>
      <td style="padding: 10px 12px; text-align: right">6</td>
      <td style="padding: 10px 12px; text-align: right">1</td>
    </tr>
    <tr>
      <th scope="row" style="padding: 10px 12px; text-align: left; font-weight: 600; background: #f1f5f9">Karthik</th>
      <td style="padding: 10px 12px; background: #f1f5f9; text-align: right">22</td>
      <td style="padding: 10px 12px; background: #f1f5f9; text-align: right">18</td>
      <td style="padding: 10px 12px; background: #f1f5f9; text-align: right">3</td>
      <td style="padding: 10px 12px; background: #f1f5f9; text-align: right">0</td>
    </tr>
    <tr>
      <th scope="row" style="padding: 10px 12px; text-align: left; font-weight: 600">Daniel</th>
      <td style="padding: 10px 12px; text-align: right">35</td>
      <td style="padding: 10px 12px; text-align: right">27</td>
      <td style="padding: 10px 12px; text-align: right">4</td>
      <td style="padding: 10px 12px; text-align: right">2</td>
    </tr>
    <tr>
      <th scope="row" style="padding: 10px 12px; text-align: left; font-weight: 600; background: #f1f5f9">Imran</th>
      <td style="padding: 10px 12px; background: #f1f5f9; text-align: right">12</td>
      <td style="padding: 10px 12px; background: #f1f5f9; text-align: right">15</td>
      <td style="padding: 10px 12px; background: #f1f5f9; text-align: right">1</td>
      <td style="padding: 10px 12px; background: #f1f5f9; text-align: right">0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" style="padding: 10px 12px; text-align: left; font-weight: 600; border-top: 2px solid #334155">Total</th>
      <td style="padding: 10px 12px; font-weight: 600; border-top: 2px solid #334155; text-align: right">117</td>
      <td style="padding: 10px 12px; font-weight: 600; border-top: 2px solid #334155; text-align: right">95</td>
      <td style="padding: 10px 12px; font-weight: 600; border-top: 2px solid #334155; text-align: right">14</td>
      <td style="padding: 10px 12px; font-weight: 600; border-top: 2px solid #334155; text-align: right">3</td>
    </tr>
  </tfoot>
</table>

Your table and look are kept on this device for next time. Nothing is uploaded.

How to make an HTML table

Fill the grid
Type in the cells, or paste rows from Excel, Sheets, CSV, Markdown or an HTML table. Tab and Enter move between cells; Enter on the last row adds a new one.
Pick a look
Choose a style and a colour, turn on the header row, a total row or cards on phones, and set each column's alignment. The preview updates as you go.
Copy the code
Pick HTML, CSS, Markdown or CSV and press Copy or Download. Ctrl+C with nothing selected copies the code on the open tab.

Good to know

Number columns are lined up on the right when you paste, so totals and prices are easy to compare.
Inside the HTML styles survive being pasted into emails and blog editors that strip stylesheets.
Cards on phones needs a small style block even with inline styles, because only CSS can change the layout by screen width.
Your last table is kept on this device, so it is still here when you come back.
Up to 300 rows and 30 columns. Undo takes back row, column, merge and paste changes.

Where people use it

Price list on a website
Type or paste your prices and copy a neat table for your page.
Table in an email
Use inline styles so the table looks right when pasted into an email.
From Excel to the web
Copy cells from Excel, paste into the grid and the rows fill in.
README tables
Copy the same table as Markdown for project notes.
Markdown editor and preview
Timetable or schedule
Merge cells for a class timetable or an event schedule.
Put it on a page
Paste the HTML into the editor and see it live.
HTML editor, formatter and live preview

Why this one

You build the table like a spreadsheet, merge cells, and get clean code that looks right in emails and on phones.

Edit in a grid like a spreadsheet.
Paste from Excel, CSV, Markdown or an HTML table.
Copy HTML, CSS, Markdown or CSV.
Preview at phone and wide widths.

What you can change

Table look and colours
Header row and first column
Merge cells
Align columns
Styles inside the HTML or as a class

People find this page by searching

html table generator
create html table online
excel to html table
markdown table generator
table generator for email
html table code
csv to html table
table with merged cells html

Cite this tool

APA

sdev.in. (n.d.). HTML table generator with live preview [Web tool]. https://www.sdev.in/tools/html-table-generator

MLA

"HTML table generator with live preview." sdev.in, https://www.sdev.in/tools/html-table-generator.

Chicago

sdev.in. "HTML table generator with live preview." https://www.sdev.in/tools/html-table-generator.

BibTeX

@misc{sdev-html-table-generator,
  title = {HTML table generator with live preview},
  author = {{sdev.in}},
  howpublished = {\url{https://www.sdev.in/tools/html-table-generator}},
  note = {Web tool}
}

Questions people ask

How do I copy a table from Excel or Google Sheets?

Select the cells in your sheet, copy them, click a cell in the grid here and paste. The rows and columns fill in, and number columns line up on the right by themselves. You can also use Paste a table to drop in CSV, Markdown or an HTML table.

Should I use inline styles or a class with CSS?

Inline styles put the look inside every tag, so the table looks right when pasted into an email, a blog editor or any page that does not let you add CSS. A class with CSS keeps the HTML short and lets one stylesheet style many tables; use it on your own website.

How do I merge cells?

Click a cell and use Merge right or Merge down, or hold Shift and click another cell (or use Shift with the arrow keys) to mark a block, then press Merge selected. The output uses colspan and rowspan. Unmerge splits it back.

Is the table accessible for screen readers?

Yes. The header row goes in thead with th scope="col", a first column of names uses th scope="row", the caption becomes a real caption element, and a total row goes in tfoot. Screen readers can then read each cell with its headings.

What does Cards on phones do?

On screens under 600 pixels wide, each row turns into a small card and every cell shows its column name beside it, so wide tables stay readable on a phone without sideways scrolling. Switch the preview to Phone to see it.

Can Markdown show merged cells?

No. Markdown tables have no colspan or rowspan, so the merged block's text sits in its first cell and the other cells stay empty. Use the HTML output when you need merged cells.

HTML table generator

Live preview

Your code

How to make an HTML table

Fill the grid

Pick a look

Copy the code

Good to know

Where people use it

Price list on a website

Table in an email

From Excel to the web

README tables

Timetable or schedule

Put it on a page

Why this one

What you can change

People find this page by searching

Questions people ask