In this post you will learn how to add simple HTML tables to your Ghost blog, but also anywhere else.

On our blog you will sometimes come across tables that are created in HTML. This helps to display data in rows and colums and make it visually appealing. Also, using Ghost makes the HTML tables scale for mobile devices.

Table with three colums

This is what a simple table with three colums and four rows looks like. The upper row is the headline of the colums.

Type Resting-efficency Base-comfort
Bedroll 93% 0,6
Bed 100% 0,75
Royal bed 105% 0,9

The corresponding code looks like this:

<table>
  <tr>
    <th>Type</th>
    <th>Resting-efficency</th>
    <th>Base-comfort</th>
  </tr>
  
  <tr>
    <td>Bedroll</td>
    <td>93%</td>
    <td>0,6</td>
  </tr>
   
  <tr>
    <td>Bed</td>
    <td>100%</td>
    <td>0,75</td>
  </tr>
   
  <tr>
    <td>Royal Bed</td>
    <td>105%</td>
    <td>0,9</td>
  </tr>
</table>

As you can see from this example, the table is built line by line. To delete a column, the corresponding entry of every row has to be deleted.

Colorizing a HTML Table
In this post you will be shown how you can edit the font color and the background color of the cells as you wish.
number13julian

Table with two colums

This is what a table with two colums looks like:

Type Resting-efficency
Bedroll 93%
Bed 100%
Royal bed 105%

The corresponding code:

<table>
  <tr>
    <th>Type</th>
    <th>Resting-efficency</th>
  </tr>
  
  <tr>
    <td>Bedroll</td>
    <td>93%</td>
  </tr>
   
  <tr>
    <td>Bed</td>
    <td>100%</td>
  </tr>
   
  <tr>
    <td>Royal bed</td>
    <td>105%</td>
  </tr>
</table>
Adding Clickable Links to a HTML Table
In our games tab, we have a table that lists the individual games. In the upper cell is the title of the game and below a matching image. If you click on the title of the game, you will be redirected to the “tag” of the game. How you can also add clickable links in a HTML table is explained here.
number13julian

Table without headline

Everything in between the brackets <th></th> gets fat. To create a table without a headline, you have to use the normal brackets <td></td>. These display the entry without formatting.

This is what a 2x2 table without headline looks like:

Type Resting-efficency
Bedroll 93%

The corresponding code:

<table>
  <tr>
    <td>Type</td>
    <td>Resting-efficency</td>
  </tr>
  
  <tr>
    <td>Bedroll</td>
    <td>93%</td>
  </tr>
</table>
Adding Pictures to a HTML Table
It is super easy in the Ghost editor to add pictures to a HTML table. First of all, the image has to be somewhere on the internet with a link. Then all you have to do is copy this link into the <img> brackets. What this looks like, you will find out in this post.
number13julian
HTMLTable