Les tables HTML servent à structurer et présenter des données sur le web. Leur équivalent CSS (comme les grids ou les flexbox) leur sont souvent préférés car plus modernes, mais les tables HTML restent idéales pour organiser des informations sous forme de tableau.
Elles permettent de présenter les données de façon structurée en les organisant en lignes et en colonnes. Cela facilite la présentation de données complexes et permet à l’utilisateur de mieux comprendre les informations fournies. Elles sont souvent utilisées pour les tableaux de comparaison, les rapports financiers, ou simplement pour afficher des informations bien ordonnées.
Structure d'une Table HTML
Les tables HTML sont construites en utilisant des balises imbriquées qui définissent les différents niveaux de la structure. Voici les principaux éléments que vous pouvez utiliser pour construire une table.
1. <table > : Le conteneur principal
Cette balise est le conteneur principal de toute table HTML. Elle contient tous les éléments de la table, y compris les lignes, les colonnes, et les cellules. Par défaut, une table n’a pas de bordure visible. Pour lui en ajouter une, il est possible d’utiliser l’attribut border.
2. <thead >, <tbody > et <tfoot > : Organisation de la table
- <thead> : Contient les en-têtes des colonnes. Utiliser cette balise permet de regrouper les éléments qui servent d’en-tête à la table. Les balises dans <thead> sont souvent des <th> (table headers).
- <tbody> : Contient le corps principal de la table, c’est ici que les données sont généralement placées. Les lignes de données sont créées avec la balise <tr>.
- <tfoot> : Utilisé pour regrouper les informations qui vont en bas de la table, comme un résumé ou des totaux.
Voici un exemple d’un tableau :
<table border="1">
<thead>
<tr>
<th>Variable</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Âge</td>
<td>Entier</td>
<td>Représente l'âge d'une personne en années</td>
</tr>
<tr>
<td>Revenu</td>
<td>Flottant</td>
<td>Représente le revenu annuel en euros</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Nombre total de variables</td>
<td>2</td>
</tr>
</tfoot>
</table>
Ici, <tr>, <th>, et <td> créent respectivement des lignes, des cellules d’en-tête (souvent stylisé en gras par défaut), et des cellules de données.
Voici ce simple tableau concrètement :
| Variable | Type | Description |
|---|---|---|
| Âge | Entier | Représente l'âge d'une personne en années |
| Revenu | Flottant | Représente le revenu annuel en euros |
| Nombre total de variables | 2 | |
Tables complexes
Les tables HTML peuvent devenir assez complexes lorsqu’elles doivent représenter de grandes quantités de données ou des relations plus détaillées entre les différentes colonnes et lignes. Voici un exemple de table complexe qui utilise des colonnes fusionnées et des lignes fusionnées :
<table id="maTable" border="1">
<thead>
<tr>
<th rowspan="2">Nom</th>
<th colspan="2">Informations Professionnelles</th>
<th rowspan="2">Salaire (€)</th>
</tr>
<tr>
<th>Métier</th>
<th>Niveau</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob Sponge</td>
<td>Data Analyst</td>
<td>Junior</td>
<td>45 000</td>
</tr>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>Senior</td>
<td>60 000</td>
</tr>
<tr>
<td>Bart Simpson</td>
<td>Data Engineer</td>
<td>Intermédiaire</td>
<td>55 000</td>
</tr>
<tr>
<td>Rick Sanchez</td>
<td>Architecte Big Data</td>
<td>Expert</td>
<td>75 000</td>
</tr>
<tr>
<td>Morty Smith</td>
<td>Machine Learning Engineer</td>
<td>Junior</td>
<td>70 000</td>
</tr>
</tbody>
</table>
- Fusion de colonnes colspan : Dans l’en-tête <thead>, la cellule « Informations Professionnelles » couvre deux colonnes (« Métier » et « Niveau »). Cela est réalisé grâce à l’attribut colspan=« 2 ».
- Fusion de lignes rowspan : La cellule « Nom » est fusionnée sur deux lignes d’en-tête, grâce à rowspan=« 2 », pour indiquer que le nom de chaque personne est indépendant des sous-catégories (métier et niveau).
- Structure plus complexe : Ce type de table est particulièrement utile pour présenter des données avec des sous-catégories, comme le niveau de compétence ou des détails supplémentaires sur chaque entrée.
- En utilisant des techniques avancées comme colspan et rowspan, vous pouvez créer des tables qui non seulement structurent vos données de manière claire, mais qui fournissent également un niveau d’information plus complexe, tout en restant facile à lire pour les utilisateurs.
Le résultat est le suivant :
| Nom | Informations Professionnelles | Salaire (€) | |
|---|---|---|---|
| Métier | Niveau | ||
| Bob Sponge | Data Analyst | Junior | 45 000 |
| Alice Wonderland | Data Scientist | Senior | 60 000 |
| Bart Simpson | Data Engineer | Intermédiaire | 55 000 |
| Rick Sanchez | Architecte Big Data | Expert | 75 000 |
| Morty Smith | Machine Learning Engineer | Junior | 70 000 |
Styliser les tables HTML
Bien que certaines propriétés peuvent permettre de personnaliser une table HTML, la méthode privilégiée est bien souvent le CSS.
L’exemple suivant montre une personnalisation relativement simple d’une table HTML :
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table>
<thead>
<tr>
<th>Nom</th>
<th>Métier</th>
<th>Salaire (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob Sponge</td>
<td>Data Analyst</td>
<td>45 000</td>
</tr>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
<tr>
<td>Bart Simpson</td>
<td>Data Engineer</td>
<td>55 000</td>
</tr>
<tr>
<td>Rick Sanchez</td>
<td>Architecte Big Data</td>
<td>75 000</td>
</tr>
<tr>
<td>Morty Smith</td>
<td>Machine Learning Engineer</td>
<td>70 000</td>
</tr>
</tbody>
</table>
Le résultat paraît déjà moins austère :
| Nom | Métier | Salaire (€) |
|---|---|---|
| Bob Sponge | Data Analyst | 45 000 |
| Alice Wonderland | Data Scientist | 60 000 |
| Bart Simpson | Data Engineer | 55 000 |
| Rick Sanchez | Architecte Big Data | 75 000 |
| Morty Smith | Machine Learning Engineer | 70 000 |
En combinant l’utilisation fine du CSS avec les tables, il sera possible d’obtenir des résultats très attrayants visuellement, de mettre en exergue tel ou tel éléments, et bien d’avantage.
Accessibilité et bonnes pratiques
Les tables peuvent poser des problèmes d’accessibilité si elles ne sont pas bien structurées. Cela peut être d’autant plus impactant selon les navigateurs, mais surtout en ce qui concerne les utilisateurs utilisant des lecteurs d’écran. Il s’agit de logiciels permettant aux personnes ayant des déficiences visuelles de naviguer sur un site Internet. Ce logiciel convertit ce qui se trouve sur l’écran en sortie audio ou braille.
Voici quelques bonnes pratiques pour rendre vos tables accessibles :
- Utilisez des en-têtes claires : Les balises <th> aident les lecteurs d’écran à comprendre les en-têtes de colonne. Chaque en-tête doit décrire précisément le contenu de la colonne ou de la ligne, afin que les utilisateurs puissent naviguer facilement dans la table.
- Ajoutez des Attributs scope : Utilisez scope=« col » ou scope= »row » pour indiquer à quelle colonne ou ligne appartient une en-tête. Cela aide les lecteurs d’écran à associer chaque cellule de données avec son en-tête correspondant. Par exemple :
<table border="1">
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Métier</th>
<th scope="col">Salaire (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
Ajoutez une <caption> : Cette balise peut être utilisée pour fournir un titre descriptif à la table. Cela permet aux utilisateurs, y compris ceux utilisant des lecteurs d’écran, de comprendre rapidement le but de la table. Par exemple :
<table border="1">
<caption>Tableau des salaires des employés du pôle Data</caption>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Métier</th>
<th scope="col">Salaire (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
- Privilégiez le CSS pour la personnalisation : Gardez le HTML simple et utilisez le CSS pour la personnalisation. Cela améliore la maintenance et rend le code plus accessible. Par exemple, vous pouvez styliser vos tables avec CSS afin de les rendre plus attrayantes sans alourdir le HTML.
- Tables complexes et association des en-têtes et des cellules : Lorsque vous travaillez avec des tables complexes, où les données sont organisées sur plusieurs niveaux, il est utile d’associer chaque cellule de données à son en-tête à l’aide des attributs headers et id. Cela permet de garantir une meilleure navigation pour les utilisateurs des lecteurs d’écran. Par exemple :
<table border="1">
<thead>
<tr>
<th id="nom">Nom</th>
<th id="metier">Métier</th>
<th id="salaire">Salaire Moyen (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="nom">Alice Wonderland</td>
<td headers="metier">Data Scientist</td>
<td headers="salaire">45 000</td>
</tr>
</tbody>
</table>
Tables et données dynamiques
Il peut être utile de proposer une dynamique aux tableaux proposés. Avec JavaScript, vous pouvez ajouter ou supprimer dynamiquement des lignes, ce qui rend les interfaces plus interactives.
Voici un exemple de script simple qui ajoute une ligne à une table :
<button onclick="ajouterLigne()">Ajouter une ligne</button>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table id="maTable" border="1">
<thead>
<tr>
<th>Nom</th>
<th>Métier</th>
<th>Salaire (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
<script>
function ajouterLigne() {
var table = document.getElementById("maTable").getElementsByTagName('tbody')[0];
var nouvelleLigne = table.insertRow();
var cellule1 = nouvelleLigne.insertCell(0);
var cellule2 = nouvelleLigne.insertCell(1);
var cellule3 = nouvelleLigne.insertCell(2);
cellule1.innerHTML = "Prénom Nom";
cellule2.innerHTML = "Data Engineer";
cellule3.innerHTML = "55 000";
}
</script>
Le bouton permettra ainsi d’ajouter une nouvelle ligne, dans cet exemple, avec des valeurs par défaut.
| Nom | Métier | Salaire (€) |
|---|
Conclusion
Les tables HTML sont puissantes pour présenter des données sous forme structurée, facilitant ainsi la lisibilité et la compréhension des informations. En connaissant les éléments de base comme <table>, <thead>, <tbody>, <tr>, <th>, et <td>, ainsi que des concepts plus avancés comme colspan et rowspan, vous serez en mesure de créer des tableaux sophistiqués et accessibles. D’autant plus en combinant le CSS pour la personnalisation graphique et le Javascript pour rendre le tout interactif. Avec les bonnes pratiques, notamment liées à l’accessibilité, vos tables seront utilisables par le plus grand nombre d’utilisateurs, et également sur un grand nombre de navigateurs.
