Markdown Table Generator - Create & Edit Tables Visually Online
Create and edit Markdown tables with a visual grid editor. Set column alignment, import CSV/Markdown, and get real-time GFM output — 100% client-side, no data sent to server.
Frequently Asked Questions
What is a Markdown table generator and why do I need one?
A Markdown table generator is a visual tool that lets you create tables in Markdown syntax without manually typing pipe characters (|), dashes (-), and alignment colons (:). Writing Markdown tables by hand is tedious and error-prone, especially for tables with many columns or long cell contents. This visual generator provides a spreadsheet-like grid where you type cell contents, set column alignment, and get perfectly formatted Markdown output instantly.
How do I use this Markdown table generator?
Start by typing content directly into the grid cells. The first row is always the header row. Use the toolbar buttons to add or remove rows and columns as needed. To set column alignment (left, center, or right), click the alignment toggle on each column header. The generated Markdown appears in the output panel in real time as you edit. Click the Copy button to copy the Markdown to your clipboard.
Is my data safe? Does any data leave my browser?
Your data is 100% safe and never leaves your browser. All table editing and Markdown generation is performed client-side using JavaScript running directly in your browser. No cell contents, table structures, or any data is transmitted to any server. You can verify this by checking your browser's network tab during use.
What Markdown table syntax does this tool generate?
The tool generates GitHub Flavored Markdown (GFM) table syntax, the most widely supported table format. It uses pipe characters (|) to separate columns, a separator row with dashes (-) between the header and data rows, and colons (:) in the separator row to indicate column alignment. Left-aligned columns use :---, right-aligned use ---:, and center-aligned use :---:. This syntax is compatible with GitHub, GitLab, Bitbucket, VS Code, Obsidian, and virtually all modern Markdown renderers.
What is the difference between Pretty Print and Compact output?
Pretty Print mode pads cell contents with spaces so that the pipe characters align vertically in the source text. This makes the raw Markdown readable even before rendering, which is helpful when reviewing documentation in code editors or pull request diffs. Compact mode outputs the minimal valid syntax with no extra padding spaces, resulting in a shorter string useful when file size matters.
Can I import and edit an existing Markdown table?
Yes. Click the Import button and select Markdown mode. Paste your existing Markdown table into the import text area and click Import. The tool parses the pipe-delimited syntax, detects column alignments from the separator row, and populates the grid editor with the cell contents. You can then visually edit any cell, add or remove rows and columns, change alignment, and copy the updated Markdown.
Can I convert CSV or Excel data into a Markdown table?
Yes. Click the Import button and select CSV/TSV mode. Paste your comma-separated, tab-separated, or semicolon-separated data into the import text area. The tool auto-detects the delimiter and parses the data into the grid editor, treating the first row as the header. For Excel data, copy the cells in Excel and paste directly — the tab-separated format will be auto-detected.
What are the size limits for tables?
The tool supports tables up to 20 columns and 100 rows (including the header row). These limits exist because Markdown tables wider than 20 columns become unreadable in most renderers, and very long tables are better served by other data formats. Individual cells can contain up to 500 characters.
Code Examples
function generateMarkdownTable(data, alignments = []) {
const numCols = Math.max(...data.map(row => row.length));
const rows = data.map(row => {
const normalized = [...row];
while (normalized.length < numCols) normalized.push('');
return normalized;
});
const colWidths = Array(numCols).fill(3);
for (let col = 0; col < numCols; col++) {
for (const row of rows) {
colWidths[col] = Math.max(colWidths[col], row[col].length);
}
}
const separator = Array.from({ length: numCols }, (_, i) => {
const align = alignments[i] || 'left';
const dashes = '-'.repeat(colWidths[i]);
if (align === 'center') return ':' + dashes.slice(1, -1) + ':';
if (align === 'right') return dashes.slice(0, -1) + ':';
return ':' + dashes.slice(1);
});
const formatRow = (cells) =>
'| ' + cells.map((c, i) => c.padEnd(colWidths[i])).join(' | ') + ' |';
return [
formatRow(rows[0]),
'| ' + separator.join(' | ') + ' |',
...rows.slice(1).map(formatRow)
].join('\n');
}
const table = generateMarkdownTable(
[['Name', 'Role'], ['Alice', 'Engineer'], ['Bob', 'Designer']],
['left', 'center']
);
console.log(table);