Can I merge table rows in markdown

GithubMarkdownGithub Flavored-Markdown

Github Problem Overview


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

Something like this:

table

Github Solutions


Solution 1 - Github

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 - Github

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 Table

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 - Github

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:

table code

Code above would be parsed as:

html table

Solution 4 - Github

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

Solution 5 - Github

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 6 - Github

It is not possible in standard Markdown, however, there are some solutions which is supporting this feature. One of the previously mentioned Multimarkdown, but I would like to recommend another online Markdown editor which is supporting it: μr² editor

It is supporting row and column merge and also generate a nice PDF from the output. Example:

|               |          Grouping             ||         Grouping 2         ||  Not Grouped    |
| First Header  | Second Header | Third Header   | Forth Header | Fifth Header | Sixth Header    |
| ------------- | :-----------: | -------------: | :----------: | :----------: | --------------- |
| Tall Cell     |          *Long Cell*          ||         *Long Long Cell*                    |||
| ^^            |   **Bold**    | 1. first item  | *Italic*     | 3. third item | + first point  |\
| ^^            |               | 1. second item |              | 1. forth item | + second point |

| New section   |     More      |         Data   | ... - -- --- |||
| And more      | With an escaped \|          || "Try 'quotes' in quotes "         |||
[Compicated table]

Will be rendered like:

enter image description here

Solution 7 - Github

I was using Postman to document an API and found that you can mix line readme .md notation with HTML by inserting HTML inside your | | separators to make even more robust designs. I assume it is the same for other platforms that use markup such as GitHub, try it and see if it works for you.

The following example nests a table inside a table cell:

       | Field  | Description |  Optional | Default |
       | ------ | ----------- | --------- | ------- |
       | manual_entry_indicator | no: is not is allow manual entry <br /> yes: is manual entry enabled| yes | no |
       | amounts | json object containing all transaction amounts <br /> <br /> <table> <tr> <td> Subfield </td> <td> Description </td> <td> Optional </td> <td> Default </td> </tr> <tr> <td> tip </td>  <td> transaction tip amount </td> <td> yes </td> <td> NA </td> </tr> <tr> <td> total </td> <td> equal to Base  Amount + Base amount for  Reduced State Tax + City Tax + State Tax + Reduced State Tax + Tip or Cash back </td> <td> no </td> <td> NA </td> </tr> <tr> <td> cashback </td> <td> cash back amount </td> <td> yes </td> <td> NA </td> </tr> <tr> <td> state_tax </td> <td> State tax amount </td> <td> yes </td> <td> NA </td> </tr> <tr> <td> city_tax </td> <td> City tax amount </td> <td> yes </td> <td> NA </td> </tr> <tr> <td> reduced_tax </td> <td> Reduced state tax amount </td> <td> yes </td> <td> NA </td> </tr> <tr> <td> base_reduced_tax </td> <td> Reduced state tax base amount </td> <td> yes </td> <td> NA </td> </tr> </table> | no | NA |

will be rendered like this

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questiondev-masihView Question on Stackoverflow
Solution 1 - GithubWaylanView Answer on Stackoverflow
Solution 2 - GithubBen CreasyView Answer on Stackoverflow
Solution 3 - GithubjeffreytseView Answer on Stackoverflow
Solution 4 - GithubPickBoyView Answer on Stackoverflow
Solution 5 - GithubPeterView Answer on Stackoverflow
Solution 6 - GithubarkheinView Answer on Stackoverflow
Solution 7 - GithubShay RiberaView Answer on Stackoverflow