Aller au contenu principal

7-1 Créer un tableau

Nous allons créer un tableau comparatif de forfaits téléphoniques.

Créer la base du tableau​

  1. Créez une page HTML de base
  2. Ajoutez une balise <table> 
    <table>

    </table>

Construire l'en-tête (thead)​

  1. Ajoutez une balise thead pour l'en-tête du tableau. 
    <table>
      <thead></thead>
    </table>
  2. Ajouter les différentes colonnes d'en-tête avec th, soit: caractéristiques, Forfait de base, forfait Pro et forfait Premium. 
    <table>
      <thead>
        <th>Caractéristique</th>
        <th>Forfait Basic</th>
        <th>Forfait Pro</th>
        <th>Forfait Premium</th>
      </thead>
    </table>

Cela constitue l'en-tête du tableau et vous devriez obtenir quelque chose comme ceci:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comparaison de forfaits cellulaires</title>
</head>
<body>
<h1>Comparaison de forfaits cellulaires</h1>

<table>
<thead>
  <th>Caractéristique</th>
  <th>Forfait Basic</th>
  <th>Forfait Pro</th>
  <th>Forfait Premium</th>
</thead>
</table> 
</body>
</html>
Open on CodeSandboxOpen Sandbox

Construire le corps du tableau (tbody)​

Maintenant, pour le corps du tableau, on voudra ajouter plusieurs rangées avec un nombre de colonnes correspondant à l'en-tête.

Nous vondrons ajouter une rangée pour chacune des caractéristiques suivantes:

  • Données mensuelles
  • Appels
  • SMS

  1. Ajoutez tbody au tableau pour définir le corps de ce dernier

    <table>
      <thead>
        <th>Caractéristique</th>
        <th>Forfait de base</th>
        <th>Forfait Pro</th>
        <th>Forfait Premium</th>
      </thead>
      <tbody>
        
      </tbody>
    </table>

  2. Ajoutez une première rangée

    <table>
      <thead>
        <th>Caractéristique</th>
        <th>Forfait de base</th>
        <th>Forfait Pro</th>
        <th>Forfait Premium</th>
      </thead>
      <tbody>
        <tr></tr>
      </tbody>
    </table>

  3. Ajoutez une donnée pour chacune des 4 colonnes.

    <table>
      <thead>
        <th>Caractéristique</th>
        <th>Forfait de base</th>
        <th>Forfait Pro</th>
        <th>Forfait Premium</th>
      </thead>
      <tbody>
        <tr>
          <th>Données mensuelles</th>
          <td>5 GB</td>
          <td>20 GB</td>
          <td>100 GB</td>
        </tr>
      </tbody>
    </table>
    info

    Remarquez l'utilisation de th pour mettre l'emphase sur la première colonne!

Vous devriez maintenant avoir ceci:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comparaison de forfaits cellulaires</title>
</head>
<body>
<h1>Comparaison de forfaits cellulaires</h1>

<table>
<thead>
  <th>Caractéristique</th>
  <th>Forfait de base</th>
  <th>Forfait Pro</th>
  <th>Forfait Premium</th>
</thead>
<tbody>
  <tr>
    <th>Données mensuelles</th>
    <td>5 GB</td>
    <td>20 GB</td>
    <td>100 GB</td>
  </tr>
</tbody>
</table> 
</body>
</html>
Open on CodeSandboxOpen Sandbox

Il ne nous reste plus qu'à compléter avec les données supplémentaires.

<table>
  <thead>
    <th>Caractéristique</th>
    <th>Forfait de base</th>
    <th>Forfait Pro</th>
    <th>Forfait Premium</th>
  </thead>
  <tbody>
    <tr>
      <th>Données mensuelles</th>
      <td>5 GB</td>
      <td>20 GB</td>
      <td>100 GB</td>
    </tr>
    <tr>
      <th>Appels</th>
      <td>100 min</td>
      <td>Illimités</td>
      <td>Illimités</td>
    </tr>
    <tr>
      <th>SMS</th>
      <td>100</td>
      <td>Illimités</td>
      <td>Illimités</td>
    </tr>
    <tr>
      <th>Prix mensuel</th>
      <td>20$</td>
      <td>40$</td>
      <td>60$</td>
    </tr>
  </tbody>
</table>

Ajouter une bordure et de l'espacement​

  1. Pour rendre le tout visuellement plus agréable, ajoutez une bordure au tableau. 
    <table border="1">
  2. Ensuite, ajoutez une marge intérieure de "4" 
    <table border="1" cellpadding="4">

Et voici le résultat final!

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comparaison de forfaits cellulaires</title>
</head>

<body>
<h1>Comparaison de forfaits cellulaires</h1>

<table border="1" cellpadding="4">
  <thead>
    <th>Caractéristique</th>
    <th>Forfait de base</th>
    <th>Forfait Pro</th>
    <th>Forfait Premium</th>
  </thead>
  <tbody>
    <tr>
      <th>Données mensuelles</th>
      <td>5 GB</td>
      <td>20 GB</td>
      <td>100 GB</td>
    </tr>
    <tr>
      <th>Appels</th>
      <td>100 min</td>
      <td>Illimités</td>
      <td>Illimités</td>
    </tr>
    <tr>
      <th>SMS</th>
      <td>100</td>
      <td>Illimités</td>
      <td>Illimités</td>
    </tr>
    <tr>
      <th scope="row">Prix mensuel</th>
      <td>20$</td>
      <td>40$</td>
      <td>60$</td>
    </tr>
  </tbody>
</table>
</body>

</html>
Open on CodeSandboxOpen Sandbox