Markdown tables

Tables are part of GitHub Flavored Markdown, the dialect used by GitHub, GitLab, many note apps and this editor. You draw them with pipes (|) and dashes (-), and they stay readable as plain text. Every example below shows the Markdown first and the result under it. Paste any of them into the editor to try them out.

A basic table

The first row is the header. The second row, made of dashes, separates it from the body. Each following line is one row, with cells separated by pipes.

| Fruit  | Color  | Price |
| ------ | ------ | ----- |
| Apple  | Red    | 1.20  |
| Banana | Yellow | 0.50  |
| Kiwi   | Green  | 0.80  |

A few rules make tables easier to write:

• The pipes don't need to line up. |a|b| on one line and | a | b | on the next make the same table; lining them up only helps when reading the plain text.
• The pipes at the start and end of each line are optional, but clearer to keep.
• The divider row needs at least one dash per column; three is the usual habit, and some older tools require it.
• Every table needs a header row. If a row has fewer cells than the header, the rest are left empty; extra cells are dropped.
• Leave an empty line before the table, so it isn't read as part of a paragraph.

Aligning columns

Colons in the divider row set the alignment of a column: on the left for left-aligned, on the right for right-aligned, on both sides for centered. Numbers are easiest to compare when they are right-aligned.

| Item     | Quantity | Price |
| :------- | :------: | ----: |
| Notebook |    2     |  4.50 |
| Pen      |    10    |  1.25 |
| Backpack |    1     | 39.00 |

Formatting inside cells

Cells can hold inline Markdown: bold, italic, strikethrough, code, links and images. Block elements such as headings, lists, quotes or code blocks can't go in a cell.

| Command      | What it does                                      |
| ------------ | ------------------------------------------------- |
| `git status` | Shows **changed** files                           |
| `git add .`  | Stages *everything*                               |
| `git commit` | Saves a snapshot, ~~not~~ undoable                |
| `git push`   | Uploads, see [the docs](https://git-scm.com/docs) |

A pipe inside a cell

A pipe would start a new cell, so put a backslash before it: \|. This also works inside inline code.

| Operator   | Meaning |
| ---------- | ------- |
| `a \|\| b` | a or b  |
| `a && b`   | a and b |
| x \| y     | x or y  |

Line breaks and lists in a cell

Each row has to stay on one line of text. For a line break inside a cell, use the HTML tag <br>; with it you can also fake a short list.

| Day    | Plan                                  |
| ------ | ------------------------------------- |
| Monday | Write the draft<br>Send it for review |
| Friday | • Fix comments<br>• Publish           |

Empty cells

Leave the space between two pipes empty. The divider row still needs every column.

| Task    | Mon | Tue | Wed |
| ------- | :-: | :-: | :-: |
| Running |  ✓  |     |  ✓  |
| Reading |     |  ✓  |     |

Wide tables

Markdown has no column widths: the browser sizes columns to fit their content. In the preview, a table wider than the page scrolls sideways instead of squeezing the text, so long tables stay readable on a phone too. Keep cells short, and move long explanations into the text below the table.

Merged cells and other layouts (HTML)

Markdown tables can't merge cells or have more than one header row. When you need that, write the table in HTML; Markdown Editor Preview allows colspan and rowspan.

<table>
  <tr><th rowspan="2">City</th><th colspan="2">Temperature</th></tr>
  <tr><th>January</th><th>July</th></tr>
  <tr><td>Oslo</td><td>−4 °C</td><td>17 °C</td></tr>
  <tr><td>Sydney</td><td>23 °C</td><td>13 °C</td></tr>
</table>

Styles and scripts in HTML are removed for safety, so colors and widths can't be set this way.

Tables from a spreadsheet

Writing a large table by hand is slow. Many spreadsheet add-ons and online converters turn CSV or copied cells into a Markdown table; paste the result into the editor and check it in the preview. The toolbar's table button inserts an empty table to start from.

More guides

• Markdown guide: all the syntax on one page
• Math in Markdown: equations with LaTeX and KaTeX
• Mermaid diagrams: flowcharts and more from text