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. In this post you will learn how to add simple HTML tables to your Ghost blog, but also anywhere else.

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.

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>

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>