Création de tables

6.1 Éléments table et tr

Les tables en HTML sont utilisées pour organiser les données sous forme tabulaire. Les principaux tags utilisés pour créer des tables incluent <table>, <tr>, et <td>. Explorons chacun d'eux plus en détail.

<table>

Le tag <table> est un conteneur pour l'ensemble du tableau. A l'intérieur, les lignes du tableau sont placées, chacune définie par le tag <tr>.

Exemple d'utilisation :

    
      <table>
        <!-- les lignes et les cellules du tableau seront ajoutées ici -->
      </table>
    
  

Tag <tr> (table row)

Le tag <tr> désigne une ligne de tableau. A l'intérieur du tag <tr>, les cellules de tableau sont placées, chacune définie par le tag <td> ou <th>.

Exemple d'utilisation :

    
      <table>
        <tr>
          <!-- les cellules de la ligne seront ajoutées ici -->
        </tr>
      </table>
    
  

6.2 Éléments td et th

Tag <td> (table data)

Le tag <td> est utilisé pour définir une cellule de données dans une ligne de tableau. Ces cellules contiennent les données du tableau et sont placées à l'intérieur d'une ligne, désignée par le tag .

Exemple d'utilisation :

    
      <table>
        <tr>
          <td>Cellule 1</td>
          <td>Cellule 2</td>
          <td>Cellule 3</td>
        </tr>
      </table>
    
  

Tag <th> (table head)

Le tag <th> est utilisé pour désigner les cellules d'en-tête du tableau. Le texte à l'intérieur de <th> est généralement affiché en gras et centré.

Exemple d'utilisation :

    
      <table>
        <tr>
          <th>En-tête 1</th>
          <th>En-tête 2</th>
          <th>En-tête 3</th>
        </tr>
      </table>
    
  

Exemple de tableau :

    
      <table>
        <tr>
          <th>Nom</th> <th>Âge</th> <th>Ville</th>
        </tr>
        <tr>
          <td>Ivan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Maria</td> <td>25</td> <td>Francfort</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Paris</td>
        </tr>
      </table>
    
  

6.3 Stylisation des tableaux

Il est crucial de styliser les tableaux avec du CSS - cela améliore considérablement la visibilité et la lisibilité des données.

Par exemple, vous avez décidé d'ajouter une bordure à chaque cellule : bonne idée, mais comme il y a une bordure autour de chaque cellule, chaque paire de cellules partage désormais une double bordure - une de chaque cellule. 🤦‍♂️

Si vous voulez que la bordure ressemble à ce que vous voulez, vous devez combiner les bordures adjacentes avec du CSS. Pour cela, il existe une propriété spéciale — border-collapse.

Voici un exemple de bonne stylisation de notre tableau :

    
      <table>
        <tr>
          <th>Nom</th> <th>Âge</th> <th>Ville</th>
        </tr>
        <tr>
          <td>Ivan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Maria</td> <td>25</td> <td>Francfort</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Paris</td>
        </tr>
      </table>
    
  

    
      table {
        width: 50%; /* Définit la largeur du tableau */
        border-collapse: collapse; /* Supprime les doubles bordures entre les cellules */
      }

      th, td {
        border: 1px solid black; /* Définit une bordure pour les cellules */
        padding: 8px; /* Ajoute des marges intérieures aux cellules */
        text-align: left; /* Aligne le texte à gauche */
      }

      th {
        background-color: #f2f2f2; /* Définit la couleur d'arrière-plan pour les en-têtes */
      }
    
  

On voit ici que :

• Chaque cellule a une bordure de 1 pixel de couleur noire
• Les doubles bordures entre les cellules sont supprimées
• Chaque cellule a des marges intérieures pour éviter que le texte ne touche les bords
• Les cellules des en-têtes ont une couleur d'arrière-plan distincte

C'est joli !