YamlBox

Web & encoding · 5 min read

Markdown tables: generate them instead of counting pipes

A markdown table is a grid of cells written with pipes and dashes, and it is the one part of markdown that is genuinely unpleasant to write by hand. Counting pipes, keeping the delimiter row the same width as the header, and escaping a pipe that appears inside a cell all compete for attention. Generating the table removes all three problems at once.

Updated

The syntax, in one example

                | Tool          | Input       | Offline |
| :------------ | :---------: | ------: |
| YAML to JSON  | YAML        | yes     |
| JWT decoder   | JWT         | yes     |
              

The first row is the header, the second is the delimiter row, and everything after is data. Colons in the delimiter row set alignment: `:---` left, `:---:` centre, `---:` right. GitHub and most renderers accept a leading and trailing pipe as optional, but including them keeps the raw text readable in an editor.

The three things that break tables

  • A pipe inside a cell — escape it as `\|`, or the row is split into one column too many.
  • A delimiter row with the wrong number of columns — the header shifts and the table renders misaligned.
  • A blank line inside the table — the renderer treats it as the end of the table and prints the rest as text.

Escaping matters most for code and regexes in cells: `a|b` and `\bfoo\b` both need attention before they can live happily inside a table.

Getting data in from a spreadsheet

The natural workflow is to paste a selection from a spreadsheet or a CSV export and let the generator do the quoting and alignment. That is faster and less error-prone than typing rows, and it also handles the boring cases — variable column widths, numbers that should be right-aligned, cells that contain commas. Trim trailing empty columns before pasting to avoid a table with phantom columns that render as gaps.

When not to use a table

Tables are for comparisons: feature matrices, flag references, compatibility lists, environment variables. They are poor for prose, bad for long descriptions, and painful on narrow screens because markdown has no responsive behaviour — the renderer either scrolls horizontally or squeezes columns into unreadable slivers. If a cell needs a paragraph, use a definition list, a heading per entry, or a bulleted list instead. A table nobody can read on a phone is worse than the list it replaced.

Generate, then paste anywhere

The output is plain markdown, so it drops straight into a README, a pull request description, a wiki page, a Jira ticket or a comment. The YamlBox markdown table generator runs in the browser, aligns columns for you, escapes pipes, and keeps working offline — so you can paste internal data without publishing it anywhere.

Markdown Table Generator — frequently asked questions

How do I put a pipe character inside a markdown table cell?

Escape it with a backslash — `\|` — otherwise the renderer treats it as the end of the cell. Generators handle this automatically, which is the main reason to build tables with a tool rather than by hand.

How do I align a column in markdown?

Use colons in the delimiter row: `:---` for left, `:---:` for centre and `---:` for right. Alignment applies to the whole column, so right-align numeric columns and left-align text for the most readable result.

Why is my markdown table not rendering?

Check three things: the delimiter row has exactly as many columns as the header, there is no blank line inside the table, and the header row directly precedes the delimiter row. Any of those three will break rendering in GitHub-flavoured markdown.

Tools mentioned in this post

Browse all 19 tools →

Keep reading

All 19 posts →