Markdown Tables in VS Code: Preview, Format and Edit

How do I preview a Markdown table in VS Code?

The Markdown preview is built into VS Code and uses the markdown-it parser, which supports GitHub-style pipe tables, alignment colons and inline HTML such as <br>. No extension is needed. Paste this into a .md file and open the preview:

| Extension           | Formats tables | Lints tables |
| :------------------ | :------------: | :----------: |
| Markdown All in One |       ✅       |      ❌      |
| Prettier            |       ✅       |      ❌      |
| markdownlint        |       ❌       |      ✅      |

The side preview scrolls with the editor and updates as you type, which is the quickest way to spot a broken delimiter row. A table that renders here will usually render on GitHub too. The differences come from raw HTML: GitHub strips style attributes and some tags, so check styled tables on GitHub itself.

Table borders in the preview

The preview follows your color theme, so table lines can be faint. Add your own stylesheet with the markdown.styles setting (a list of CSS file paths or URLs). This only changes the preview, not the file.

/* .vscode/table-preview.css, referenced from "markdown.styles" */
table {
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #8b949e;
  padding: 4px 10px;
}

How do I format (align) a Markdown table in VS Code?

VS Code has no built-in Markdown formatter. Format Document (Shift+Alt+F on Windows, Shift+Option+F on macOS, Ctrl+Shift+I on Linux) does nothing to a .md file until an extension provides a formatter. Once one is installed, it pads every cell so the pipes line up, which makes the source readable and keeps diffs clean.

| Setting | Default | Notes |
|---|:-:|---|
| editor.formatOnSave | false | Needs a formatter |
| editor.wordWrap | off | Turn off for tables |

| Setting             | Default | Notes               |
| ------------------- | :-----: | ------------------- |
| editor.formatOnSave |  false  | Needs a formatter   |
| editor.wordWrap     |   off   | Turn off for tables |

To format just one table, select it and run Format Selection (Ctrl+K Ctrl+F) where the formatter supports it. No editor available? The Markdown table formatter does the same in the browser.

VS Code extensions for Markdown tables

You need one formatter, and optionally a linter. Pick the formatter your project already uses; running two on the same file just makes them fight over the defaults.

Markdown All in One

The usual first install for Markdown in VS Code. Its table formatter runs on Format Document and is on by default (setting markdown.extension.tableFormatter.enabled). It keeps alignment colons, pads cells and normalizes the delimiter row. It also adds shortcuts such as Ctrl+B for bold, which work inside cells.

Markdown Table Prettifier

A focused extension by Krisztian Daroczi (darkriszty.markdown-table-prettify) that only aligns tables. It is useful when you don't want a full Markdown formatter touching the rest of the file. Like most formatters, it assumes one character is one column, so tables containing CJK text or some emoji can still look ragged in the editor even though they render correctly. Check its README for the current state of wide-character support.

Prettier

Prettier formats Markdown files, and that includes aligning table columns. If your repository already runs Prettier in CI, use it in the editor too so local formatting matches. It may leave a table in a compact, unaligned form when alignment would push lines past the configured printWidth.

Table-editor and coloring extensions

Several Marketplace extensions turn the editor into a lightweight table editor in the style of Emacs org-mode: Tab jumps to the next cell, Shift+Tab goes back, Enter adds a row, and the table re-aligns as you type. Others color each column so you can follow a row across a wide table. Names and maintainers change, so check recent updates and reviews before installing.

Format tables on save

Add this to your user settings or the project's .vscode/settings.json so every save aligns the tables. Turning word wrap off for Markdown keeps wide rows on one line, so the alignment stays visible.

{
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one",
    "editor.formatOnSave": true,
    "editor.wordWrap": "off"
  }
}

{
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

For Markdown Table Prettifier, set editor.defaultFormatter to darkriszty.markdown-table-prettify. Committing .vscode/settings.json gives everyone on the project the same behavior.

Catch broken tables with markdownlint

The markdownlint extension underlines table problems as you type. Three rules cover tables:

{
  "MD055": { "style": "leading_and_trailing" },
  "MD056": true,
  "MD058": true
}

MD058 matters even if you only publish on GitHub: kramdown, Python-Markdown and several editors won't start a table without the blank line. For a one-off check outside VS Code, use the Markdown table validator.

Faster table editing: multi-cursor and column selection

Built-in multi-cursor editing handles most bulk table edits without an extension.

• Add a column: box-select the end of every row, type | and the new value, then format.
• Change alignment: edit the delimiter row only; colons there align the whole column.
• Escape pipes in bulk: select a literal | inside a cell, press Ctrl+D to pick the next ones you need, and type \|.
• Regex find and replace (Ctrl+H, then the .* button) handles column-wide edits, such as wrapping every value in the first column in backticks.

Sorting a table

VS Code's built-in Sort Lines Ascending and Sort Lines Descending commands (Command Palette) sort whole lines as text. Select only the data rows, not the header or delimiter, and the table is sorted by its first column. For anything else (another column, numbers, dates, several keys), paste the table into the Markdown table sorter and paste the result back. Text sorting puts 10 before 9; the sorter compares numbers as numbers.

Creating tables: snippets, pasting and generators

A table snippet

Run Snippets: Configure Snippets, choose markdown, and add the snippet below. Quick suggestions are off by default in Markdown files, so type table, press Ctrl+Space and pick the snippet. Tab then moves from cell to cell.

{
  "Markdown table": {
    "prefix": "table",
    "body": [
      "| ${1:Column} | ${2:Column} | ${3:Column} |",
      "| --- | --- | --- |",
      "| ${4} | ${5} | ${6} |",
      "$0"
    ],
    "description": "Three-column Markdown table"
  }
}

From a spreadsheet or CSV

Copying cells from Excel or Google Sheets pastes tab-separated text, not a table. Convert it first with Excel to Markdown or CSV to Markdown, or build the table in the table generator and paste the Markdown in. The full rules for what you paste are in the Markdown table syntax guide.

Tables in Jupyter notebooks in VS Code

Jupyter notebooks opened in VS Code render Markdown cells with the same kind of parser, so pipe tables work in Markdown cells once the cell is run (Shift+Enter). To show a pandas DataFrame as Markdown in a code cell, convert it with to_markdown(), which needs the tabulate package:

import pandas as pd
from IPython.display import Markdown

df = pd.DataFrame({"model": ["A", "B"], "accuracy": [0.91, 0.87]})
Markdown(df.to_markdown(index=False))  # needs: pip install tabulate

More options, including formatting numbers and writing tables to files, are in the Python Markdown tables guide.

Common problems and fixes

• “There is no formatter for 'markdown' files installed.” Install one of the formatters above. If several are installed, run Format Document With… and choose Configure Default Formatter.
• Format on save does nothing. Check that editor.formatOnSave is set inside the [markdown] block or globally, and that the table itself is valid; formatters generally leave broken tables untouched.
• Columns look ragged after formatting. Turn off word wrap (Alt+Z) and check for CJK characters or emoji, which are wider than one column.
• It renders in VS Code but not on GitHub or your site. Inline style attributes are stripped by GitHub, and site generators often need a blank line before the table. See Markdown table not rendering.
• Two formatters disagree. Prettier and Markdown All in One produce slightly different spacing. Pick one per project and set it as the default formatter.

Publishing the table on GitHub? The GitHub README tables guide covers badges, centering and what GitHub strips.

Frequently asked questions