Tableaux HTML
Les tableaux HTML permettent d'organiser des données (texte, images, liens) en lignes et colonnes de cellules. Essayez des exemples de tableaux HTML !
En HTML, vous pouvez créer des tableaux pour votre site web en utilisant la balise <table> conjointement avec les balises <tr>, <td> et <th>.
Les tableaux HTML permettent d'afficher des données (par exemple, une image, du texte, un lien) en colonnes et en lignes de cellules. Les lignes d'un tableau peuvent être regroupées en sections d'en-tête, de pied de page et de corps grâce aux éléments <thead>, <tfoot> et <tbody>, respectivement.
En HTML5, on peut placer <tfoot> avant ou après la balise <tbody>. Ces éléments doivent venir après les éléments <caption>, <colgroup> et <thead>.
La plupart des attributs de l'élément <table> ne sont pas utilisés en HTML5. Si vous souhaitez styliser l'apparence du tableau, utilisez plutôt CSS.
Tableaux de données vs. tableaux de mise en page. N'utilisez les tableaux que pour les données tabulaires — des informations qui ont une relation significative entre les lignes et les colonnes. N'utilisez pas les tableaux pour structurer la mise en page (positionner une barre latérale, une barre de navigation, etc.). Les tableaux de mise en page désorganisent les lecteurs d'écran et compliquent le design adaptatif. Pour la mise en page, utilisez plutôt CSS Flexbox ou Grid.
Syntaxe
La balise <table> fonctionne par paires. Le contenu est écrit entre la balise ouvrante <table> et la balise fermante </table>.
Exemple de la balise HTML <table> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Résultat
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
Dans l'exemple donné, nous utilisons la balise <table> pour créer un tableau. Ensuite, nous utilisons la balise <tr> pour diviser le tableau en lignes. La balise <th> est utilisée pour les cellules d'en-tête du tableau, où le titre est écrit. Autrement dit, la ligne du tableau est divisée en titres. La balise <td> est utilisée pour les cellules du tableau où les informations sont écrites.
Regrouper les lignes avec <thead>, <tbody> et <tfoot>
Pour les tableaux de grande taille, vous pouvez regrouper les lignes en une section d'en-tête, une section de corps et une section de pied de page grâce aux éléments <thead>, <tbody> et <tfoot>. Cela rend le balisage plus lisible, vous permet de styliser chaque section indépendamment avec CSS, et aide les navigateurs à répéter l'en-tête et le pied de page lorsqu'un long tableau est imprimé sur plusieurs pages.
Exemple de regroupement des lignes d'un tableau :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>Accessibilité : en-têtes et légendes
Les tableaux peuvent être difficiles à suivre pour les personnes utilisant des lecteurs d'écran, car une cellule isolée (« $80 ») n'a aucun sens sans savoir à quelle ligne et quelle colonne elle appartient. Quelques bonnes pratiques simples permettent de rendre vos tableaux compréhensibles par tous.
Marquez les cellules d'en-tête avec <th>. Une cellule <th> est annoncée comme un en-tête, et les lecteurs d'écran l'utilisent pour étiqueter les cellules de données situées en dessous ou à côté. Utiliser <td> pour les titres — ou simuler des en-têtes avec du texte <td> en gras — supprime cette relation.
Ajoutez un attribut scope. L'attribut scope indique aux technologies d'assistance si un en-tête s'applique à sa colonne ou à sa ligne. Utilisez scope="col" pour les en-têtes de colonne et scope="row" pour les en-têtes de ligne. C'est particulièrement important lorsqu'un tableau possède des en-têtes à la fois en haut et sur le côté gauche.
Exemple d'en-têtes avec l'attribut scope :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<caption>Monthly savings</caption>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<th scope="row">January</th>
<td>$100</td>
</tr>
<tr>
<th scope="row">February</th>
<td>$80</td>
</tr>
</table>
</body>
</html>Donnez au tableau un élément <caption>. Un <caption> est un titre pour l'ensemble du tableau. C'est le premier enfant de l'élément <table> et il est annoncé avant le contenu du tableau, ce qui permet à l'utilisateur d'un lecteur d'écran de savoir à quoi correspond le tableau avant d'y naviguer. Par défaut, il s'affiche en haut du tableau ; vous pouvez le déplacer avec la propriété CSS caption-side.
Exemple de tableau avec un élément <caption> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
caption {
font-weight: bold;
padding: 8px;
}
</style>
</head>
<body>
<table style="width:80%;">
<caption>Delivery schedule</caption>
<tr>
<th scope="col">Month</th>
<th scope="col">Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.02.2014</td>
</tr>
</table>
</body>
</html>Fusion de lignes et de colonnes
Il est possible d'étendre une cellule sur plusieurs lignes ou colonnes. Normalement, une cellule ne peut pas empiéter sur l'espace au-dessus, en dessous ou à côté d'une autre cellule — mais les attributs colspan et rowspan permettent à une cellule d'occuper l'espace de plusieurs autres.
Si vous souhaitez qu'un seul en-tête s'étende sur deux colonnes ou plus, utilisez l'attribut colspan sur la cellule avec le nombre de colonnes qu'elle doit couvrir.
Exemple de la balise HTML <table> avec l'attribut colspan :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Résultat
| Month and Date | |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
Ici, l'en-tête unique <th colspan="2"> se positionne au-dessus des colonnes Month et Date.
La même chose peut être faite avec les lignes, en utilisant l'attribut rowspan. Une cellule avec rowspan="2" s'étend vers le bas dans la ligne suivante, de sorte que la ligne suivante nécessite une cellule de moins. Cela est utile lorsqu'une valeur s'applique à plusieurs lignes consécutives.
Exemple de la balise HTML <table> avec l'attribut rowspan :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">10.01.2014</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
</body>
</html>Résultat
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | (partage la cellule ci-dessus) |
Dans cet exemple, la cellule 10.01.2014 utilise rowspan="2", elle s'étend donc sur les lignes de January et de February, et la ligne February n'a besoin que de la cellule Month.
Balises associées
<table>— le conteneur du tableau<tr>— une ligne de tableau<th>— une cellule d'en-tête<td>— une cellule de données<caption>— le titre du tableau<colgroup>— regroupe les colonnes pour la mise en forme