(see source below)

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)
$21

Quattro Formaggi
Mozzarella, Aosta Valley fontina, parmesan and spicy provolone
18$

The Meat Lover
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
$1475

The Blue plan includes:
  πŸŽ¨ 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
$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
2



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.
3
4



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

<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 `&nbsp;` (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>
            &nbsp;&nbsp;🎨 Publish original content on 3 social networks<br> &nbsp;&nbsp;🎨 Once a day<br> &nbsp;&nbsp;🎨 5 days a week<br> &nbsp;&nbsp;🎨 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>
            &nbsp;&nbsp;🎨 Publish original content on 3 social networks<br> &nbsp;&nbsp;🎨 Once a day<br> &nbsp;&nbsp;🎨 5 days a week<br> &nbsp;&nbsp;🎨 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>
            &nbsp;&nbsp;🎨 Publish original content on 3 social networks<br> &nbsp;&nbsp;🎨 Once a day<br> &nbsp;&nbsp;🎨 5 days a week<br> &nbsp;&nbsp;🎨 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>


   Jump in the conversation πŸ˜‰.
To comment below, login with your GitHub account.