Cet article vous permet de démarrer avec les tableaux HTML, couvrant les bases telles que les lignes et cellules, en-têtes, mais également les cellules composées de mutilples colonnes et lignes, et comment regrouper toutes les cellules dans une colonne pour une question de style.

Prérequis : Les bases de HTML (voir Introduction à HTML).
Objectif : Se familiariser avec les tableaux HTML.

Qu'est-ce qu'un tableau ?

Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de rechercher rapidement et facilement des valeurs qui indiquent un type de connexion entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou le calendrier d'une piscine locale .

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

A swimming timetable showing a sample data table

Les tableaux sont très utilisés dans la société humaine et le sont depuis longtemps, comme en témoigne le document du recensement américain datant de 1800 :

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

Il n'est donc pas étonnant que les créateurs de HTML fournissent un moyen de structurer et de présenter des tables de données sur le Web .

Comment fonctionne un tableau ?

L'avantage d'un tableau est qu'il est rigide. L'information est facilement interprêtée en créant des associations visuelles entre lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.

Données sur les planètes de notre système solaire (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric.
  Nom Masse (1024kg) Diamètre (km) Densité (kg/m3) Gravité (m/s2) durée du jour (hours) Distance du Soleil (106km) Température moyenne (°C) Nombre de lunes Notes
Planètes terrestres Mercure 0.330 4,879 5427 3.7 4222.6 57.9 167 0 la plus proche du Soleil
Venus 4.87 12,104 5243 8.9 2802.0 108.2 464 0  
Terre 5.97 12,756 5514 9.8 24.0 149.6 15 1 notre monde
Mars 0.642 6,792 3933 3.7 24.7 227.9 -65 2 la planète rouge
Planètes joviennes géantes gazeuses Jupiter 1898 142,984 1326 23.1 9.9 778.6 -110 67 la plus grande planète
Saturne 568 120,536 687 9.0 10.7 1433.5 -140 62  
géantes glacées Uranus 86.8 51,118 1271 8.7 17.2 2872.5 -195 27  
Neptune 102 49,528 1638 11.0 16.1 4495.1 -200 14  
Planètes naines Pluton 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 déclassée en tant que planète depuis 2006 mais décision controverséee.

Lorsque cela est fait correctement, même les personnes aveugles peuvent interpréter des tables de données dans un tableau HTML - un tableau HTML réussi devrait améliorer l'expérience des utilisateurs aveugles et malvoyants.

Style de tableau

Vous pouvez également regarder sur l'exemple réel sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub contient un  CSS plus important.

Ne vous faites pas d'illusions ; pour obtenir un tableau efficace sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article Styling tables quand vous aurez fini ici.

Nous n'approfondirons pas le CSS dans ce module, mais nous fournissons une feuille de style minimale CSS pour que vous l'utilisiez et que votre tableau soit plus lisible qu'avec son format par défaut sans aucun style. Vous pouvez trouver la feuille de style ici : stylesheet here, et également un exemple HTML là : HTML template  — ensemble ils vous donneront un bon point de départ pour votre expérimentation des tableaux HTML.

Quand ne devez-vous PAS utiliser de tableau HTML ?

Les tableaux HTML doivent être utilisés pour les tables de données — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec Page Layouts dans notre Accessibility Learning Module. Cela a été couramment utilisé car le support de CSS à travers les navigateurs était effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.

Bref, utiliser les tableaux pour la mise en page CSS layout techniques est une mauvaise idée. Les principales raisons sont les suivantes :

  1. Les tableaux de mise en page réduisent l'accessibilité pour les malvoyants : les lecteurs d'écran, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Parce que les tables ne sont pas le bon outil de mise en page, et que le balisage est plus complexe qu'avec les techniques de mise en page CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.
  2. Les tables produisent de la bouillie : Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que les techniques de mise en page appropriées. Cela peut entraîner l'impossibilité d'écriture, de maintenance et de débogage du code.
  3. Les tableaux ne s'adaptent pas automatiquement : Si vous utilisez les propriétés de mise en page (<header>, <section>, <article>, ou <div>), leur largeur est par défaut de 100% du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.

Apprentissage : Créer votre premier tableau

Nous avons parlé de la théorie des tableaux, alors, plongeons dans un exemple pratique et construisons un tableau simple.

  1. Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
  2. Le contenu de chaque tableau est encadré de ces deux balises : <table></table>. Ajoutez les dans le corps de votre HTML.
  3. Le plus petit conteneur d'un tableau est une cellule  <td> ('td' pour 'tableau données'). Ajoutez les éléments suivants entre les balises de votre tableau :
    <td>Bonjour, je suis votre première cellule</td>
  4. Si nous voulons une série de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu de votre tableau, afin d'obtenir quelque chose comme :
    <td>Bonjour, je suis votre première cellule </td>
    <td>je suis votre deuxième cellule</td>
    <td>je suis votre troisième cellule</td>
    <td>je suis votre quatrième cellule</td>

Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <td> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.

Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <tr> ('tr' pour 'table row' ou 'ligne de tableau'). Étudions cela maintenant.

  1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi :
    <tr>
      <td>Bonjour, je suis votre première cellule </td>
      <td>je suis votre deuxième cellule </td>
      <td>je suis votre troisième cellule </td>
      <td>je suis votre quatrième cellule </td>
    </tr>
  2. Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <tr>, et comprend chaque cellule encadrée par <td>.

Il devrait en résulter un tableau qui ressemble à :

Bonjour, je suis votre première cellule. je suis votre deuxième cellule. je suis votre troisième cellule je suis votre quatrième cellule
Deuxième ligne, première cellule. Cellule 2. Cellule 3. Cellule 4.

Note: Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).

