HTML Table Generator

Build, edit and style HTML tables, then take the clean code with you.

Create beautiful, responsive HTML tables with ease.
Type or paste your data, style it without touching CSS, and take the clean code with you.

Structure

Rows (1 to 100)

Columns (1 to 20)

Header Row

Use the first row as a header

Shown as <thead> in the code.

Footer Row

Use the last row as a footer

The last row becomes <tfoot>.

Live editor (click a cell to type)

Edit any cell right here. Drop a .csv file on this area, or use the buttons below.

Styling

Caption (optional) Emitted as a <caption> element.

Framework Border, padding and color options apply in Plain framework; Bootstrap and Tailwind use their own classes.

Details

Striped rows

Responsive wrapper

Table width: 100% Plain framework only.

Border width (0 to 10) Plain framework only. In Bootstrap it toggles table-bordered.

Cell padding (0 to 40) Plain framework only.

Border color Plain framework only.

Header background Plain framework only.

Generated Code

Copy Code Download Code

Edit the cells above or load a template below; the code keeps up automatically.

Overview

Our HTML Table Generator builds ready-to-use HTML table markup from data you type directly into a live preview. Set the number of rows and columns, click any cell to edit its text, switch a header or footer on and off, and the complete code appears beside it automatically, formatted and escaped ready to paste into any page.

It is useful whenever hand-writing table markup would be slow and error-prone: publishing price lists, schedules and reports on a website or blog, converting spreadsheet rows from a CSV export into markup, or producing a clean styled table without writing the CSS yourself. Because the preview is a genuine HTML table, what you see while editing is exactly the structure the code produces.

What it is built with: a custom table model and code composer written from scratch in vanilla JavaScript: your cells live in a simple grid, and the generator turns that grid, the styling settings and the chosen framework into clean HTML5 markup. There is no third-party library, no framework dependency and no server: every edit, import and export happens locally in your browser.

What this Tool Does

1. Builds the grid: the Rows and Columns settings grow or shrink the table on the spot. New cells arrive with placeholder text; everything beyond the maximum of 100 rows and 20 columns is trimmed away.

2. Lets you edit in place: every cell in the preview is editable. Click one, type, and both the preview and the generated code reflect the change immediately, without losing your cursor.

3. Structures the markup: with Header Row on, the first row becomes <thead> with scope="col" headers; with Footer Row on, the last row becomes <tfoot>; an optional caption is placed inside the table.

4. Styles the output three ways: choose Plain HTML/CSS for a self-contained table with its own <style> block and your border, padding, width and color choices; or Bootstrap 5 and Tailwind CSS for lightweight class-based markup.

5. Imports and exports: import a CSV file by click or drag and drop to fill the grid, then copy the finished code or download it as html-table.html.

Features and Settings

Rows & Columns: growing a dimension adds editable cells; shrinking it trims them. Nothing is lost while the size is unchanged, so you can grow a column, fill it, and come back.

Header and Footer rows: the header checkbox turns the first row into <thead> with scope="col"; the footer checkbox turns the last row into <tfoot>. Both rows stay fully editable in the preview, where the footer row gets a tinted background so the split is visible.

Caption: a short line describing the table, emitted as a real <caption> element. Screen readers announce it, and crawlers use it to understand what the table lists.

Plain HTML/CSS framework: all visual settings are emitted as one tidy <style> block for the table: width percentage, border collapse, border width and color, cell padding, header background, and optional striped rows on tbody tr:nth-child(even).

Bootstrap 5 and Tailwind frameworks: the code uses framework classes instead of a style block: table, table-striped and table-bordered for Bootstrap; min-w-full, divide-y and padding utilities for Tailwind. Color, padding and width sliders are plain-framework options and are skipped in these modes, which the Styling panel hints at per option.

Responsive wrapper: wraps the table so wide tables scroll instead of breaking mobile layouts: a table-responsive div for Bootstrap, an overflow-x:auto wrapper for the other frameworks.

Import CSV: load a .csv file by button or drag and drop. The importer honours commas inside quoted fields, keeps doubled quotes as literal quote marks, auto-detects comma, semicolon or tab delimiters, and syncs Rows and Columns to what it reads, up to the 100 row and 20 column limits.

Copy & Download: Copy places the whole snippet on your clipboard; Download saves it as html-table.html. Both icons sit under the code box.

Safe output: every cell is HTML-escaped in the generated markup, so angle brackets, quotes and ampersands in your data always land in the code intact and valid.

A small sample of the Plain framework output, produced with a caption, a header row and default styling:

<style>
  .custom-table { width: 100%; border-collapse: collapse; }
  .custom-table th, .custom-table td {
    padding: 12px; text-align: left;
    border: 1px solid #d7dde5;
  }
  .custom-table th { background-color: #eef2fb; }
</style>
<table class="custom-table">
  <caption>Server Inventory</caption>
  <thead>
    <tr>
      <th scope="col">Hostname</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>web-node-01</td><td>Running</td></tr>
    <tr><td>backup-srv-11</td><td>Maintenance</td></tr>
  </tbody>
</table>

Examples

Each example below is a real table. Press its Try it button to load the complete table into the live editor and generate the code at once; the same four examples are also available as buttons under the code box. All of the data is original, written for this site:

Weekly Team Rota

5 rows × 6 columns with a header row

Shift	Monday	Tuesday	Wednesday	Thursday	Friday
Morning	Amara	Jonas	Amara	Priya	Jonas
Midday	Priya	Amara	Jonas	Sofia	Priya
Evening	Sofia	Priya	Sofia	Jonas	Amara

A staff schedule showing who covers each shift; the Try it button loads all five rows, including the on-call row.

Office Supply Price List

6 rows × 4 columns with a header row

Item	Unit	Price	In stock
Copy paper A4	Ream	$4.60	160
Stapler	Piece	$7.20	42
Whiteboard marker	Pack of 4	$3.10	88

A product list with prices and stock counts, handy for simple shop pages, quotes and inventory snippets.

Server Inventory

5 rows × 4 columns with a header row

Hostname	Location	Role	Status
web-node-01	Frankfurt	Load balancer	Running
db-replica-04	Dublin	Replica	Running
backup-srv-11	Frankfurt	Nightly backups	Maintenance

A technical inventory table with status values in a column, suitable for documentation pages and status notes.

Monthly Energy Savings

5 rows × 4 columns with a header row

Month	Units used	Bill	Saved vs last year
January	412 kWh	$71.50	$9.20
February	386 kWh	$66.05	$12.75
March	348 kWh	$59.00	$15.40

A numbers-first table that also works well with the Footer Row option: add a total row at the bottom and tick the checkbox to emit it as a footer.

When is this tool useful?

Publishing content that is naturally tabular: price lists, timetables, rosters, menus, comparison charts and reports read far better as a real HTML table than as comma-separated text pasted into a paragraph. Whenever your information has columns, this tool turns it into proper markup.

Turning spreadsheet rows into a web page: export a sheet to CSV, drop the file on the live editor, and you have a styled table ready to publish, without reinstalling anything or writing the conversion yourself.

Refreshing a table with new numbers: keep a source CSV for the data you publish and re-import it whenever you update prices, schedules or stock levels, so the page and the spreadsheet never drift apart.

Checking how generated markup looks before it ships: because the preview is a genuine table, the code you copy renders exactly as the preview did, which avoids the classic surprise of pasting untested markup into a page only to find it looks broken.

Producing a practice file: the downloaded html-table.html opens directly in any browser, so it doubles as a clean, self-contained sample you can share or attach to an email.

Who can benefit from it?

Writers, teachers and students: if your work lives in documents rather than code, the live editor is as easy as filling in a text box, and the Plain framework with the default settings already produces a tidy, self-contained table you can paste into a blog post, lesson plan or report template.

Small business owners and marketers: keep a price list or stock list in a CSV export and refresh your web page from it whenever the numbers change, without paying for or learning a page builder.

Front-end developers and QA testers: when you need realistic table markup with a specific class set for a Bootstrap or Tailwind mock, a test fixture, or sample data with awkward characters (quotes, angle brackets) baked in, the generated code is clean, escaped and framework-honest.

Technical writers and documentation authors: inventories, changelogs, server tables and status matrices come out with proper <thead>, scope="col" and an optional <caption>, so they stay accessible and searchable.

Anyone new to HTML: watching the code update as you click and type is a practical way to learn how tables are structured. The generated markup stays small enough to read, which makes it a gentle introduction to <table>, <thead>, <tfoot> and <caption>.

FAQs

FAQ 1: Which styling options affect which framework?
Answer: The border width, cell padding, table width, border color and header background apply to the Plain HTML/CSS framework, which emits them as one <style> block. The Bootstrap 5 and Tailwind options use each framework's own classes for the base table look, striping and borders, so those sliders are skipped in those modes. The Responsive wrapper works in all three.

FAQ 2: How does the footer row work?
Answer: When Footer Row is ticked, the last existing row is taken out of the body and emitted inside <tfoot>; it stays editable in the preview. Turn it off and the same row simply returns to being an ordinary body row.

FAQ 3: What does the CSV import support?
Answer: Standard .csv text files. Commas inside quoted fields are kept together, doubled quotes become literal quotes, and the delimiter is detected automatically between comma, semicolon and tab. Imports are capped at 100 rows and 20 columns; anything beyond that is trimmed and the preview shows what was kept.

FAQ 4: Is the generated code clean and valid?
Answer: Yes. It is HTML5 with a single table element, semantic <thead>, <tbody>, <tfoot> and <caption> where enabled, and scope="col" on every header cell. All cell text is escaped, so characters like <, > and & in your data cannot break the markup.

FAQ 5: Why doesn't the code wait for a Generate button?
Answer: The code box is the tool's result, mirroring the exact grid you are editing, so it updates on every edit and setting change. Nothing is generated on the server and nothing changes if you leave the tool alone; Copy and Download always take a snapshot of the current code.

FAQ 6: Is my table data or my CSV file sent anywhere?
Answer: No. The preview, the code generation and all CSV parsing run entirely in your browser's JavaScript. Nothing you type or import is transmitted to, or stored on, any server.