code block inside table row in Markdown

This one maybe better:

| Status | Response  |
| ------ | --------- |
| 200    |<pre lang="json">{<br>  "id": 10,<br>  "username": "alanpartridge",<br>  "email": "[email protected]",<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": "[email protected]",
"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": "[email protected]",<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": "[email protected]",
"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"
}

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": "[email protected]",
    "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)
);
}

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": "[email protected]",
    "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.)


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.