Ajouter des en-têtes avec <th>

Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Race</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Propriétaire</td>
    <td>Belle-mère</td>
    <td>Moi</td>
    <td>Moi</td>
    <td>Belle-soeur</td>
  </tr>
  <tr>
    <td>Habitudes alimentaires</td>
    <td>Mange tous les restes</td>
    <td>Grignotte la nourriture</td>
    <td>Mange copieusement</td>
    <td>Mange jusqu'à ce qu'il éclate</td>
  </tr>
</table>

Maintenant, le rendu du tableau réel :

  Knocky Flor Ella Juan
Race Jack Russell Poodle Streetdog Cocker Spaniel
Age 16 9 10 5
Propriétaire Belle-mère Moi Moi Belle-soeur
Habitudes alimentaires Mange tous les restes Grignotte la nourriture Mange copieusement Mange jusqu'à ce qu'il éclate

Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.

Apprentissage : en-tête de tableau

Améliorons ce tableau.

  1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple des chiens ci-dessus.
  2. Pour reconnaître les en-têtes de table comme en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> ('th' pour 'table header' ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> par des <th>.
  3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.

Note: Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).

Pourquoi les en-têtes sont-ils utiles ?

Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.

Note: Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.

Les en-têtes de tableau ont un autre avantage -  avec l'attribut scope (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.

Étendre des cellules sur plusieurs lignes ou colonnes

Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.

Le code initial ressemble à cela :

<table>
  <tr>
    <th>Animaux</th>
  </tr>
  <tr>
    <th>Hippopotame</th>
  </tr>
  <tr>
    <th>Cheval</th>
    <td>Jument</td>
  </tr>
  <tr>
    <td>Étalon</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Poulet</th>
    <td>Coq</td>
  </tr>
  <tr>
    <td>Coq</td>
  </tr>
</table>

Mais le résultat ne nous donne pas ce que nous voulions :

Animaux
Hippopotame
Cheval Jument
Étalon
Crocodile
Poulet Coq
Coq

Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs colspan et rowspan, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, colspan="2" génère une cellule sur deux colonnes.

Utilisons colspan et rowspan pour améliorer ce tableau.

  1. Tout d'abord, faites une copie locale de nos fichiers animals-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.
  2. Ensuite, utilisez colspan pour mettre "Animals", "Hippopotamus", et "Crocodile" sur deux colonnes.
  3. Enfin, utilisez rowspan pour mettre "Horse" and "Chicken" sur deux lignes.
  4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.

Note: Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).

Attribuer un style commun aux colonnes

Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <col> and <colgroup>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que :nth-child().

Observez l'exemple simple suivant :

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>

Ce qui nous donne comme résultat :

Data 1 Data 2
Calcutta Orange
Robots Jazz

Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une classe dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons spécifier l'information une seule fois dans un élément <col>. Les éléments <col> sont utilisés dans un conteneur <colgroup> juste en-dessous de la balise <table>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :

 <table>
   <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

En effet, nous définissons deux styles de colonne, les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <col>  vide — si nous ne le faisons pas, le style spécifié s'applique à la première colonne.

Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <col> avec un attribut span, comme ceci :

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

Comme colspan et rowspan, span reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles appliquer le style.

Apprentissage : colgroup et col

Maintenant, il est temps de vous y mettre vous-même.

Ci-dessous, vous pouvez voir le planning d'un professeur de langue. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.

Recréez le tableau en suivant les étapes ci-dessous.

  1. Tout d'abord, faites une copie locale du fichier timetable.html dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.
  2. Ajoutez un élément <colgroup>  au début du tableau, juste en dessous de la balise <table>,dans lequel vous pouvez ajouter vos éléments <col> (voir les étapes restantes ci-dessous).
  3. Les deux premières colonnes doivent rester sans style.
  4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut style est background-color:#97DB9A;
  5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut style est width: 42px;
  6. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut style est background-color: #97DB9A;
  7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut style sont background-color:#DCC48E; border:4px solid #C1437A;
  8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;

Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version timetable-fixed.html (voir aussi) sur GitHub .

Résumé

Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de table légèrement plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : loella16, tonybengue
 Dernière mise à jour par : loella16,