9. Les Tableaux¶

On continue notre apprentissage du HTML5 avec plein de nouvelles balises. Attendez-vous dans ce chapitre à en découvrir beaucoup plus!

Les balises pour Tableaux¶

Les tableaux en HTML ne sont pas compliqués mais demandent un peu de rigueur. Nous allons aborder pas moins de 7 nouvelles balises. Une fois cette partie du cours assimilée, vous pourrez intégrer des tableaux simples dans vos pages HTML.

La balise <table>¶

Le nom de la balise indique clairement son utilité. Elle permet de déclarer un nouveau tableau. Elle englobe la totalité de ce dernier.

<table>
  <!-- contenu du tableau -->
</table>

La balise <tr>¶

Les tableaux en HTML sont organisés en lignes et cellules. Une ligne peut avoir une ou plusieurs cellules. La balise qui permet de représenter une ligne est <tr>. C'est donc cette balise <tr> qui englobe les cellules.

<table>
  <tr>
    <!-- contient les cellules -->
  </tr>
  <tr>
    <!-- contient les cellules -->
  </tr>
</table>

La balise <td>¶

Comme expliqué précédemment, les tableaux en HTML sont organisés en lignes et en cellules. Les lignes sont représentées par les balises <tr>, tandis que les cellules sont représentées par la balise <td>. Il peut donc y avoir une ou plusieurs balises <td> à l'intérieur d'un <tr>.

<table>
  <tr>
    <td><!-- contenu de la cellule --></td>
    <td><!-- contenu de la cellule --></td>
  </tr>
  <tr>
    <td><!-- contenu de la cellule --></td>
    <td><!-- contenu de la cellule --></td>
  </tr>
</table>

La balise <th>¶

La balise HTML <th> permet de définir une cellule d'en-tête pour un tableau. Elle se place tout comme la balise <td> à l'intérieur d'une ligne <tr>. On retrouve dans une ligne, une ou plusieurs balises d'en-tête.

Exemple d'un tableau¶

<table>
  <tr>
      <td>Entête colonne 1</td>
      <td>Entête colonne 2</td>
      <td>Entête colonne 3</td>
  </tr>
  <tr>
      <td>Contenu 1ère line - 1ère colonne</td>
      <td>Contenu 1ère line - 2ème colonne</td>
      <td>Contenu 1ère line - 3ème colonne</td>
  </tr>
  <tr>
      <td>Contenu 2ème line - 1ère colonne</td>
      <td>Contenu 2ème line - 2ème colonne</td>
      <td>Contenu 2ème line - 3ème colonne</td>
  </tr>
</table>

<table>
  <tr>
      <th>Entête colonne 1</th>
      <th>Entête colonne 2</th>
      <th>Entête colonne 3</th>
  </tr>
  <tr>
      <td>Contenu 1ère line - 1ère colonne</td>
      <td>Contenu 1ère line - 2ème colonne</td>
      <td>Contenu 1ère line - 3ème colonne</td>
  </tr>
  <tr>
      <td>Contenu 2ème line - 1ère colonne</td>
      <td>Contenu 2ème line - 2ème colonne</td>
      <td>Contenu 2ème line - 3ème colonne</td>
  </tr>
</table>

Autres balises¶

Pour améliorer la lisibilité de votre code mais également pour cibler davantage vos éléments en CSS, vous pouvez avoir recours aux balises suivantes :

• <thead> : cette balise permet d'englober la ou les lignes dans lesquelles sont définis les en-têtes des colonnes
• <tbody> : cette balise permet d'englober la ou les lignes qui constituent le corps du tableau
• <tfoot> : cette balise permet d'englober la ou les lignes qui forment le pied du tableau. On retrouve parfois dans cette zone des résumés des colonnes.

Ces balises sont facultatives. Vous pouvez les utiliser toutes dans le même tableau, ou seulement une, voir même aucune. Mais elles vous seront fort utiles pour structurer de grands tableaux. Elle vous permettrons aussi des réglages de styles plus poussé.

Les attributs 'colspan' et 'rowspan'¶

Pour fusionner des cellules entre elles, il suffit d'ajouter un attribut dans la balise HTML <td>. Cela permet d'indiquer le nombre de cellules à fusionner entre elles (la balise des cellules).

II existe deux attributs pour deux types de fusions différentes :

• colspan permet de fusionner des colonnes : la fusion s'effectue horizontalement, aussi bien sur les lignes d'en-tête que sur le contenu lui-même.
• rowspan permet de fusionner des lignes : là, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement.

Voyons tout de suite à quoi cela peut ressembler :

<table>
  <tr>
      <th>Titre du film</th>
      <th>Pour enfants ?</th>
      <th>Pour adolescents ?</th>
  </tr>
  <tr>
      <td>Massacre à la tronçonneuse</td>
      <td >Non, trop violent</td>
      <td rowspan="2">Oui</td>
  </tr>
<tr>
      <td>The Ring</td>
      <td>Effrayant</td>
  </tr>
  <tr>
      <td>Les Bisounours font du ski</td>
      <td>Oui, adapté</td>
      <td>Pas assez violent...</td>
  </tr>
  <tr>
      <td>Lucky Luke, seul contre tous</td>
      <td colspan="2">Pour toute la famille !</td>
  </tr>
</table>