Can I merge table rows in markdown

Question

Is there a way to create merged rows in a column of table in markdown files like ReadMe.md files?

Something like this:

Solution 1

No, this is not possible with GitHub-Flavored Markdown. As the spec explains (emphasis added):

The remainder of the table’s rows may vary in the number of cells. If there are a number of cells fewer than the number of cells in the header row, empty cells are inserted. If there are greater, the excess is ignored:

Of course, you can always fall back to raw HTML. In fact, GitHub includes the rowspan (and colspan) attribute on their whitelist.

<table>
    <thead>
        <tr>
            <th>Layer 1</th>
            <th>Layer 2</th>
            <th>Layer 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan=4>L1 Name</td>
            <td rowspan=2>L2 Name A</td>
            <td>L3 Name A</td>
        </tr>
        <tr>
            <td>L3 Name B</td>
        </tr>
        <tr>
            <td rowspan=2>L2 Name B</td>
            <td>L3 Name C</td>
        </tr>
        <tr>
            <td>L3 Name D</td>
        </tr>
    </tbody>
</table>

Try it yourself at https://jsfiddle.net/7h89y55r/

Solution 2

The standard commonmark does not support tables and does not refer to or recommend any specific table extensions (latest revision permalink as of 2018-03). Your question doesn't specifically ask about Github-flavored Markdown (GFM), but GFM is based on commonmark with a table extension which doesn't support this.

MultiMarkdown from at least v5 supports these types of tables (docs permalink) in the same way that Michael Fortin for PHP Markdown Extra does, turning:

|             |          Grouping           ||
First Header  | Second Header | Third Header |
 ------------ | :-----------: | -----------: |
Content       |          *Long Cell*        ||
Content       |   **Cell**    |         Cell |

New section   |     More      |         Data |
And more      | With an escaped '\|'         ||  
[Prototype table]

into

I'm commonly using markdown-it (VSCode built-in markdown & my Ghost blog use it) which only supports Github-flavored tables, but someone created an extension (markdown-it-multimd-table) for these tables with it. Ultimately, you've got options.

Solution 3

If you're using Jekyll, to support the table cell alignment, merging and so on, I think the below I wrote can help you do it easier.

jekyll-spaceship - 🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, video, youtube, emoji, vimeo, dailymotion, etc.

https://github.com/jeffreytse/jekyll-spaceship

For now, these extended features are provided:

• Cells spanning multiple columns
• Cells spanning multiple rows
• Cells text align separately
• Table header not required
• Grouped table header rows or data rows

Markdown:

Code above would be parsed as:

Solution 4

I was answering OP's question in the comments about an alternative solution, but the comment got squashed to one line. Adding it as an answer here to show formatting properly.

You can use AsciiDoc instead of Markdown. GitHub supports it now. Just use README.adoc instead of README.md Your table in AsciiDoc syntax:

[cols="^.^,^.^,^.^"]
|===
|Layer1 |Layer2 |Layer3

.4+|L1 Name .2+|L2 Name A |L3 Name A
|L3 Name B
.2+|L2 Name B |L3 Name C
|L3 Name D
|===

Solution 5

vscode plugin Markdown Extended supports extended table formats described by other answers by integrating markdown-it-multimd-table

View more solutions

Comments

[dev-masih]

this is perfect and result is exactly what i wants

[chharvey]

Using raw HTML is a trade-off. It’s more flexible, but you can no longer use markdown within the HTML tags. <table><tr><td>This is not emphasized text: *the asterisks* will be rendered literally.</td></tr></table>

[np8]

Perfect! Here's also a HTML table generator to make a table easily: tablesgenerator.com/html_tables

[Mariusz Jamro]

Unfortunately it gets extremely unreadable :(

[jeffreytse]

This is an extended method and try to keep it readable. Of course, you can also use html to write the table, it depends on your preferences and the choice of the pros and cons of this extension.

[superarts.org]

Thanks for sharing, Markdown still looks more human friendly though.

[somebody]

might want to add a disclaimer that you're the author. but also not only is it unreadable and difficult to learn (imo), i do believe the mathjax and the image are in the wrong order.