HTML Tables
Les tableaux HTML permettent aux développeurs web d'organiser des données en lignes et en colonnes.
Exemple
| Entreprise | Contact | Pays |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Allemagne |
| Centro comercial Moctezuma | Francisco Chang | Mexique |
| Ernst Handel | Roland Mendel | Autriche |
| Island Trading | Helen Bennett | Royaume-Uni |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italie |
Définir un tableau HTML
Un tableau en HTML se compose de cellules à l'intérieur de lignes et de colonnes.
Exemple
Un tableau HTML simple :
<table>
<tr>
<th>Entreprise</th>
<th>Contact</th>
<th>Pays</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Allemagne</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexique</td>
</tr>
</table> Cellules de tableau
Chaque cellule de tableau est définie par une <td> et une </td> .
td signifie données de tableau.
Tout ce qui se trouve entre <td> et </td> est le contenu d'une cellule de tableau.
Exemple
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table> Remarque : Une cellule de tableau peut contenir toutes sortes d'éléments HTML : texte, images, listes, liens, autres tableaux, etc.
Lignes de tableau
Chaque ligne de tableau commence par un <tr> et se termine par un </tr> .
tr signifie ligne de 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> 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 qu'une ligne puisse avoir moins ou plus de cellules qu'une autre. Vous apprendrez cela dans un chapitre ultérieur.
En-têtes de tableau
Parfois, vous souhaitez que vos cellules soient des cellules d'en-tête de tableau. Dans ces cas, utilisez le <th> au lieu du <td> :
th signifie en-tête de tableau.
Exemple
Que la première ligne soit composée de cellules d'en-tête de tableau :
<table>
<tr>
<th>Personne 1</th>
<th>Personne 2</th>
<th>Personne 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> Par défaut, le texte dans les éléments <th> est en gras et centré, mais vous pouvez changer cela avec CSS.
Balises de tableau HTML
| Balise | Description |
|---|---|
| <table> | Définit un tableau |
| <th> | Définit 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éfinit une légende de tableau |
| <colgroup> | Spécifie un groupe d'une ou plusieurs colonnes dans un tableau pour le formatage |
| <col> | Spécifie les propriétés de colonne pour chaque colonne dans un élément <colgroup> |
| <thead> | Regroupe le contenu d'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 notre Référence des balises HTML .