How to create tables in Ghost?
It seems hard to put a table inside a Ghost post at first sight, but it's not. Check out our article!
Ghost editor is very intuitive to add different types of content to a post or a page. But as of v5.105, Ghost doesn't provide a card for putting a table to your posts. In this article we'll explain how to put simple tables to your posts.
Using HTML
As always, HTML Card is the Swiss-knife of every type of content. A simple table in HTML can be written like this:
<table>
<thead>
<tr>
<th>First Column Title</th>
<th>Second Column Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. Row 1. cell</td>
<td>1. Row 2. cell</td>
</tr>
<tr>
<td>2. Row 1. cell</td>
<td>2. Row 2. cell</td>
</tr>
</tbody>
</table>
In a new line on Ghost editor, if you press big plus button or write /html
and press enter, you will able to start writing a content with HTML code. You can paste the code above to test it. When you click outside of HTML code, you'll able to see a rendered version of your table. To return back to editing it, you just need to double click on table.
Using Markdown
As you can see, a basic table definition in HTML is simple, a little crowded though. Even simpler approach would be using Markdown.
Markdown is another markup language with a simpler and lighter syntax. Same table above with markdown would be defined like below:
| First Column Title | Second Column Title |
| ------------------ | ------------------- |
| 1. Row 1. cell | 1. Row 2. cell |
| 2. Row 2. cell | 2. Row 2. cell |
Similar to HTML, using Markdown content in Ghost editor is straightforward. This time you will just use Markdown card (/markdown
) instead of HTML card.
It's like drawing a table with text, right? A simple definition would be, putting a text inside |
characters with empty space around makes it a table cell. If you put --
under a cell, it explains that the row above is a header row, which basically makes that row bold and shows content like titles.
Empty spaces more than one don't affect the result. If you prefer, you can also write a table like below:
| Title 1 | Title 2 |
| --- | --- |
| cell 1.1 | cell 1.2 |
| cell 2.1 | cell 2.2 |
You can set text alignment of a column by using colons around ---
lines. Your options are:
:---
: Align left:--—:
: Align center—--:
: Align right
Using in a table:
| Left | Center | Right |
| :------ | :----------: | ------------: |
| < | <> | > |
Thaw would result:
Left | Center | Right |
---|---|---|
< | <> | > |
Additionally, you can still use other Markdown definitions like making text bold, italic or link will work as is. Here is an example:
| English Name | Original Name | Link |
| --- | --- | --- |
| **Field bindweed** | *Convolvulus arvensis* | [Wikipedia](https://en.wikipedia.org/wiki/Convolvulus_arvensis) |
will result:
English Name | Original Name | Link |
---|---|---|
Field bindweed | Convolvulus arvensis | Wikipedia |
You can also put an image inside a cell:
| English Name | Original Name | Image |
| --- | --- | --- |
| **Field bindweed** | *Convolvulus arvensis* | ![Convolvulus arvensis](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Bindweed_%28Convolvulus_Arvensis%29_%283105112704%29.jpg/440px-Bindweed_%28Convolvulus_Arvensis%29_%283105112704%29.jpg) <br> By [Phil Sellens](https://www.flickr.com/people/33303746@N07) from East Sussex - Sea Bindweed (Calystegia soldanella), [CC BY 2.0](https://commons.wikimedia.org/w/index.php?curid=44450577) |
Long URLs make it hard to read, but basic image markdown syntax applies here: ![alternative text](imageurl)
English Name | Original Name | Image |
---|---|---|
Field bindweed | Convolvulus arvensis | By Phil Sellens from East Sussex - Sea Bindweed (Calystegia soldanella), CC BY 2.0 |
Importing Spreadsheets
One common need to put tables inside post would be putting a large table from an Excel file to Ghost post.
There can be many ways of putting a table in an Excel sheet to a Ghost post, but here we'll focus on putting the data from an Excel (or similar) file as an HTML or Markdown content.
Easiest way to achieve this would be to use some free online tools to convert your spreadsheet to Markdown (or HTML). Here are some of them:
"Table to Mardown" is a simple and free online tool to convert spreadsheets to Markdown. It doesn't require registration. Just copy your Excel spreadsheet and paste inside the textbox in the website, then press Submit. It will automatically convert that content to a Markdown table. Then you already know what to do to put that Markdown to your Ghost content.
"Table Convert Online" is a more advanced yet still free online tool. It doesn't require registration, and it provides many options to fine tune output. You are also able to preview the result table, even you can edit it on the fly.
For sure, there are tons of other free online tools out there. There are the one we tried and liked but if you know better ones, please share with us in the comments below.
We hope that this document will help about how to put a table inside a Ghost post. Please subscribe for more Ghost tips!