Markdown Table

This implementation was inspired by fenced code blocks, the csv format guidelines, and of course existing table extensions.

Proposal

A table fence is a sequence of at least 3 consecutive commas ,. A table begins with a table fence, preceded by no spaces.

The contents of a table follow the csv format guidelines with some significant differences.

• Trailing spaces are not considered part of a field and should be ignored.
• The first record is always the header line, the <thead>.

A comma , or pipe | character can be used to separate fields. To include a delimier (comma , or pipe |) as character in a field enclose the entire field in double-quotes ".

A delimiter must be used consistently per row (record).

Inline markdown is supported on individual fields. Block elements could potentially be supported inside of fields enclosed with double-quotes.

The closing table fence may be preceded by up to 3 spaces of indentation, and may be followed only by spaces or tabs, which are ignored.

A basic table

,,,
1    , 2   , 3
one  , two , three
uno  , dos , tres
ichi , ni  , san
,,,

HTML

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>one</td>
      <td>two</td>
      <td>three</td>
    </tr>
    <tr>
      <td>uno</td>
      <td>dos</td>
      <td>tres</td>
    </tr>
    <tr>
      <td>ichi</td>
      <td>ni</td>
      <td>san</td>
    </tr>
  </tbody>
</table>

Preview

1	2	3
one	two	three
uno	dos	tres
ichi	ni	san

Using pipes |

,,,
delimiter | name | support
comma     | ","  | Yes
pipe      | "|"  | Yes
,,,

HTML

<table>
  <thead>
    <th>
      <tr>
        <th>delimiter</th>
        <th>name</th>
        <th>pipe</th>
      </tr>
    </th>
  </thead>
  <tbody>
    <tr>
      <td>comma</td>
      <td>,</td>
      <td>Yes<td>
    </tr>
    <tr>
      <td>pipe</td>
      <td>|</td>
      <td>Yes</td>
    </tr>
  </tbody>
</table>

Preview

delimiter	name	pipe
comma	,	Yes
pipe	|	Yes

Whitespace

Trailing whitespace is ignore

,,,
      pokemon, type           , emoji
pikachu   , electric , 🐭 ⚡️
  charmander,fire,🦎 🔥
onyx  ,            rock             , 🐍 🪨
,,,

Is the same as

,,,
pokemon    , type     , emoji
pikachu    , electric , 🐭 ⚡️
charmander , fire     , 🦎 🔥
onyx       , rock     , 🐍 🪨
,,,

,,,
pokemon,type,emoji
pikachu,electric,🐭 ⚡️
charmander,fire,🦎 🔥
onyx,rock,🐍 🪨
,,,

HTML

<table>
  <thead>
    <tr>
      <th>pokemon</th>
      <th>type</th>
      <th>emoji</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>pikachu</td>
      <td>electric</td>
      <td>🐭 ⚡️</td>
    </tr>
    <tr>
      <td>charmander</td>
      <td>fire</td>
      <td>🦎 🔥</td>
    </tr>
    <tr>
      <td>onyx</td>
      <td>rock</td>
      <td>🐍 🪨</td>
    </tr>
  </tbody>
</table>

Preview

pokemon	type	emoji
pikachu	electric	🐭 ⚡️
charmander	fire	🦎 🔥
onyx	rock	🐍 🪨

Inline markdown

,,,
inline
__bold__
_italic_
`code`
[link](https://spec.commonmark.org)
,,,

HTML

<table>
  <thead>
    <tr>
      <th>inline</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>bold</strong></td>
    </tr>
    <tr>
      <td><em>italic</em></td>
    </tr>
    <tr>
      <td><code>code</code></td>
    </tr>
    <tr>
      <td><a href="https://spec.commonmark.org/">link</a></td>
    </tr>
  </tbody>
</table>

Preview

inline
bold
italic
code
link

Blocks

Leveraging double-quotes tables could potentially support blocks on individual fields. I am not sure if this is good idea though.

name      , blocks
list      , "- a
- b
- c"
codeblock , "```
some code
```"
headings  , "# Header
## Another Header"

HTML

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>blocks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>list</strong></td>
      <td>
        <ul>
          <li>a</li>
          <li>b</li>
          <li>c</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><strong>fence code block</strong></td>
      <td>
        <pre><code>some code
        </code></pre>
      </td>
    </tr>
    <tr>
      <td><strong>headers</strong></td>
      <td>
        <h1>Header</h1>
        <h2>Another Header</h2>
      </td>
    </tr>
  </tbody>
</table>

Preview

name	blocks
list	a b c
fence code block	some code
headers	Header Another Header

It doesn't look great but i really like the functionality. Perhaps some sort of newline character could help the presentation.

Linebreaks

,,,
name       , block
list       , "- apple\n- bear\n- cat"
code block , "```shell\n# some code\n```"
headings   , "# Header\n## Another Header"
,,,

Alignment

For alignment I think it could support existing implementations.

,,,
Left            , Right                 , Center
:--             | --:                   | :-:
Stomp to the << , Stomp to the right >> , `2` hops this time, Left is default
,,,

The colon : character could be used on the header fields to define alignment. Here's what I'm thinking.

The colon would be treated as a regular character past the first row.

,,,
:Left , Right: , :Center: , Default               , "Colon:"
<<--  , -->>   , "--|--"  , The default alignment , Colons `:` are ignored inside double-quotes
,,,

HTML

<table>
  <thead>
    <tr>
      <th align="left">Left</th>
      <th align="right">Right</th>
      <th align="center">Center</th>
      <th>Default</th>
      <th>Colon:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="left">&lt;&lt;--</td>
      <td align="right">--&gt;&gt;</td>
      <td align="center">--|--</td>
      <td>The default alignment</td>
      <td>Colons <code>:</code> are ignored inside double-quotes</td>
    </tr>
  </tbody>
</table>

Preview

Left	Right	Center	Default	Colon:
<<--	-->>	--|--	The default alignment	Colons : are ignored inside double-quotes