Markdown Table Generator

How to use the Markdown Table Generator

1. Type column headers in the inputs at the top of the grid. Each header maps to a single column in the rendered Markdown table.
2. Pick alignment per column. The dropdown above each header switches between left, center, and right; the separator row under the header updates from :--- to :---: or ---: as you choose.
3. Fill cells row by row. Use Tab to move horizontally and Enter to commit a value. The Markdown output panel re-renders on every keystroke so you can see the pipe-aligned result live.
4. Grow the grid with the + Add row button below the data and the + col button at the right edge of the header row. Remove a row by clicking the x button on its right; remove a column by clearing its header and using the trash control.
5. Copy the formatted Markdown from the output panel and paste it into a README, GitHub issue, Notion doc, or any GFM-aware editor.

What the generator does under the hood

The component holds the grid as a two-dimensional array in Preact state plus a parallel array of alignment tokens. On every render, a pure helper assembles three string groups: the header line as | h1 | h2 | h3 |, the alignment row using GFM colon tokens (:--- for left, :---: for center, ---: for right), and one data line per row. Pipe characters inside any cell are escaped to \\| so they render as a literal pipe inside the cell rather than splitting it.

The output targets GitHub-Flavored Markdown specifically, the dialect codified at github.github.com/gfm. CommonMark itself does not standardize tables, but every major renderer that adopted GFM tables reads the same separator-row syntax: GitHub, GitLab, Bitbucket, Gitea, Notion, Obsidian, Slack snippets, Discord codeblocks with the right extensions, Hugo with the tables render hook, MkDocs with pymdown-extensions, and the Marked.js library on npm. The Clipboard API call in the Copy button writes the same string the panel displays.

When this tool earns its keep

• Drafting a comparison table inside a GitHub PR description or issue without spending five minutes counting pipe characters by hand.
• Seeding a project README with a configuration matrix, a feature flag inventory, or a routes table that updates over time.
• Pasting structured release notes (version, date, summary) into a CHANGELOG.md without breaking the existing alignment.
• Producing a quick reference block for an Obsidian or Notion vault, where typing the syntax by hand interrupts the writing flow.
• Translating a small CSV or spreadsheet column into Markdown for inclusion in a docs site that does not support raw CSV.
• Showing a teammate why their renderer fails on a particular table by reproducing the structure here and copying the canonical output.

Common pitfalls and edge cases

• Real newlines inside a cell are not legal in GFM. Use <br> for a soft break inside a cell; every modern GFM renderer honors it. The generator does not auto-rewrite typed newlines, so paste with intent.
• Pipe characters need escaping. The generator outputs \\| automatically, but if you paste pre-escaped Markdown back in, you may end up with double escapes. Re-export rather than round-trip when in doubt.
• Alignment is advisory, not required. Renderers that ignore the colon tokens fall back to left alignment by default. If your output looks left-justified after copying into a tool that should respect alignment, that tool is the spec violator.
• Empty header cells produce orphan columns. GFM allows blank headers, but most renderers display a thin empty header row, which looks broken. Always type something, even  , in every header.
• Column count must be consistent. If a row has fewer cells than the header, GFM pads missing cells with empty values; if it has more, the extra cells are silently dropped by some renderers and shown as overflow by others. The generator keeps the grid square automatically.
• Lists, code blocks, and footnotes do not work inside cells. GFM tables are for short text. For richer content, use HTML directly, since GFM permits inline HTML in cells.

The GFM table grammar in one paragraph

GitHub-Flavored Markdown formalized table syntax in 2014 as an extension to CommonMark. A table is a single header line, a separator line with at least three dashes per column and optional alignment colons, and zero or more data lines, all pipe-delimited and each terminated by a newline. Cells are stripped of leading and trailing whitespace before rendering. Pipes inside cells are escaped with a backslash. The grammar excludes nested tables, real newlines inside cells, and arbitrary block content; the simplicity is what makes round-tripping into so many other tools work.

Alternatives and when they beat this tool

The VS Code extension Markdown All in One renders tables live in the editor and reformats them with a keystroke, which beats copy-paste round-trips when you are already in your editor. Pandoc converts CSV, HTML, and many other source formats into Markdown tables in one shell command and is the right pick for batch jobs. The CLI tool csvtomd turns a CSV file into a GFM table on stdout. Tables Generator (tablesgenerator.com) is a richer web alternative with LaTeX, HTML, and BBCode export; the on-page tool here wins when you want a quick GFM-only output, do not want to upload your data to a remote service, and do not want to install another VS Code extension.