Data Tables with Markdown

Building tables is a pain in all the online editors I have used. They are almost universally aimed at small, simple tables with a few cells. What if you want to publish a large table of data? Ideally, one might just pour in some comma- or tab-separated text and magic would happen.

Until then, by far the simplest solution is to use markdown notation for tables. The markdown source is easily generated from any data source with your chosen report writer. It is no different in principle from a comma separated file except that there are ‘|’ characters in place of the commas and we need to add one extra row as well as a delimiter at the start and end of the line. The result is already readable as a table and could be published or displayed as-is. The colons in the second row indicate that a column should be left justified, right justified or centred (use colon each end) :

| Mouse Name       | Contestant Name        | Score  |
|:-----------------|:-----------------------|-------:|
| Cheesestring     | Aleena Kalim           | 20.280 |
| Mozzarella       | Kaviyashree Damodaran  | 18.690 |
| Sivan            | Nathesa Sivakumaran    | 18.620 |
| Athena           | Amber Bravo-Faraday    | 20.640 |
| Chaos            | Catherine McPhillips   | 18.600 |
| Scrabble         | Thanishka Singanan     | 19.440 |
| Zoomin' Jerry    | Bethan Edwards         | 20.450 |

When rendered into HTML, the result would be a nicely formatted table. This one has been given stripes as an extra embellishments. Because this site has the Jetpack plugin activated, markdown translation is enabled automatically. Just start a new Markdown block and paste in the markdown source.

If you want a more compact table without borders and with zebra stripes, in the Advance option for the inspector, add the following additional classes:
wp-block-table is-style-stripes

A table with many columns may not fit on the page. First, try to re-design the output to take up less space. If you have to, a smaller font can be used if you add a further additional class to the Advanced section of the inspector: is-small

If your table is still too wide, it will overflow into the sidebar space. Try to avoid that. Pages created without sidebars can be wider but generally, the sidebar is a thing so ask yourself just how many columns really need to be in a table.