Les 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 ex. image, texte, lien) dans des colonnes et des lignes de cellules. Les lignes de tableau peuvent être regroupées en sections d'en-tête, de pied de page et de corps via les éléments <thead>, <tfoot> et <tbody>, respectivement.
En HTML5, nous pouvons placer <tfoot> soit avant soit après la balise <tbody>. Elles doivent suivre tout élément <caption>, <colgroup> et <thead>.
La plupart des attributs de l'élément <table> ne sont plus utilisés en HTML5. Si vous souhaitez styliser l'apparence du tableau, vous pouvez utiliser CSS à la place.
Fusionner plusieurs lignes et colonnes
Il est possible d'étendre les lignes et colonnes d'un tableau sur plusieurs autres lignes et colonnes.
En règle générale, une cellule de tableau ne peut pas chevaucher l'espace situé en dessous ou au-dessus d'une autre cellule. Cependant, si vous souhaitez étendre une cellule sur plusieurs lignes ou colonnes, vous pouvez utiliser les attributs colspan ou rowspan.
Ajouter des légendes aux tableaux
Vous pouvez utiliser l'élément <caption> pour spécifier une légende pour les tableaux. Il doit être placé immédiatement après la balise d'ouverture <table>. Par défaut, la légende se trouve en haut du tableau, mais sa position peut être modifiée grâce à la propriété CSS caption-side.
Syntaxe
La balise <table> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture <table> et la balise de fermeture </table>.
Exemple de la balise HTML <table> :
Exemple de tableau HTML|W3Docs
<!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 ci-dessus, 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. En d'autres termes, la ligne de tableau est divisée en en-têtes. La balise <td> est utilisée pour les cellules de tableau où les informations sont saisies.
Si vous souhaitez afficher l'en-tête dans une seule cellule, vous pouvez utiliser l'attribut colspan.
Exemple de la balise HTML <table> avec l'attribut colspan :
Exemple de tableau HTML avec un attribut colspan|W3Docs
<!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 |
| February |
La même opération peut être réalisée avec les lignes, en utilisant l'attribut rowspan.
Exemple de la balise HTML <table> avec l'attribut rowspan :
Exemple de tableau HTML avec un attribut rowspan|W3Docs
<!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 |
Pratique
Quelles sont les fonctions et les caractéristiques d'un tableau HTML ?