5 Tips for Embedding Tables in Your Medium Posts

Michael Hunger
5 min readSep 2, 2017

--

Data Publishing in the “Modern” Age

I published now several posts on medium that were data heavy, mostly showing analysis or database query results. No matter if you’re a journalist, data scientist or someone who works with and relies on data, tables are a common format.

The more surprising and frustrating it is that Medium doesn’t support basic HTML tables, which shouldn’t be rocket science, especially as a lot of other html formatting is kept when pasting into your draft.

Medium also doesn’t support iframe embeds, so for instance embedding Google Spreadsheets doesn’t work.

As an example we take a short list of the largest last remaining Westerosi houses, their leader and seat, at the end of Season 7.

house,leader,seat
Stark,Jon Snow,Winterfell
Lannister,Cersei Lannister,Kings Landing
Targaryen,Daenerys Targaryen,Dragonstone
Greyjoy,Pyke,Euron Greyjoy

To help you get at least something going here are a few tips.

Bulleted List

Oftentimes for small tables, you can use a bullet list instead

  • Stark, Jon Snow,Winterfell
  • Lannister, Cersei Lannister, Kings Landing
  • Targaryen, Daenerys Targaryen, Dragonstone
  • Greyjoy, Pyke, Euron Greyjoy

Insert a screenshot

If your data table is nicely formatted but is not too large and your readers don’t need to copy the data (you can still make it available separately), I found that it’s often good enough to just paste a screenshot of your original table.

Turn your table into text

There are some nice online renderers for ascii-tables. The one I used, ascii-table by ozh even allows for different styles.

You can just take your CSV or TSV data and turn in into pretty ascii-art, reminiscent of the era of text-terminals. Then just paste that into a “code block” (pre), I haven’t found how to create that block in Medium, so I mostly copy one from one of my other pages, and then paste the new table.

+-----------+--------------------+---------------+
| house | leader | seat |
+-----------+--------------------+---------------+
| Stark | Jon Snow | Winterfell |
| Lannister | Cersei Lannister | Kings Landing |
| Targaryen | Daenerys Targaryen | Dragonstone |
| Greyjoy | Pyke | Euron Greyjoy |
+-----------+--------------------+---------------+
╔═══════════╦════════════════════╦═══════════════╗
║ house ║ leader ║ seat ║
╠═══════════╬════════════════════╬═══════════════╣
║ Stark ║ Jon Snow ║ Winterfell ║
║ Lannister ║ Cersei Lannister ║ Kings Landing ║
║ Targaryen ║ Daenerys Targaryen ║ Dragonstone ║
║ Greyjoy ║ Pyke ║ Euron Greyjoy ║
╚═══════════╩════════════════════╩═══════════════╝

Embed a GitHub Gist

You don’t even need to sign up with GitHub to create a GitHub gist. But signing up will allow you to manage your gists later, e.g. updating them.

Creating a Gist on GitHub

Just go to http://gist.github.com and name your gist and the file (best <name>.csv) and paste your comma separated data.

Then just take the gist link from your browser address bar and paste it into your medium post. It expands to the embedded table like below.

This also works with lots of other types of data, not just CSV-tables. Best is to stick with one file per gist, with multiple files, Medium can get confused.

Embed an Airtable “Base”

Several authors recommended to embed tables using http://airtable.com

Some of the old posts don’t exists anymore or show outdated airtable UI that’s no longer there.

I signed up to airtable with my Google account, but declined the access to contacts. Thankfully they then offer to signup without contact access.

Their UI is very confusing, what they call “Base” seems to be like a spreadsheet. And their templates make no sense at least for me (they should have a Medium template).

So I created a new “Base” called it Medium where I can add sheets/tabs for my different tables to embed.

In a new “Table” that I named “houses”, I first had to adjust the headers, which have some weird defaults.

When pasting, the data, it only supports tab-separated values. Airtable asks if it should expand the table to fit your data. After your’re done, it should look like this:

Then click the little share button and create a “shareable grid view link” and paste it into the Medium post.

The result should look like this. Of course this effort is only valued for larger, more complex tables than mine. But you get an interactive table, which is nice.

I hope these 5 tips helped you to embed tabular data into your Medium posts, if so, please clap :)

Personally I like the simple text tables most, and would go with GitHub if needed.

Also if you have other / more ideas, please share them in the comments, then I can update the article.

Happy Posting

PS: Those who paid attention, saw that I mixed up the data in the last line, but I won’t fix it now, so it stays as an easter-egg :)

--

--

Michael Hunger

A software developer passionate about teaching and learning. Currently working with Neo4j, GraphQL, Kotlin, ML/AI, Micronaut, Spring, Kafka, and more.