Tableau HTML : présentez la data comme un pro

Un tableau HTML se présente sous cette forme :

<table>
    <tr>
        <th>Fruit</th>
        <th>Couleur</th>
    </tr>
    <tr>
        <td>Pomme</td>
        <td>Vert</td>
    </tr>
    <tr>
        <td>Banane</td>
        <td>Jaune</td>
    </tr>
    <tr>
        <td>Fraise</td>
        <td>Rouge</td>
    </tr>
</table>

Ce qui donne :

L’historique des tableaux HTML

La balise HTML <table> est un élément de base utilisé pour structurer les données sur les pages web.

Les tableaux HTML ont été introduits avec HTML 2.0 en 1995. A l’époque, ils étaient principalement utilisés pour présenter des données tabulaires (sans blague ! 😅), comme des feuilles de calcul. Cela donnait des grilles organisées et bien présentées sur le web.

Malheureusement, ils ont rapidement été utilisés de manière abusive pour de la mise en page, ce qui a donné lieu à un tas de pages web mal conçues.

Les choses ont beaucoup évolué depuis les premiers jours de l’internet. Le HTML5 est là, Internet Explorer n’existe plus, le web est toujours plus étonnant et les tableaux sont maintenant utilisés de manière plus appropriée.

Comment créer un tableau HTML

Un tableau en HTML est constitué de plusieurs balises différentes, chacune ayant un rôle spécifique :

• <tr> définit une ligne dans un tableau.
• <td> définit une cellule de données dans un tableau.
• <th> définit une cellule d’en-tête dans un tableau.

Vous pouvez également utiliser des attributs pour personnaliser l’apparence de vos tableaux HTML, tels que :

• border, permettant de définir la taille de la bordure des cellules.
• cellpadding, permettant de définir l’espace entre le contenu d’une cellule et sa bordure.
• cellspacing, permettant de définir l’espace entre les cellules.

<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <th>Fruit</th>
        <th>Couleur</th>
    </tr>
    <tr>
        <td>Pomme</td>
        <td>Vert</td>
    </tr>
    <tr>
        <td>Banane</td>
        <td>Jaune</td>
    </tr>
    <tr>
        <td>Fraise</td>
        <td>Rouge</td>
    </tr>
</table>

Séparez l’entête du contenu

Les balises et peuvent être respectivement utilisées afin de définir l’entête et le contenu du tableau. Par exemple :

<table>
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Couleur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pomme</td>
      <td>Vert</td>
    </tr>
    <tr>
      <td>Banane</td>
      <td>Jaune</td>
    </tr>
    <tr>
      <td>Fraise</td>
      <td>Rouge</td>
    </tr>
  </tbody>
</table>

L’utilisation de ces balises peuvent aussi vous permettre de cibler plus précisément vos sélecteurs CSS.

Donnez un titre à vos tableaux

La balise <caption> est utilisée pour ajouter un titre à un tableau HTML. Cela peut être utile pour expliquer ce qu’il contient et pourquoi les données sont présentées de la sorte.

Pour utiliser la balise <caption>, vous devez la placer juste après la balise d’ouverture <table>. Par exemple :

<table>
    <caption>Les fruits préférés des Français</caption>
    <tr>
        <th>Fruit</th>
        <th>Pourcentage des personnes l'aimant</th>
    </tr>
    <tr>
        <td>Pomme</td>
        <td>40%</td>
    </tr>
    <tr>
        <td>Banane</td>
        <td>25%</td>
    </tr>
    <tr>
        <td>Fraise</td>
        <td>15%</td>
    </tr>
</table>

Le titre du tableau sera affiché au-dessus du tableau.

Il est important de noter que la balise <caption> ne peut être utilisée qu’une seule fois par tableau. Si vous essayez de l’utiliser plusieurs fois, seule la première sera prise en compte.

Étendez les colonnes et les lignes grâce à colspan et rowspan

Les attributs colspan et rowspan sont utilisés pour étendre une cellule sur plusieurs colonnes ou lignes dans un tableau HTML.

Cela peut être utile pour créer des tableaux plus complexes et pour regrouper des données de manière logique.

Ces attributs s’utilisent avec les balises <td> ou <th>. Par exemple :

<table>
    <tr>
        <th>Fruit</th>
        <th>Couleur</th>
        <th>Prix</th>
    </tr>
    <tr>
        <td>Pomme</td>
        <td>Vert</td>
        <td rowspan="3">1,50 €</td>
    </tr>
    <tr>
        <td>Banane</td>
        <td>Jaune</td>
    </tr>
    <tr>
        <td>Fraise</td>
        <td>Rouge</td>
    </tr>
</table>

Cela donnera le tableau suivant :

Dans ce tableau, nous avons utilisé la balise rowspan sur la cellule “Prix” pour étendre sa valeur sur les trois lignes du tableau. Cela nous permet de regrouper les prix des différents fruits dans une seule cellule.

colspan s’utilise de la même manière. Afin d’étendre une cellule sur plusieurs colonnes, il vous suffit de faire ceci :

<table>
    <tr>
        <th>Fruit</th>
        <th colspan="2">Caractéristiques</th>
    </tr>
    <tr>
        <th>Nom</th>
        <th>Couleur</th>
        <th>Saison</th>
    </tr>
    <tr>
        <td>Pomme</td>
        <td>Couleur</td>
        <td>Vert</td>
    </tr>
    <tr>
        <td>Banane</td>
        <td>Couleur</td>
        <td>Jaune</td>
    </tr>
    <tr>
        <td>Fraise</td>
        <td>Couleur</td>
        <td>Rouge</td>
    </tr>
</table>

Cela donnera le tableau suivant :