11 Tableaux

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 retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.

Comment fonctionne un tableau ?

L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par des associations visuelles entre les en‑têtes de lignes et colonnes. Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.

Style de tableau

Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML.

Quand NE PAS utiliser de tableaux en HTML ?

Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — 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.

Mon premier tableau

Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.

1. Avant tout, créer un squelette de document HTML5 et lier le avec le css ci-dessous.
2. Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément (« td » comme « table data »). Ajoutez une première cellule.
4. Observez le résultat dans un navigateur puis continuez à ajouter trois cellules.

html {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}

th {
  background-color: rgb(235,235,235);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}

caption {
  padding: 10px;
}

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 » comme « table row »). Étudions cela maintenant.

1. Placez les quatre cellules que vous avez créées entre deux balises <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>.

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. 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 :

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.

Améliorons ce tableau.

1. En premier lieu, faites une copie des fichiers du code source du tableau ci-dessus et du css présent plus haut dans un nouveau répertoire sur votre ordinateur.
2. Pour reconnaître les en-têtes de tableu en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « 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.

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.

Les en-têtes de tableau ont un autre avantage — avec l'attribut scope, 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, nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, "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 du tableau ci-dessus et du code css de début de TP dans un nouveau répertoire sur votre ordinateur.
2. Ensuite, utilisez colspan pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
3. Enfin, utilisez rowspan pour mettre « Cheval » et « Poulet » sur deux lignes.
4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.