Creating a Table in Medium (A Hacky Way)

Medium editor sucks?

… Maybe…

One thing for sure is that it’s not designed for everyone (I mean not everyone will like it). It’s clean and simple. It’s very easy to use until you want to do something that it does not support such as inserting table. That’s bad… because I cannot show my data to readers in a comma separated format. Hmmm… Actually, I can but it’s just plain terrible and readers will hate me.

But, you know what? I never give up.

Oops! FAIL

Do you mind if I have one more giphy?
Okay.. you might want to kick my ass already that I didn’t show you how to create a table instead of a bunch of stupid GIFs.

I get it.

Click the following link, it will take you to the awesome online tool that lets you format your text as a table.

Senseful Solutions

If you don’t like above tool, you may like this one.

Ascii Table Generator - Quickly format ascii table. Great for source code comments and markdown!

One more step to go after you have already created a nice table in a text format. You may want to paste your good looking text-based table to Medium editor. Unfortunately, it still looks ugly.

╔══════╦══════╦════════╗
║ Col1 ║ Col2 ║ NumCol ║
╠══════╬══════╬════════╣
║ MMM ║ MMM ║ MMM ║
║ 111 ║ 111 ║ 111 ║
║ AAA ║ AAA ║ AAA ║
╚══════╩══════╩════════╝

That’s because the font is not monospaced and the editor trims consecutive spaces to one space. Then, you may want to try putting your text-based table in a code block (Windows: Ctrl+Alt+6).

Code block

The code block uses monospaced font. So, it should be fine right? No! When you try pasting your table again, you will find out that it doesn’t go inside the code block.

What… The… Funny Editor!

At this point, you may hate Medium editor already. Let me tell you that Medium editor is not bad. It can embed a code snippet from Github.
Hooo rayyy!

Follow the following steps to create a snippet on Github

1. Go to https://gist.github.com/ then paste your text-based table to the editor.
2. Name you file to anything you like and make sure that it ends with .txt
3. Click Create public gist button.
4. Copy the URL and paste it to Medium editor.

Gist screenshot

When you paste the URL that looks similar to this one: https://gist.github.com/hussachai/535d9a304b4cc8b69b6d to the editor and press enter, you will get the perfect looking table as the following:

What do you think? Do you like this hack? If you have a better way to do this, please share it by commenting below.

Thanks a lot!