Les tableaux HTML
Épisode N° 10 de la formation HTML, publié le 01/05/2020 par Ronan HELLO et mis à jour le 29/09/2024Dans ce nouvel épisode, nous allons nous attaquer à un gros morceau, les tableaux en HTML, et là je ne vous parle pas de mise en page comme on pouvait le faire en HTML4, mais bien de tableaux pour organiser vos données proprement.
Structure générale d’un tableau
Pour créer correctement un tableau en HTML, il faut savoir manipuler plusieurs balises, qui vont venir s'ajouter les unes aux autres dans un ordre logique que je vais vous détailler plus bas. Voici un exemple de tableau très simple :
La balise <table>
Comme vous pouvez le constater à l’aide du code ci-dessus, l’ensemble des balises constituant le tableau HTML est entouré d’une balise <table> permettant de délimiter le tableau dans le document. On peut voir que la balise <table> à un attribut border qui sert à afficher les lignes noires entre les cellules, initialement transparentes.
La balise <tr>
Ensuite, si nous continuons à décortiquer notre tableau, nous pouvons voir trois balises <tr> se succédant les unes aux autres. Cette balise <tr> permet de créer une nouvelle ligne dans le tableau, notre tableau est donc constitué de trois lignes. (TR pour Table Row, ou rangée du tableau en français).
La balise <th>
Si vous souhaitez ajouter des cellules de titres dans votre tableau, il faudra ajouter une balise <th> autour de chaque entête. (TH pour Table Head ou Entête de tableau en français). La balise <th> peut avoir un attribut scope qui lui permet de déterminer la zone d’action. L’attribut scope peut prendre pour valeur col ou row suivant si le titre est utilisé pour nommer une colonne ou une rangée.
<!-- Début du tableau -->
<tr>
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
</tr>
<!-- Suite du tableau -->
La balise <td>
Chaque valeur dans un tableau doit être entouré d’une balise <td>. Cette balise <td> peut être remplie avec tout type de contenus, que ce soit du texte, une image, ou tout autre élément HTML. C’est d’ailleurs à cause de cette flexibilité que certains vieux sites utilisent une mise en page exclusivement travaillée à l’aide de tableaux HTML 4. Si vous voulez bien rigoler, allez inspecter le code source du site des impôts, c’est une réelle antiquité HTML 4.
Si par exemple, vous souhaitez ajouter 4 valeurs sur une seule ligne de votre tableau, il faudra ajouter 4 balises <td> au sein de la même balise <tr> comme ici :
<tr>
<td>Valeur A</td>
<td>Valeur B</td>
<td>Valeur C</td>
<td>Valeur D</td>
</tr>
Essayez de créer un tableau avec plusieurs lignes et plusieurs valeurs par lignes, vous comprendrez très facilement le fonctionnement de ces derniers.
Les différentes zones
Pour l’instant, nous avons créé un tableau relativement simple, avec une seule zone, que nous n’avions même pas spécifié. Si l’on souhaite structurer un peu plus nos informations dans le tableau, il est possible d’utiliser trois balises afin de délimiter des zones précises : l’entête, le corps et l’entête bas (pour ce dernier, je n’ai pas de meilleure appellation…).
La balise <thead>
Dans l’exemple précédent, nous avions une première rangée <tr> contenant exclusivement des balises <th> afin de libeller les colonnes du tableau. Il peut être judicieux d’encadrer cette rangée <tr> par une balise <thead>. En ajoutant cette balise à votre tableau, vous venez de délimiter une zone d’entête. Votre navigateur comprendra donc que cette zone est destinée aux titres de votre tableau HTML.
La balise <tbody>
Maintenant que nous avons défini une zone spécifique à l’entête du tableau, il faut également délimiter la zone principale du tableau, contenant les valeurs souhaitées et les données importantes. Pour cela, entourez les balises <tr> contenant les balises <td> restantes à l’aide d’une balise <tbody>. De cette manière, votre tableau est déjà bien mieux balisé et correspond un peu plus aux attentes quant à la structure d’un tableau HTML5.
La balise <tfoot>
Contrairement aux deux balises citées précédemment, la balise <tfoot> m’est souvent moins utile. Elle permet de créer une zone similaire à l’entête, mais situé en bas du tableau. Personnellement, j'utilise rarement la zone basse de mon tableau, je ne me sers donc de cette balise que très rarement. Mais bien entendu, comme vous êtes ici pour apprendre, vous pouvez créer cette zone afin d’en comprendre le fonctionnement. Pour cela, copiez la zone <thead> et collez la juste avant la fermeture de la balise </tbody>, puis renommez la balise <thead> fraîchement copiée en <tfoot> et le tour est joué.
Fusionner des cellules
Dans certains cas de figure, vous souhaitez qu’une cellule soit plus grande que spécifié initialement dans votre tableau. Cela pourrait s’apparenter à une opération de fusion entre deux cellules dans un tableur Excel. En réalité, il ne s’agit pas de fusion de cellule, mais d’un balisage particulier à mettre en place à l’aide de deux attributs qui vous seront bien utiles, croyez-moi.
L'attribut colspan
Premièrement, le plus simple à mettre en place, est l’attribut colspan, qui permet de faire une fusion de cellule sur une même rangée (horizontale donc). En ajoutant un attribut colspan qui prend pour valeur un nombre entier (supérieur à 0), vous pouvez indiquer la largeur en nombre de cellules que prendra la balise <td>. Par exemple :
On remarque assez facilement que la balise <td colspan="2"> prend la largeur de deux cellules. Attention en revanche à bien retirer une cellule de la même rangée afin que le tableau reste correct.
Entraînez-vous, à manipuler l’attribut colspan sur votre tableau précédemment créé, il vous permettra de mieux comprendre le prochain attribut.
L'attribut rowspan
Après avoir vu comment élargir une colonne sur une même ligne, que pensez-vous de le faire, dans une même colonne ? C'est-à-dire étaler une balise <td> sur plusieurs <tr>. Cela complique légèrement les choses au niveau de la logique, mais la mise en place reste similaire.
Dans l’exemple suivant, la première balise occupe deux colonnes, il faut donc retirer un élément <td> à la rangée d’après afin de conserver le bon nombre d’éléments et éviter les débordements dans le tableau, comme ceci :
Essayez de mettre plus de <td> que prévu dans la seconde rangée de votre tableau et observez les cellules déborder.
Légender un tableau
Cette balise <caption> permet d’ajouter une légende à un tableau, on retrouvera exactement le même comportement que décrit dans l’épisode sur la gestion des images avec l’élément <figure> et <figcaption>. Cette balise est rarement utilisée aujourd’hui, mais voici un rendu visuel de ce à quoi la balise <caption> peut ressembler dans un tableau HTML complet.
Vous avez le droit de faire une pause maintenant, la suite risque de faire un peu mal, c’est également un gros chapitre sur la gestion des formulaires sur internet. Mais ne vous découragez surtout pas ! Après ce prochain chapitre, il ne restera que des épisodes plus simples à appréhender.