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
Keep reading
5 min read
CSV to JSON: from a spreadsheet to structured data
Convert CSV to JSON in the browser — header rows, delimiters, quoting rules and type handling explained, with the spreadsheet exports that break parsers.
5 min read
JSON to CSV: flattening nested data without losing meaning
Convert JSON to CSV with nested objects flattened into columns, consistent headers and Excel-safe quoting — and know which shapes should not be flattened at all.
5 min read
SRT to VTT: subtitles the browser will actually load
Convert SRT to VTT for HTML5 video players — timecode format, styling and cue settings explained, with the accessibility notes that matter.