84

I am putting together some documentation in Github flavoured Markdown and I want to put together a table that has two rows. One with simply text and one with a json code block. Heres an example.

| Status | Response  |
|---|---|
| 200 |  |
| 400 |   |

I want to get this code inside the response row but when ever I try it completely breaks.

json
  {
    "id": 10,
    "username": "alanpartridge",
    "email": "alan@alan.com",
    "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
    "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
    "created_at": "2015-02-14T20:45:26.433Z",
    "updated_at": "2015-02-14T20:45:26.540Z"
}

I am new to Markdown and if anyone could point me in the right direction it would be very much appreciated.

5 Answers 5

47

As others have pointed out, you'll have to use HTML <table> tags to create the table. It is possible however to format the contents of the table cells using Markdown only

Markdown syntax within HTML blocks works if you leave extra blank lines around the HTML tags: one after the <td> and one before the </td> otherwise the Markdown inside won't be parsed! This creates a new <p> paragraph where Markdown parsing is re-enabled inside the table cells.

<table>
<tr>
<td> Status </td> <td> Response </td>
</tr>
<tr>
<td> 200 </td>
<td>

^ Extra blank line above!
```json
json
{
    "id": 10,
    "username": "alanpartridge",
    "email": "alan@alan.com",
    "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
    "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
    "created_at": "2015-02-14T20:45:26.433Z",
    "updated_at": "2015-02-14T20:45:26.540Z"
}
```
V Extra blank line below!

</td>
</tr>
<tr>
<td> 400 </td>
<td>

**Markdown** _here_. (Blank lines needed before and after!)

</td>
</tr>
</table>

Preview image of the table created with the code above on GitHub

(If you want to fix the bad vertical alignment between "400" and "Markdown here", add blank lines around the "400" too, which will wrap that in a <p> as well.)

1
  • Thank you! Not just extra blank lines mess the whole table up, <tab>'s does as well. Github flavoured markdown can be really "funny" some times 😡 Apr 13, 2022 at 7:36
39

Github Flavored Markdown Supports HTML Tag

github markdown table-code

<table>
<tr>
<th>
Status
</th>
<th>
Response
</th>
</tr>

<tr>

<td>
<pre>
<br/><br/><br/>200<br/><br/><br/><br/><br/>400<br/>
</pre>
</td>

<td>
<pre>
json
  {
    "id": 10,
    "username": "alanpartridge",
    "email": "alan@alan.com",
    "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
    "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
    "created_at": "2015-02-14T20:45:26.433Z",
    "updated_at": "2015-02-14T20:45:26.540Z"
}
</pre>
</td>

</tr>
</table>

Markdown Editor can really be helpful to visualize output as you write.

