HTML Tableaux
Les tableaux HTML permettent aux développeurs Web d'organiser les données en lignes et en colonnes.
Exemple
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Définir un tableau HTML
Un tableau en HTML se compose de cellules de tableau situées à l'intérieur de lignes et de colonnes.
Exemple
Un simple tableau HTML :
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Try it Yourself »
Cellules du tableau
Chaque cellule du tableau est définie par une balise <td> et une balise </td>.
td signifie table data (données de table).
Tout ce qui se trouve entre <td> et </td> constitue le contenu de la cellule du tableau.
Remarque : les éléments de données du tableau sont les conteneurs de données du tableau.
Ils peuvent contenir toutes sortes d'éléments HTML ; texte, images, listes, autres tableaux, etc.
Lignes du tableau
Chaque ligne du tableau commence par une balise <tr> et se termine par une balise </tr>.
tr représente table row (la ligne du tableau).
Exemple
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Try it Yourself »
Vous pouvez avoir autant de lignes que vous le souhaitez dans un tableau, assurez-vous simplement que le nombre de cellules est le même dans chaque ligne.
Remarque : Il arrive parfois qu'une ligne puisse contenir moins ou plus de cellules qu'une autre. Vous en apprendrez davantage dans un chapitre ultérieur.
En-têtes de tableau
Parfois, vous souhaitez que vos cellules soient des en-têtes. Dans ce cas, utilisez la balise <th> au lieu de <td> balise:
Exemple
Soit la première ligne les en-têtes du tableau :
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Try it Yourself »
Par défaut, le texte des éléments <th> est en gras et centré, mais vous pouvez modifier cela avec CSS.
HTML Exercices
Balises de tableau HTML
| Étiquette | Description |
|---|---|
| <table> | Définit une table |
| <th> | Définir une cellule d'en-tête dans un tableau |
| <tr> | Définit une ligne dans un tableau |
| <td> | Définit une cellule dans un tableau |
| <caption> | Définir une légende de tableau |
| <colgroup> | Spécifiez un groupe d'une ou plusieurs colonnes dans un tableau pour le formatage |
| <col> | Spécifier les propriétés de colonne pour chaque colonne dans un élément <colgroup> |
| <thead> | Regroupe le contenu de l'en-tête dans un tableau |
| <tbody> | Regroupe le contenu du corps dans un tableau |
| <tfoot> | Regroupe le contenu du pied de page dans un tableau |
Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
HTML - Tableaux - Vidéo W3Schools
Cette vidéo explique ce que sont les tableaux en HTML et comment les créer pour afficher des informations sur des sites Web.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
