Master GitHub markdown tables with code blocks

1. Use HTML tags to define the table to get the best layout result
2. Use either backticks (```) or the HTML pre element with attribute lang
3. Keep a blank line before and after a code block for correct formatting and syntax highlighting

Good

Example: nice looking table to show HTTP Responses

Status	Response
200	{ "id": 10, "username": "marcoeidinger", "created_at": "2021-02-097T20:45:26.433Z", "updated_at": "2015-02-10T19:27:16.540Z" }
400	Error, what the hell is going on?!?
500	Internal Server Error

Example: nice looking table to compare code changes

Before	After
struct Hello { public var test: String = "World" // original }	struct Hello { public var test: String = "Universe" // changed }

Bad

Markdown defined table

Some markdown editors show correct layout and syntax highlighting if you use <br> tags in your code block. But this is very cumbersome and akward. And finally GitHub itself will show the code block on a single line :(

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	Error, what the hell is going on?!?

Using HTML code element to wrap code

You won't get syntax highlighting :(

Status	Response
200	{ "id": 10, "username": "marcoeidinger", "email": "[email protected]", "created_at": "2021-02-097T20:45:26.433Z", "updated_at": "2015-02-10T19:27:16.540Z" }
400	Error, what the hell is going on?!?

No blank line before/after a code block

You just lost line breaks AND syntax highlighting :((

Status	Response
200	```json { "id": 10, "username": "marcoeidinger", "email": "[email protected]", "created_at": "2021-02-097T20:45:26.433Z", "updated_at": "2015-02-10T19:27:16.540Z" } ```
400	Error, what the hell is going on?!?