Make a Markdown table without counting pipes
Markdown tables are easy to read and tedious to write. Every row needs the same pipes, the second line needs the right dashes and colons, and one stray | in your text breaks a cell in two. This Markdown table generator gives you a grid like a small spreadsheet instead. You type or paste the cells, pick the alignment of each column, and it writes the table in GitHub Flavored Markdown (GFM), with pipes escaped and line breaks handled. The live preview shows how it renders.
It works in both directions: paste an existing Markdown table into Import data and it lands back in the grid, so you can add a column or sort out a messy table without rewriting it by hand. To write a whole document around the table, use the Markdown editor, and to turn the finished Markdown into HTML, the Markdown to HTML converter. If you need the table as HTML right away, the HTML table generator uses the same grid.
How GFM tables are built
Tables are an extension that the GitHub Flavored Markdown spec, version 0.29-gfm, adds to CommonMark. The spec sets these rules, and the generator follows all of them:
- One header row, then a delimiter row. The delimiter row holds only hyphens, with an optional colon on either side, one cell per column. Data rows follow, zero or more.
- Same cell count in header and delimiter. If the header row and the delimiter row differ in the number of cells, it is not a table.
- Pipes separate cells. Spaces around the cell text are trimmed. The pipes at the start and end of a row are optional, but the spec recommends them for clarity, so the generator always writes them.
- Rows may be short or long. A row with fewer cells than the header gets empty cells, extra cells are ignored. The generator always writes complete rows.
- Inline content only. Cells may hold emphasis, links and code, but no block elements such as lists, headings or code blocks. The table ends at the first empty line or the start of another block.
The colons in the delimiter row set the alignment of a column:
| Delimiter cell | Alignment | Choice in the grid |
|---|---|---|
| --- | Not set, the renderer decides (usually left) | Default |
| :-- | Left | Left |
| :-: | Center | Center |
| --: | Right | Right |
The spec needs only one hyphen per delimiter cell. GitHub’s documentation on tables asks for at least three per column, so the generator always writes three or more.
Worked example
Take a small task list with four columns: Task aligned left, Owner at the default alignment, Status centered and Hours aligned right, so the numbers line up. One task name contains a pipe (Fix the login bug | urgent) and another one has a line break after “Plan the launch”. Press Fill in an example to load exactly this table. Pretty aligned writes:
| Task | Owner | Status | Hours | | :------------------------------------ | ----- | :-------: | ----: | | Write the API docs | Ann | Done | 6 | | Fix the login bug \| urgent | Ben | In review | 2.5 | | Plan the launch<br>and the newsletter | Cy | To do | 12 |
The pipe in the task name became \|, the line break became <br>, and the padding follows the alignment: the hours are padded on the left, the status on both sides. Compact writes the same table with no padding:
| Task | Owner | Status | Hours | | :-- | --- | :-: | --: | | Write the API docs | Ann | Done | 6 | | Fix the login bug \| urgent | Ben | In review | 2.5 | | Plan the launch<br>and the newsletter | Cy | To do | 12 |
Both render to the identical table. The width of each column in Pretty aligned is the longest cell in it, counted the way a monospace font shows it, where Chinese, Japanese and Korean characters and most emoji take two places.
Pipes, line breaks and special characters
Pipes. The GFM spec says to escape a pipe inside a cell with a backslash, including inside other inline spans such as inline code. The generator does this for every pipe you type, so you never have to.
Line breaks. A table row must stay on one line in Markdown. GFM passes inline HTML tags through to the output (section 6.10, raw HTML), so a <br> tag in a cell shows as a line break wherever raw HTML is allowed. On a platform that shows the tag as text, set Line breaks in cells to Space.
Markdown inside cells. By default the cells are Markdown: **bold**, `code` and links work as usual. Turn on Plain text cells when your data should appear exactly as typed, for example a product code like *A*-12 or a formula with underscores. The generator then puts a backslash in front of \ ` * _ [ ] < > ~ &, which section 6.1 of the GFM spec allows for any ASCII punctuation character.
Paste from a spreadsheet or import a table
Paste cells from Excel or Google Sheets into any cell of the grid. Pasted text with tabs between cells and line breaks between rows fills the grid from that cell, adding rows and columns as needed. A cell wrapped in double quotes may hold line breaks, tabs and doubled quotes, the way CSV quotes such fields (RFC 4180), and is read as one cell.
Import data replaces the whole grid. Auto recognizes a Markdown table by its delimiter row, and otherwise reads tab separated cells or CSV with the delimiter detected. An imported Markdown table keeps its alignment. If you have a whole CSV file, the CSV to JSON converter turns it into data for code instead. The grid holds up to 300 rows and 30 columns.
Keyboard shortcuts in the grid
| Key | What it does |
|---|---|
| Enter | Go to the cell below. In the last row it adds a new row. |
| Shift+Enter or Alt+Enter | New line inside the cell |
| Tab, Shift+Tab | Next cell, previous cell |
| Arrow keys | Move to the next cell when the cursor is at the edge of the text |
The buttons above the grid insert, move and delete the row or column of the cell you are in.
How to use the Markdown table generator
- 1Type into the grid, paste cells from a spreadsheet into a cell, or open Import data and paste CSV or a Markdown table.
- 2Add, move or delete rows and columns with the buttons above the grid. The first row is the header.
- 3Pick the alignment of each column in the menu at its top, then Pretty aligned or Compact output.
- 4Check the preview, then copy the Markdown or download it as a .md file.
Sources
- GitHub Flavored Markdown Spec 0.29-gfm (2019-04-06): 4.10 Tables (extension)
- GitHub Flavored Markdown Spec: 6.1 Backslash escapes
- GitHub Flavored Markdown Spec: 6.10 Raw HTML
- GitHub Docs: Organizing information with tables
- RFC 4180: Common Format and MIME Type for Comma-Separated Values (CSV) Files
Frequently asked questions
How do I put a pipe character | inside a cell?
Just type it. The generator writes it as \| in the Markdown, because an unescaped pipe would start a new cell. The GFM spec says this escape works inside other inline spans too, so a pipe in inline code like `a|b` is written as `a\|b` and still shows as a|b.
How do I add a line break inside a table cell?
Press Shift+Enter (or Alt+Enter) in a cell of the grid. Markdown table rows have to stay on one line, so the generator writes each line break as a <br> tag, which GFM passes through as inline HTML. If your platform shows the tag as text, set Line breaks in cells to Space.
Can I paste data from Excel or Google Sheets?
Yes. Copy the cells in your spreadsheet and paste them into any cell of the grid: the copied block fills the grid from that cell and adds rows and columns as needed. You can also paste into Import data, which reads tab separated cells, CSV and Markdown tables.
How do I edit a Markdown table I already have?
Open Import data, paste the table and press Import into the grid. The header, the alignment colons and the cells are read back, \| becomes a plain pipe and <br> becomes a line break. As the GFM spec says, a row with fewer cells than the header gets empty cells and cells beyond the header count are dropped.
Do the pipes have to line up?
No. GitHub’s documentation says the cells do not need to line up for the table to render. Pretty aligned pads every cell so the Markdown is easy to read in a code editor or a diff. Compact writes the shortest table, which is handy for chat messages and small files.
Why does my table not show as a table?
Check three things. The header row and the delimiter row must have the same number of cells, otherwise GFM does not see a table. Leave an empty line before the table, as GitHub’s documentation advises. And an empty line ends the table, so remove blank lines between rows.
Is my data sent anywhere?
No. The grid, the Markdown and the preview are all made in your browser, and nothing you type or paste is uploaded. Copy link only shares your output settings, not the table.