GridAlign: Markdown Table Alignment Visualizer

Markdown Source

Paste or type your table here

Live Preview

Click headers to change alignment

Recent Tables

No saved tables yet. Click Save after editing.

Why tables break and how to fix them

Common mistakes

Missing separator line. Every table needs a line of dashes and pipes between the header and body. Without it, most parsers treat the table as plain text.
Mismatched column counts. If your header has four columns but a data row has three, the table may not render at all. GridAlign highlights these mismatches.
Extra spaces inside alignment markers. :---: works. : - - - : does not. Keep colons flush to the edge.
Using tabs instead of spaces. Tabs render unpredictably across editors. GridAlign normalizes spacing on export.

How alignment works

Markdown table alignment is controlled by colons in the separator line:

Marker	Result
`:---`	Left aligned (default)
`:--:`	Center aligned
`---:`	Right aligned
`----`	Left aligned (no colon)

Click any column header in the preview to cycle through these options. The source updates automatically.

Platform differences

GitHub, GitLab, Bitbucket, and static site generators each use slightly different markdown engines. GridAlign targets the most common subset:

GitHub Flavored Markdown (cmark-gfm)
CommonMark with tables extension
Most Python-Markdown and marked.js setups

Tables with block elements inside cells, line breaks, or HTML tags may need platform-specific testing.

Conversion tips

Paste spreadsheet data directly. GridAlign detects comma-separated, tab-separated, and space-separated values. For best results:

Include a header row in your paste
Avoid cells with embedded newlines
Quote cells containing commas when pasting CSV

The converter strips rich formatting and creates clean markdown with consistent padding.

Scenario: Standardizing a team changelog

Your team maintains a changelog in a GitHub repo. Different contributors use different spacing, so the table looks ragged. Here is how GridAlign helps:

Paste the messy table into the source panel
Click column headers to set center alignment for status badges and right alignment for version numbers
Adjust widths visually so the table does not wrap on narrow screens
Copy the cleaned markdown and paste it back into your PR
Save the table to history as "Changelog template" for next time

The result renders identically on GitHub, in your IDE preview, and in generated documentation sites.

Troubleshooting

Preview shows plain text instead of a table: Check that your separator line contains only hyphens, pipes, and colons. Remove any extra characters or spaces around colons.
Alignment toggles do nothing: Make sure the separator line has the same number of columns as the header. GridAlign will warn you about mismatched counts.
Copied markdown has extra blank lines: GridAlign preserves intentional blank lines but strips trailing whitespace. Check your source for double line breaks between rows.
History disappeared: History is stored in your browser's localStorage. Clearing cookies or using private browsing will erase it. Use Share URL to create permanent links.