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

<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 `&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>