3.6 Tableaux HTML

• ouvrir une <table>
• ajouter des lignes avec <tr>
• ajouter des cellules régulières avec <td> ou des cellules de titre avec <th>

Cette hiérarchie est obligatoire et tous les 3 éléments sont nécessaires pour construire une table.

Lorsque vous écrivez le code, vous devez définir les cellules de votre tableau de gauche à droite, puis de bas en haut.

<table>
  <tr>
    <td>John Lennon</td>
    <td>Guitare rythmique</td>
  </tr>
  <tr>
    <td>Paul McCartney</td>
    <td>Basse</td>
  </tr>
  <tr>
    <td>George Harrison</td>
    <td>Guitare de tête</td>
  </tr>
  <tr>
    <td>Ringo Starr</td>
    <td>Batteries et Percussions</td>
  </tr>
</table>

Comme vous pouvez le constater, un tableau en HTML est relativement détaillée : il y a beaucoup de balises pour quelques lignes de données.

Tête, pied et corps – head, tfoot and tbody

Tout comme une page Web peut avoir un en-tête et un pied de page, un tableau peut avoir une tête, un corps et un pied. Comme pour tout ce qui se passe en HTML, c’est uniquement pour des raisons sémantiques: donner plus de structure à votre tableau.

<thead>, <tfoot> et <tbody> sont des collections de lignes. En tant que tels, ils sont les enfants directs de <table> et les parents directs d’un ou de plusieurs <tr>. En bref, ils ajoutent un niveau de hiérarchie.

<thead> et <tfoot> sont utilisés comme récapitulatif des colonnes.

Améliorons le tableau précédent avec une tête et un corps :

<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Instrument</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>John Lennon</td>
       <td>Guitare rythmique</td>
     </tr>
     <tr>
       <td>Paul McCartney</td>
       <td>Basse</td>
     </tr>
     <tr>
       <td>George Harrison</td>
       <td>Guitare de tête</td>
     </tr>
     <tr>
       <td>Ringo Starr</td>
       <td>Batteries et Percussions</td>
     </tr>
   </tbody>
</table>

particularité du tfoot

Ajoutons également un pied à la table :

<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Instrument</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
      <th>Nom</th>
      <th>Instrument</th>
    </tr>
   </tfoot>
   <tbody>
     <tr>
       <td>John Lennon</td>
       <td>Guitare rythmique</td>
     </tr>
     <tr>
       <td>Paul McCartney</td>
       <td>Basse</td>
     </tr>
     <tr>
       <td>George Harrison</td>
       <td>Guitare de tête</td>
     </tr>
     <tr>
       <td>Ringo Starr</td>
       <td>Batteries et Percussions</td>
     </tr>
   </tbody>
</table>

Bien que nous ayons ajouté un <tfoot> avant le <tbody>, il apparaît toujours à la fin.

Cela vient du fait que le <tbody> peut contenir beaucoup de lignes. Mais le navigateur veut rendre le pied avant de recevoir toutes les lignes (potentiellement nombreuses) de données. C’est pourquoi <tfoot> est la première du code.

colspan and rowspan

Vous pouvez fusionner des colonnes ou des lignes en utilisant les lignes rowspan et colspan respectivement.

Gardez à l’esprit que pour fusionner des colonnes, vous devez utiliser l’attribut rowspan car il permet d’étendre une colonne sur plusieurs lignes.

<table>
  <tr>
    <th colspan="2">Singles - Michael Jackson</th>
  </tr>
  <tr>
    <th rowspan="3">1979</th>
    <td>Don't Stop 'Til You Get Enough</td>
  </tr>
  <tr>
    <td>Rock with You</td>
  </tr>
  <tr>
    <td>Off the Wall</td>
  </tr>
</table>

La cellule “Michael Jackson Singles” s’étend sur 2 colonnes. La rangée suivante comprend donc deux cellules.

Étant donné que la cellule « 1979 » s’étend sur 3 lignes, les 2 lignes suivantes ne comprennent qu’une cellule, pour laisser de la place pour la colonne « 1979 ».

Il peut être difficile de savoir combien de cellules sont manquantes ou superflues. Un moyen simple de créer d’abord un tableau complet 2 × 4, puis de supprimer des cellules tout en ajoutant les attributs les attributs colspan et rowspan.
Dans notre cas, nous sommes supposés avoir 8 cellules. Nous n’écrivons que 5 cellules, mais colspan="2" et rowspan="3" ajoutent 3 cellules supplémentaires.