tu pourrais utiliser un code HTML et le placer dans un code block
<style>
/* info (hed, dek, source, credit) */
.rg-container {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
margin: 0;
padding: 1em 0.5em;
color: #222;
}
.rg-header {
margin-bottom: 1em;
text-align: left;
}
.rg-header > * {
display: block;
}
.rg-hed {
font-weight: bold;
font-size: 1.4em;
}
.rg-dek {
font-size: 1em;
}
.rg-source {
margin: 0;
font-size: 0.75em;
text-align: right;
}
.rg-source .pre-colon {
text-transform: uppercase;
}
.rg-source .post-colon {
font-weight: bold;
}
/* table */
table.rg-table {
width: 100%;
margin-bottom: 0.5em;
font-size: 1em;
border-collapse: collapse;
border-spacing: 0;
}
table.rg-table tr {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-align: left;
color: #333;
}
table.rg-table thead {
border-bottom: 3px solid #ddd;
}
table.rg-table tr {
border-bottom: 1px solid #ddd;
color: #222;
}
table.rg-table tr.highlight {
background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
background-color: #f6f6f6;
}
table.rg-table th {
font-weight: bold;
padding: 0.35em;
font-size: 0.9em;
}
table.rg-table td {
padding: 0.35em;
font-size: 0.9em;
}
table.rg-table .highlight td {
font-weight: bold;
}
table.rg-table th.number,
td.number {
text-align: right;
}
/* media queries */
@media screen and (max-width: 600px) {
.rg-container {
max-width: 600px;
margin: 0 auto;
}
table.rg-table {
width: 100%;
}
table.rg-table tr.hide-mobile,
table.rg-table th.hide-mobile,
table.rg-table td.hide-mobile {
display: none;
}
table.rg-table thead {
display: none;
}
table.rg-table tbody {
width: 100%;
}
table.rg-table tr,
table.rg-table th,
table.rg-table td {
display: block;
padding: 0;
}
table.rg-table tr {
border-bottom: none;
margin: 0 0 1em 0;
padding: 0.5em;
}
table.rg-table tr.highlight {
background-color: inherit !important;
}
table.rg-table.zebra tr:nth-child(even) {
background-color: transparent;
}
table.rg-table.zebra td:nth-child(even) {
background-color: #f6f6f6;
}
table.rg-table tr:nth-child(even) {
background-color: transparent;
}
table.rg-table td {
padding: 0.5em 0 0.25em 0;
border-bottom: 1px dotted #ccc;
text-align: right;
}
table.rg-table td[data-title]:before {
content: attr(data-title);
font-weight: bold;
display: inline-block;
content: attr(data-title);
float: left;
margin-right: 0.5em;
font-size: 0.95em;
}
table.rg-table td:last-child {
padding-right: 0;
border-bottom: 2px solid #ccc;
}
table.rg-table td:empty {
display: none;
}
table.rg-table .highlight td {
background-color: inherit;
font-weight: normal;
}
}
</style>
<div class='rg-container'>
<table class='rg-table' summary=''>
<caption class='rg-header'>
<span class='rg-hed'></span>
<span class='rg-dek'></span>
</caption>
<thead>
<tr>
<th class='text '>Quoi?</th>
<th class='text '>Montant apprixomatif</th>
<th class='text '>Commentaires</th>
</tr>
</thead>
<tbody>
<tr class=''>
<td class='text ' data-title='Quoi?'>Achat du terrain</td>
<td class='text ' data-title='Montant apprixomatif'>25-30% du prix total du projet</td>
<td class='text ' data-title='Commentaires'></td>
</tr>
<tr class=' highlight'>
<td class='text ' data-title='Quoi?'>Notaire</td>
<td class='text ' data-title='Montant apprixomatif'>1200-1600$</td>
<td class='text ' data-title='Commentaires'>Si vous achetez un terrain en premier et faites construire votre maison plus tard, demandez à la banque de mettre la valeur totale du projet estimée pour ne pas devoir payer le notaire 2x.</td>
</tr>
<tr class=''>
<td class='text ' data-title='Quoi?'>Taxe de bienvenue/Droits de mutation</td>
<td class='text ' data-title='Montant apprixomatif'>3750$ pour un projet de 300 000$</td>
<td class='text ' data-title='Commentaires'>Vous trouverez un calculateur en ligne ici: http://www.taxedebienvenue.com/</td>
</tr>
<tr class=' highlight'>
<td class='text ' data-title='Quoi?'>Plans</td>
<td class='text ' data-title='Montant apprixomatif'>Technologue: 1500 à 3000$ Architecte: 6 000 à 12 000$</td>
<td class='text ' data-title='Commentaires'>Attention aux modifications, elles peuvent coûter cher!</td>
</tr>
<tr class=''>
<td class='text ' data-title='Quoi?'>Arpenteur</td>
<td class='text ' data-title='Montant apprixomatif'>2 000 $</td>
<td class='text ' data-title='Commentaires'>Inclus le certificat de localisation</td>
</tr>
<tr class='hide-mobile highlight'>
<td class='text ' data-title='Quoi?'>Permis de construction de la ville</td>
<td class='text ' data-title='Montant apprixomatif'>250 $ + un dépôt pour le temps de la construction (2000$)</td>
<td class='text ' data-title='Commentaires'>Peut différer selon les municipalités</td>
</tr>
<tr class='hide-mobile'>
<td class='text ' data-title='Quoi?'>Test pour l’étude du sol et de la qualité de l’eau</td>
<td class='text ' data-title='Montant apprixomatif'>800 - 2000$</td>
<td class='text ' data-title='Commentaires'>Si votre résidence n’est pas alimentée par l’aqueduc. Voir avec votre municipalité.</td>
</tr>
<tr class='hide-mobile highlight'>
<td class='text ' data-title='Quoi?'>Puits (si le terrain n’est pas desservi par l’aqueduc)</td>
<td class='text ' data-title='Montant apprixomatif'>20 000 $</td>
<td class='text ' data-title='Commentaires'>Le prix va varier selon la profondeur du forage. Prévoir une analyse d’eau et possiblement un système de traitement des eaux. Le propriétaire a l’obligation de fournir une eau potable aux membres de sa famille, alors ne négligez surtout pas de faire analyser l‘eau pour vérifier si elle contient des contaminants.</td>
</tr>
<tr class='hide-mobile'>
<td class='text ' data-title='Quoi?'>Fosse septique</td>
<td class='text ' data-title='Montant apprixomatif'>7000 - 12 000$</td>
<td class='text ' data-title='Commentaires'>Si le terrain n’est pas desservi par les égouts</td>
</tr>
<tr class='hide-mobile highlight'>
<td class='text ' data-title='Quoi?'>Branchement à Hydro Québec</td>
<td class='text ' data-title='Montant apprixomatif'>300 $</td>
<td class='text ' data-title='Commentaires'>Si la maison est à moins de 100 pieds du raccord électrique.</td>
</tr>
<tr class='hide-mobile'>
<td class='text ' data-title='Quoi?'>Installation de lumières par l’électricien</td>
<td class='text ' data-title='Montant apprixomatif'>$ à l’heure</td>
<td class='text ' data-title='Commentaires'>Vérifier dans la soumission si c’est inclus. Ce qu’on voit souvent: pose de 30 encastrés et le reste à vos frais.</td>
</tr>
<tr class='hide-mobile highlight'>
<td class='text ' data-title='Quoi?'>Terrassement</td>
<td class='text ' data-title='Montant apprixomatif'>5000 - infini</td>
<td class='text ' data-title='Commentaires'>Par expérience, à 5000$ t'as pas grand chose.</td>
</tr>
<tr class='hide-mobile'>
<td class='text ' data-title='Quoi?'>TPS & TVQ</td>
<td class='text ' data-title='Montant apprixomatif'>Dans le cas d’une résidence neuve, il faut payer les taxes sur tous les matériaux et services.</td>
<td class='text ' data-title='Commentaires'>Vous pouvez vous faire rembourser une partie des taxes payées: https://www.revenuquebec.ca/fr/services-en-ligne/formulaires-et-publications/details-courant/fp-2190.p/</td>
</tr>
<tr class='hide-mobile'>
<td class='text ' data-title='Quoi?'></td>
</tr>
</tbody>
</table>
<div class='rg-source'>
<span class='pre-colon'>SOURCE</span>: <span class='post-colon'>Sources</span>
</div>
</div>
j’ai utilisé ce site pour créer le code HTML http://russellgoldenberg.github.io/responsive-table-generator/