Element Converter

Markdown Table to HTML

Paste a Markdown table to generate a clean HTML <table> instantly. The converter maps pipe-and-dash syntax to <table>, <thead>, <tr>, and <th> elements, preserves column alignment, and outputs copyable HTML.

Input · Markdown
Preview · HTML
FeatureMarkdownHTML
TablesPipe syntax<table>
AlignmentColons in dividertext-align
Header rowFirst row<th>

How Markdown tables convert to HTML

A Markdown table converts to an HTML <table> element. Pipes (|) become column cell boundaries, the dashed divider row becomes the <thead>, and each content row becomes a <tr> of <td> cells.

Markdown table syntax uses pipes to separate columns and a divider row of dashes to mark the header. The converter parses this structure and emits semantic table markup ready for any web page.

Markdown
| Name | Role |
| --- | --- |
| Ada | Engineer |
HTML
<table>
  <thead>
    <tr><th>Name</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Ada</td><td>Engineer</td></tr>
  </tbody>
</table>

Aligning table columns

Column alignment is set with colons in the divider row. Use :--- for left, :---: for centre, and ---: for right. Each colon maps to a text-align style on the matching HTML cells.

3 alignment options exist: left (:---), centre (:---:), and right (---:). Without colons, columns default to left alignment in the rendered HTML.

Markdown
| Left | Centre | Right |
| :--- | :---: | ---: |
| a | b | c |

GitHub Flavoured Markdown tables

Tables are a GitHub Flavoured Markdown (GFM) extension, not part of the original Markdown spec. This converter enables GFM, so pipe tables render correctly the same way GitHub renders them.

Standard CommonMark does not define tables. The pipe-table syntax originates from GFM and is supported across GitHub, GitLab, and most modern Markdown editors.

Styling the HTML table with CSS

The converter outputs unstyled, semantic HTML. Add CSS borders, padding, and striped rows after conversion by targeting the table, th, and td selectors in your stylesheet.

Frequently Asked Questions

How do I align columns in a Markdown table?
Add colons to the divider row beneath the header. Use :--- for left, :---: for centre, and ---: for right alignment. Each colon controls the text-align of that column in the HTML output.
Why is my Markdown table not rendering?
Tables require a divider row of dashes directly below the header and a matching number of pipe-separated cells in every row. A missing divider row or unequal column counts prevents the table from rendering.
Does GitHub Flavoured Markdown support tables?
Yes. Pipe tables are a GitHub Flavoured Markdown extension. This converter enables GFM, so tables convert to HTML exactly as GitHub renders them.
Can I convert an HTML table back to Markdown?
This tool converts Markdown to HTML only. Reverse HTML-to-Markdown conversion is a separate operation and is outside this converter's scope.

Related Converters