ketanketanketan / mesa

A proposal for basic markdown tables. Mesa is table in Spanish.

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