Instead of <pre> tag we may also use triple-backticks ``` for showing a code block.


EDIT: You may also try text-based table like this-

+---------------+--------+---------+
|       \       | Rating | Comment |
+---------------+--------+---------+
| One Piece     |  A | B |       ♢ |
+---------------+----+---+---------+
| Naruto        |  A | C |       ♧ |
+---------------+----+---+---------+
| One Punch Man |  A | A |       ♥ |
+---------------+----+---+---------+
| Death Note    |  A | B |       ♠ |
+---------------+----+---+---------+

Text Tables Generator is a wonderful site for this purpose.


EDIT 2: The following code works both for GitHub and StackOverflow-

| Name | Signature Code                 |
|------|--------------------------------|
| Minhas Kamal | <pre>main(m,k){<br>  for(<br>    ;<br>    m%k--?:(k=m++);<br>    k^1?:printf("%i\|",m)<br>  );<br>}</pre> |

Output-

Name Signature Code
Minhas Kamal
main(m,k){
for(
;
m%k--?:(k=m++);
k^1?:printf("%i|",m)
);
}
4
  • 13
    But why backticks ``` won't work in text based tables? Jun 20, 2019 at 9:21
  • 1
    @IvanAracki For making the table look exact we need to have a mono-spaced font. And for that, we are putting the whole table in a code block. And we cannot write a code block inside of a code block. Backtics (```) can be used in HTML tag though. Aug 6, 2020 at 6:21
  • Reading your answer, it sounds like it's not possible in markdown to have a markdown table where some of the table cells are code blocks. Can the html be used to display such a table in stackoverflow/exchange though? I had a similar question: meta.stackexchange.com/questions/372523/….
    – joseville
    Dec 4, 2021 at 15:44
  • Seems, we cannot depend on pure Markdown in this case. Markdown is actually a simplified incomplete iteration of Markup language. Dec 5, 2021 at 3:51
23

The github markdown doc states that you can include inline/span markdown tags within table cells. This is the same for most flavours of markdown other than a few which have been trying to establish more control over table layouts.

You could get close with inline code elements, but that will not format with syntax colouring, or line indents.

| Status | Response  |
| ------ | --------- |
| 200    | `json`                          |
|        | `   {`                          |
|        | ` "id": 10,`                    |
|        | ` "username": "alanpartridge",` |
|        | ` more code...`                 |
|        | `}`                             |
| 400    |                                 |

Alternatively, create your table the old-fashioned way with html, which gives you rowspan for greater layout control.

4
  • 6
    You don't need rowspan if you use old fashioned html. The browser will do the right thing. Just embed code into <pre> tags. (you don't get the MD language-specific code syntax highlighting)
    – Cheeso
    Aug 29, 2016 at 23:41
  • 11
    This doesn't render very well actually.
    – einpoklum
    Oct 16, 2019 at 10:34
  • 1
    This code renders several lines of code, but each one in a different background Dec 23, 2019 at 16:33
  • Please take a look at my answer below that solves the mentioned rendering issues and allow a full, markdown code block in a single table cell: stackoverflow.com/a/60502719/3063
    – palotasb
    May 11, 2020 at 15:17
19

This one maybe better:

| Status | Response  |
| ------ | --------- |
| 200    |<pre lang="json">{<br>  "id": 10,<br>  "username": "alanpartridge",<br>  "email": "alan@alan.com",<br>  "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",<br>  "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",<br>  "created_at": "2015-02-14T20:45:26.433Z",<br>  "updated_at": "2015-02-14T20:45:26.540Z"<br>}</pre>|
| 400    |<code>{<br>  "code": 400,<br>  "msg": balabala"<br>}</code>|

Both of them need the <br>, it depends on you like the <pre> or <code>.


In stackoverflow, the above displays as:

Status Response
200 {
"id": 10,
"username": "alanpartridge",
"email": "alan@alan.com",
"password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
"password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
"created_at": "2015-02-14T20:45:26.433Z",
"updated_at": "2015-02-14T20:45:26.540Z"
}
400 {
"code": 400,
"msg": balabala"
}

Which doesn't display the <pre lang="json"> block as code.


However, in stackoverflow, removing the lang="json" from <pre> does display the entire <pre> block as a code block. That is:

| Status | Response  |
| ------ | --------- |
| 200    |<pre>{<br>  "id": 10,<br>  "username": "alanpartridge",<br>  "email": "alan@alan.com",<br>  "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",<br>  "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",<br>  "created_at": "2015-02-14T20:45:26.433Z",<br>  "updated_at": "2015-02-14T20:45:26.540Z"<br>}</pre>|
| 400    |<code>{<br>  "code": 400,<br>  "msg": balabala"<br>}</code>|

displays as:

Status Response
200
{
"id": 10,
"username": "alanpartridge",
"email": "alan@alan.com",
"password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
"password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
"created_at": "2015-02-14T20:45:26.433Z",
"updated_at": "2015-02-14T20:45:26.540Z"
}
400 {
"code": 400,
"msg": balabala"
}
5
  • 2
    The lang="json" attribute on the <pre> tag is very useful to know. Mar 30, 2020 at 2:37
  • 3
    The <br> tag doesn't work inside the pre and code tags! Feb 9, 2021 at 10:45
  • The lang="json" part solved my problem of wanting to syntax highlight the code snippet inside the table cells!
    – Frank Wang
    Jul 17, 2021 at 1:14
  • Thanks for this answer. It was what I need to answer this other question: meta.stackexchange.com/a/372524/1084071
    – joseville
    Dec 4, 2021 at 16:10
  • 1
    It seems that adding the lang= attribute to <pre> tags causes nested <br> tags to no longer work in GitHub Flavored Markdown. However, you can work around it and get a multi-line code block with working syntax highlighting by replacing the <br> tags with the HTML escape character for newlines (&#13;). Jan 12, 2022 at 3:28
0
Status | Response
:----- | :-------
200    | <code>json {"id": 10,"username": "alanpartridge", "email": "alan@alan.com",<br>"password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS", "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",<br> "created_at": "2015-02-14T20:45:26.433Z", "updated_at": "2015-02-14T20:45:26.540Z" }</code>
400    | <code>json {"id": 10,"username": "alanpartridge", "email": "alan@alan.com",<br>"password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS", "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",<br> "created_at": "2015-02-14T20:45:26.433Z", "updated_at": "2015-02-14T20:45:26.540Z" }</code>
1
  • 2
    This doesn't get the multi-line formatting of the code block. All the json is presented on the same line (with wrapping, perhaps).
    – Gabe
    Oct 21, 2020 at 14:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.