Tableaux

Programmation Web

Une tâche commune dans le développement Web est de structurer et de présenter des données sous forme de tableau. HTML contient un ensemble de balises pour construire des tableaux simples et des tableaux complexes et les mettre en formes avec le CSS. Dans ce chapitre, nous allons introduire ces balises HTML. Leur présentation par CSS, sera introduite dans le chapitre CSS.

Les balises de Tableau

Pour structurer un tableau, on utilise la balise <table> qui est utilisé comme un conteneur (container) de toutes les données du tableau et qui encadre les lignes et les colonnes. Pour présenter une ligne on utilise la balise <tr> (table row) qui elle même contient les balises <td> (tabular data) représentants les colonnes du tableau. Par exemple, le code suivant présente un tableau de personnes contenant deux lignes chacune présente une personne (son prénom dans la première colonne et son nom dans la deuxième colonne) :

<table>
  <tr>
    <td>Ali</td>
    <td>Masoud</td>
  </tr>
  <tr>
    <td>Salma</td>
    <td>Hchicha</td>
  </tr>
</table>

Le tableau résultant est :

On va maintenant ajouter le titre des différentes colonnes du tableau en utilisant la balise <th> (table header) dans une ligne qui simplifie l’exploitation du tableau visuellement.

<table>
  <tr>
    <th>Prénom</th>
    <th>Nom</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>Masoud</td>
  </tr>
  <tr>
    <td>Salma</td>
    <td>Hchicha</td>
  </tr>
</table>

Le tableau résultant est :

Pour le reste de ce chapitre, on va utiliser l’attribut border de la balise <table> qui ajoute une bordure entre les éléments du tableau pour les identifier plus facilement. Même que cet attribut est obsolète1 depuis HTML5 en faveur des propriétés de CSS, on va l’utiliser comme solution temporaire jusqu’à ce qu’on arrive au chapitre de CSS3. Donc, en remplaçant la première ligne du code précédent <table> par <table border="1">, le résultat sera :

Structure Tableau Avancée

Le HTML nous permet de fusionner horizontalement les colonnes et verticalement les lignes d’un tableau grâce aux attributs colspan et rowspan respectivement des balises <td> et <th> qui prennent comme valeur le nombre des cellules à fusionner. Prenons comme exemple un tableau d’un mini emploie du temps avec les séances de cours sont de durée de 2 heures tantdis que les séances de TP sont de durée d’une heure. Sans les attributs de fusions, le tableau sera le suivant :

<table border="1">
  <tr>
    <th>Journée</th>
    <th>08 - 09</th>
    <th>09 - 10</th>
    <th>10 - 11</th>
    <th>11 - 12</th>
  </tr>
  <tr>
    <td>Landi</td>
    <td>Cours Web</td>
    <td>Cours Web</td>
    <td>TP Java</td>
    <td>TP Linux</td>
  </tr>
  <tr>
    <td>Mardi</td>
    <td>TP Web</td>
    <td>Cours Linux</td>
    <td>Cours Linux</td>
    <td></td>
  </tr>
</table>

La solution est de fusionner les deux colonnes des séances de cours en utilisant l’attribut colspan.

<table border="1">
  <tr>
    <th>Journée</th>
    <th>08 - 09</th>
    <th>09 - 10</th>
    <th>10 - 11</th>
    <th>11 - 12</th>
  </tr>
  <tr>
    <td>Landi</td>
    <td colspan="2">Cours Web</td>
    <td>TP Java</td>
    <td>TP Linux</td>
  </tr>
  <tr>
    <td>Mardi</td>
    <td>TP Web</td>
    <td colspan="2">Cours Linux</td>
    <td></td>
  </tr>
</table>

Le tableau supporte le groupement des lignes en trois sections : l’en-tête en utilisant la balise <thead>, le corps en utilisant la balise <tbody> et le pied en utilisant la balise <tfooer> ce qui permet la séparation sémantique des lignes du tableau et facilite ses mises en forme. Si ces balises n’étaient pas utilisées, toutes les lignes du tableau sont délimitées implicitement par la balise <tbody>. Prenons l’exemple précédent avec le groupement des lignes :

<table border="1">
  <thead>
    <tr>
      <th>Prénom</th>
      <th>Nom</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ali</td>
      <td>Masoud</td>
    </tr>
    <tr>
      <td>Salma</td>
      <td>Hchicha</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Prénom</th>
      <th>Nom</th>
    </tr>
  </tfoot>
</table>

Le tableau résultant est :

Pour ajouter un titre (une légende) à un tableau, on utilise la balise <caption> après l’ouverture de la balise <table> ou avant sa fermeture :

<table border="1">
  <caption>Liste des personne</caption>
  <thead>
    <tr>
      <th>Prénom</th>
      <th>Nom</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ali</td>
      <td>Masoud</td>
    </tr>
    <tr>
      <td>Salma</td>
      <td>Hchicha</td>
    </tr>
  </tbody>
</table>

Le tableau résultant est :

Remarques

Anciennement, la balise <table> était utilisée pour mettre en forme la page Web à cause des limites de CSS et son mal support par les navigateurs. Mais, depuis le HTML5, il est recommandé de ne plus utiliser les tableaux pour la mise en forme de pages Web mais plutôt, il vaut mieux utiliser le CSS3 parce que la balise <table> n’est pas sensible aux différents types d’écrans (c’est à dire n’est pas responsive design) et demande une structure HTML plus complexe.

La plupart des attributs des balises de tableaux (<table>, <th>, <tr>, <td>, …) sont devenus obsolètes1 depuis HTML5 en faveur des propriétés de CSS ou en faveur des autres balises en HTML.

  1. Cette fonctionnalité n’est plus officiellement supportée par le standard. Et les vendeurs des navigateurs vont supprimer son support dans le futur sans aucune notification préalable. ↩ ↩2