Create a slick table by using a grid in your Ghost blog
See Markdown sources below. Those tables are part of our main Style Element showcase. See and it looks here and see the source here.
Real world examples
The best way to do create a table is to use a grid system as it's responsive. Basic HTML table are not. In this case we use this framework. This is a classic pricing table with two columns with a ratio of: 10/12 | 2/12.
Our Pizzas
The Montréal Special
Fresh basil, mozzarella and olive oil Mozzarella di buffala (+$4), Anchovies (+ $1)
Fresh basil, mozzarella and olive oil Mozzarella di buffala (+$4), Anchovies (+ $1)
$21
Quattro Formaggi
Mozzarella, Aosta Valley fontina, parmesan and spicy provolone
Mozzarella, Aosta Valley fontina, parmesan and spicy provolone
18$
The Meat Lover
Fresh basil, Prosciutto crudo, mozzarella and arugula
Fresh basil, Prosciutto crudo, mozzarella and arugula
24$
Corporate services
Let's go deepter. See how we use (non breakable space) in order to create a whitespace in the lists below:
The Green plan includes:
🎨 Publish original content on 3 social networks
🎨 Once a day
🎨 5 days a week
🎨 Billed each month
🎨 Publish original content on 3 social networks
🎨 Once a day
🎨 5 days a week
🎨 Billed each month
$1475
The Blue plan includes:
🎨 Publish original content on 3 social networks
🎨 Once a day
🎨 5 days a week
🎨 Billed each month
🎨 Publish original content on 3 social networks
🎨 Once a day
🎨 5 days a week
🎨 Billed each month
$1995
The Gold plan includes:
🎨 Publish original content on 3 social networks
🎨 Once a day
🎨 5 days a week
🎨 Billed each month
🎨 Publish original content on 3 social networks
🎨 Once a day
🎨 5 days a week
🎨 Billed each month
$2795
Here is a classic 50/50 table with a ratio of: 6/12 on the left and 6/12 on the right.
This is a placeholder text to give context. You are about to read words that won't make sense. This text is used as a filler. Words that will follow won't make any sense, and this is fine. At the moment, the goal is to build a structure for our site.
This is a placeholder text to give context. You are about to read words that won't make sense. This text is used as a filler. Words that will follow won't make any sense, and this is fine. At the moment, the goal is to build a structure for our site.
All possibilities
Grid 1/1
A 1 by 1 grid is basically useless but it helps us to understand how to work with it.
1
Grid 1/2
1
2
1
Grid 1/3
one This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
two This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
three This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
Grid 1/4
1
2 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
Grid 1/5
1
2
3
4
5
Grid 1/6
1
2
3
4
5
6
Grid 1/7
1
2
3
4
5
6
7
Grid 1/8
1
2
3
4
5
6
7
8
Grid 1/9
1
2
3
4
5
6
7
8
9
Grid 1/10
1
2
3
4
5
6
7
8
9
10
Grid 1/11
1
2
3
4
5
6
7
8
9
10
11
Grid 1/12
1
2
3
4
5
6
7
8
9
10
11
12
11/12 and 1/12 layout
1/12
11/12
10/12 and 2/12 layout
2/12
10/12
9/12 and 3/12 layout
3/12
9/12
0o0o0o
4/12
8/12
0o0o0o
5/12 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
7/12 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
6/12 and 6/12 layout
6/12
6/12
7/12 and 5/12 layout
7/12 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
5/12 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
8/12 and 4/12 layout
8/12
4/12
9/12 and 3/12 layout
9/12
3/12
10/12 and 2/12 layout
10/12
2/12
11/12 and 1/12 layout
11/12
1/12
Source
## Real world examples
The **best way** to do create a table is to use a grid system as **it's responsive**. Basic HTML table are not. In this case we use [this framework](http://thisisdallas.github.io/Simple-Grid/). This is a classic **pricing table** with two columns with a ratio of: `10/12` | `2/12`.
<br><br>
### Our Pizzas
<br>
<div class="grid">
<div class="col-10-12 mobile-col-10-12">
<div class="content">
<strong>The Montréal Special</strong><br>
<em>Fresh basil, mozzarella and olive oil
Mozzarella di buffala (+$4), Anchovies (+ $1)</em>
</div>
</div>
<div class="col-2-12 mobile-col-2-12">
<div class="content push-right">
<strong>$21</strong>
</div>
</div>
</div>
<br>
<div class="grid">
<div class="col-10-12 mobile-col-10-12">
<div class="content">
<strong>Quattro Formaggi</strong><br>
<em>Mozzarella, Aosta Valley fontina, parmesan and spicy provolone</em>
</div>
</div>
<div class="col-2-12 mobile-col-2-12">
<div class="content push-right">
<strong>18$</strong>
</div>
</div>
</div>
<br>
<div class="grid">
<div class="col-10-12 mobile-col-10-12">
<div class="content">
<strong>The Meat Lover</strong><br>
<em>Fresh basil, Prosciutto crudo, mozzarella and arugula</em>
</div>
</div>
<div class="col-2-12 mobile-col-2-12">
<div class="content push-right">
<strong>24$</strong>
</div>
</div>
</div>
<br>
---
<br>
### Corporate services
Let's go deepter. See how we use ` ` (non breakable space) in order to create a *whitespace* in the lists below:
<br>
<div class="grid">
<div class="col-10-12 mobile-col-10-12">
<div class="content">
<strong>The Green plan includes:</strong><br>
🎨 Publish original content on 3 social networks<br> 🎨 Once a day<br> 🎨 5 days a week<br> 🎨 Billed each month
</div>
</div>
<div class="col-2-12 mobile-col-2-12">
<div class="content push-right">
<strong>$1475</strong>
</div>
</div>
</div>
<br>
<div class="grid">
<div class="col-10-12 mobile-col-10-12">
<div class="content">
<strong>The Blue plan includes:</strong><br>
🎨 Publish original content on 3 social networks<br> 🎨 Once a day<br> 🎨 5 days a week<br> 🎨 Billed each month
</div>
</div>
<div class="col-2-12 mobile-col-2-12">
<div class="content push-right">
<strong>$1995</strong>
</div>
</div>
</div>
<br>
<div class="grid">
<div class="col-10-12 mobile-col-10-12">
<div class="content">
<strong>The Gold plan includes:</strong><br>
🎨 Publish original content on 3 social networks<br> 🎨 Once a day<br> 🎨 5 days a week<br> 🎨 Billed each month
</div>
</div>
<div class="col-2-12 mobile-col-2-12">
<div class="content push-right">
<strong>$2795</strong>
</div>
</div>
</div>
<br>
---
<br>
Here is a classic **50/50 table** with a ratio of: `6/12` on the left and `6/12` on the right.
<div class="grid">
<div class="col-6-12 mobile-col-6-12">
<div class="content">
This is a placeholder text to give context. You are about to read words that won't make sense. This text is used as a filler. Words that will follow won't make any sense, and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
<div class="col-6-12 mobile-col-6-12">
<div class="content push-right">
This is a placeholder text to give context. You are about to read words that won't make sense. This text is used as a filler. Words that will follow won't make any sense, and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
</div>
<br>
---
<br>
## All possibilities
<h3>Grid 1/1</h3>
A 1 by 1 grid is basically useless but it helps us to understand how to work with it.
<!-- Grid 2/3 and 1/3 -->
<div class="grid">
<div class="col-1-1">
<div class="content"> 1
</div>
</div>
</div>
<br><br>
<h3>Grid 1/2</h3>
<!-- Grid 1/2 -->
<div class="grid">
<div class="col-1-2 mobile-col-1-2">
<div class="content"> 1
</div>
</div>
<div class="col-1-2 mobile-col-1-2">
<div class="content"> 2
</div>
</div>
<div class="col-1-2 mobile-col-1-1">
<div class="content"> 1
</div>
</div>
<div class="col-1-2 mobile-col-1-2 hide-on-mobile">
<div class="content"> 2
</div>
</div>
</div>
<br><br>
<h3>Grid 1/3</h3>
<!-- Grid 1/3 -->
<div class="grid">
<div class="col-1-3 mobile-col-1-3">
<div class="content"> one This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
<div class="col-1-3 mobile-col-1-3">
<div class="content"> two This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
<div class="col-1-3 mobile-col-1-3">
<div class="content"> three This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
</div>
<br><br>
<h3>Grid 1/4</h3>
<!-- Grid 1/4 -->
<div class="grid">
<div class="col-1-4">
<div class="content"> 1
</div>
</div>
<div class="col-1-4">
<div class="content"> 2 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
<div class="col-1-4 hide-on-mobile">
<div class="content"> 3
</div>
</div>
<div class="col-1-4 hide-on-mobile">
<div class="content"> 4
</div>
</div>
</div>
<br><br>
<h3>Grid 1/5</h3>
<!-- Grid 1/5 -->
<div class="grid">
<div class="col-1-5">
<div class="content"> 1
</div>
</div>
<div class="col-1-5">
<div class="content"> 2
</div>
</div>
<div class="col-1-5">
<div class="content"> 3
</div>
</div>
<div class="col-1-5">
<div class="content"> 4
</div>
</div>
<div class="col-1-5">
<div class="content"> 5
</div>
</div>
</div>
<br><br>
<h3>Grid 1/6</h3>
<!-- Grid 1/6 -->
<div class="grid">
<div class="col-1-6">
<div class="content"> 1
</div>
</div>
<div class="col-1-6">
<div class="content"> 2
</div>
</div>
<div class="col-1-6">
<div class="content"> 3
</div>
</div>
<div class="col-1-6">
<div class="content"> 4
</div>
</div>
<div class="col-1-6">
<div class="content"> 5
</div>
</div>
<div class="col-1-6">
<div class="content"> 6
</div>
</div>
</div>
<br><br>
<h3>Grid 1/7</h3>
<!-- Grid 1/7 -->
<div class="grid">
<div class="col-1-7">
<div class="content"> 1
</div>
</div>
<div class="col-1-7">
<div class="content"> 2
</div>
</div>
<div class="col-1-7">
<div class="content"> 3
</div>
</div>
<div class="col-1-7">
<div class="content"> 4
</div>
</div>
<div class="col-1-7">
<div class="content"> 5
</div>
</div>
<div class="col-1-7">
<div class="content"> 6
</div>
</div>
<div class="col-1-7">
<div class="content"> 7
</div>
</div>
</div>
<br><br>
<h3>Grid 1/8</h3>
<!-- Grid 1/8 -->
<div class="grid">
<div class="col-1-8">
<div class="content"> 1
</div>
</div>
<div class="col-1-8">
<div class="content"> 2
</div>
</div>
<div class="col-1-8">
<div class="content"> 3
</div>
</div>
<div class="col-1-8">
<div class="content"> 4
</div>
</div>
<div class="col-1-8">
<div class="content"> 5
</div>
</div>
<div class="col-1-8">
<div class="content"> 6
</div>
</div>
<div class="col-1-8">
<div class="content"> 7
</div>
</div>
<div class="col-1-8">
<div class="content"> 8
</div>
</div>
</div>
<br><br>
<h3>Grid 1/9</h3>
<!-- Grid 1/9 -->
<div class="grid">
<div class="col-1-9">
<div class="content"> 1
</div>
</div>
<div class="col-1-9">
<div class="content"> 2
</div>
</div>
<div class="col-1-9">
<div class="content"> 3
</div>
</div>
<div class="col-1-9">
<div class="content"> 4
</div>
</div>
<div class="col-1-9">
<div class="content"> 5
</div>
</div>
<div class="col-1-9">
<div class="content"> 6
</div>
</div>
<div class="col-1-9">
<div class="content"> 7
</div>
</div>
<div class="col-1-9">
<div class="content"> 8
</div>
</div>
<div class="col-1-9">
<div class="content"> 9
</div>
</div>
</div>
<br><br>
<h3>Grid 1/10</h3>
<!-- Grid 1/10 -->
<div class="grid">
<div class="col-1-10">
<div class="content"> 1
</div>
</div>
<div class="col-1-10">
<div class="content"> 2
</div>
</div>
<div class="col-1-10">
<div class="content"> 3
</div>
</div>
<div class="col-1-10">
<div class="content"> 4
</div>
</div>
<div class="col-1-10">
<div class="content"> 5
</div>
</div>
<div class="col-1-10">
<div class="content"> 6
</div>
</div>
<div class="col-1-10">
<div class="content"> 7
</div>
</div>
<div class="col-1-10">
<div class="content"> 8
</div>
</div>
<div class="col-1-10">
<div class="content"> 9
</div>
</div>
<div class="col-1-10">
<div class="content"> 10
</div>
</div>
</div>
<br><br>
<h3>Grid 1/11</h3>
<!-- Grid 1/11 -->
<div class="grid">
<div class="col-1-11">
<div class="content"> 1
</div>
</div>
<div class="col-1-11">
<div class="content"> 2
</div>
</div>
<div class="col-1-11">
<div class="content"> 3
</div>
</div>
<div class="col-1-11">
<div class="content"> 4
</div>
</div>
<div class="col-1-11">
<div class="content"> 5
</div>
</div>
<div class="col-1-11">
<div class="content"> 6
</div>
</div>
<div class="col-1-11">
<div class="content"> 7
</div>
</div>
<div class="col-1-11">
<div class="content"> 8
</div>
</div>
<div class="col-1-11">
<div class="content"> 9
</div>
</div>
<div class="col-1-11">
<div class="content"> 10
</div>
</div>
<div class="col-1-11">
<div class="content"> 11
</div>
</div>
</div>
<br><br>
<h3>Grid 1/12</h3>
<!-- Grid 1/12 -->
<div class="grid">
<div class="col-1-12">
<div class="content"> 1
</div>
</div>
<div class="col-1-12">
<div class="content"> 2
</div>
</div>
<div class="col-1-12">
<div class="content"> 3
</div>
</div>
<div class="col-1-12">
<div class="content"> 4
</div>
</div>
<div class="col-1-12">
<div class="content"> 5
</div>
</div>
<div class="col-1-12">
<div class="content"> 6
</div>
</div>
<div class="col-1-12">
<div class="content"> 7
</div>
</div>
<div class="col-1-12">
<div class="content"> 8
</div>
</div>
<div class="col-1-12">
<div class="content"> 9
</div>
</div>
<div class="col-1-12">
<div class="content"> 10
</div>
</div>
<div class="col-1-12">
<div class="content"> 11
</div>
</div>
<div class="col-1-12">
<div class="content"> 12
</div>
</div>
</div>
<br><br>
<h3>11/12 and 1/12 layout</h3>
<!-- 11/12 and 1/12 layout -->
<div class="grid">
<div class="col-1-12">
<div class="content"> 1/12
</div>
</div>
<div class="col-11-12">
<div class="content"> 11/12
</div>
</div>
</div>
<br><br>
<h3>10/12 and 2/12 layout</h3>
<!-- 10/12 and 2/12 layout -->
<div class="grid">
<div class="col-2-12">
<div class="content"> 2/12
</div>
</div>
<div class="col-10-12">
<div class="content"> 10/12
</div>
</div>
</div>
<br><br>
<h3>9/12 and 3/12 layout</h3>
<!-- 9/12 and 3/12 layout -->
<div class="grid">
<div class="col-3-12">
<div class="content"> 3/12
</div>
</div>
<div class="col-9-12">
<div class="content"> 9/12
</div>
</div>
</div>
<br><br>
<h3>0o0o0o</h3>
<!-- 8/12 and 4/12 layout -->
<div class="grid">
<div class="col-4-12">
<div class="content"> 4/12
</div>
</div>
<div class="col-8-12">
<div class="content"> 8/12
</div>
</div>
</div>
<br><br>
<h3>0o0o0o</h3>
<!-- 7/12 and 5/12 layout -->
<div class="grid">
<div class="col-5-12">
<div class="content"> 5/12 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
<div class="col-7-12">
<div class="content"> 7/12 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
</div>
<br><br>
<h3>6/12 and 6/12 layout</h3>
<!-- 6/12 and 6/12 layout -->
<div class="grid">
<div class="col-6-12">
<div class="content"> 6/12
</div>
</div>
<div class="col-6-12">
<div class="content"> 6/12
</div>
</div>
</div>
<br><br>
<h3>7/12 and 5/12 layout</h3>
<!-- 7/12 and 5/12 layout -->
<div class="grid">
<div class="col-7-12">
<div class="content"> 7/12 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
<div class="col-5-12">
<div class="content"> 5/12 This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.
</div>
</div>
</div>
<br><br>
<h3>8/12 and 4/12 layout</h3>
<!-- 8/12 and 4/12 layout -->
<div class="grid">
<div class="col-8-12">
<div class="content"> 8/12
</div>
</div>
<div class="col-4-12">
<div class="content"> 4/12
</div>
</div>
</div>
<br><br>
<h3>9/12 and 3/12 layout</h3>
<!-- 9/12 and 3/12 layout -->
<div class="grid">
<div class="col-9-12">
<div class="content"> 9/12
</div>
</div>
<div class="col-3-12">
<div class="content"> 3/12
</div>
</div>
</div>
<br><br>
<h3>10/12 and 2/12 layout</h3>
<!-- 10/12 and 2/12 layout -->
<div class="grid">
<div class="col-10-12">
<div class="content"> 10/12
</div>
</div>
<div class="col-2-12">
<div class="content"> 2/12
</div>
</div>
</div>
<br><br>
<h3>11/12 and 1/12 layout</h3>
<!-- 11/12 and 1/12 layout -->
<div class="grid">
<div class="col-11-12">
<div class="content"> 11/12
</div>
</div>
<div class="col-1-12">
<div class="content"> 1/12
</div>
</div>
</div>