Un tableau HTML permet d'organiser des informations en lignes et en colonnes. Dans ce cours, vous allez apprendre à créer un tableau simple, à ajouter des lignes et à nommer clairement vos colonnes.
Introduction aux tableaux
Un tableau est utile quand vous devez afficher des données qui vont naturellement ensemble, par exemple des horaires, des tarifs ou un petit comparatif.
Le principe est simple : on crée un conteneur avec <table>, puis on ajoute des lignes. Dans chaque ligne, on place ensuite des cellules.
Pour un tableau très simple, vous allez surtout rencontrer trois balises :
-
<table>pour contenir tout le tableau -
<tr>pour créer une ligne -
<th>pour écrire une cellule d'en-tête, souvent utilisée pour nommer une colonne
Vous verrez aussi souvent la balise <td>. Elle sert à écrire les cellules normales du tableau, c'est-à-dire les données elles-mêmes.
<table>
<tr>
<th>Prénom</th>
<th>Ville</th>
</tr>
<tr>
<td>Sarah</td>
<td>Lyon</td>
</tr>
</table>
| Prénom | Ville |
|---|---|
| Sarah | Lyon |
Ici, la première ligne sert à nommer les colonnes, puis la ligne suivante contient les données.
Attention ! Un tableau ne sert pas à fabriquer toute la mise en page d'une page web. Il sert uniquement à afficher des données sous forme de tableau.
Les lignes avec <tr>
La balise <tr> signifie table row. En français, cela veut simplement dire ligne de tableau.
Chaque fois que vous écrivez un nouveau <tr>, vous créez une nouvelle ligne. Ensuite, dans cette ligne, vous placez les cellules dont vous avez besoin.
Plus vous ajoutez de lignes, plus votre tableau contient d'informations.
<table>
<tr>
<th>Prénom</th>
<th>Ville</th>
</tr>
<tr>
<td>Sarah</td>
<td>Lyon</td>
</tr>
<tr>
<td>Karim</td>
<td>Lille</td>
</tr>
</table>
| Prénom | Ville |
|---|---|
| Sarah | Lyon |
| Karim | Lille |
Dans cet exemple, le tableau contient trois lignes au total. La première est la ligne d'en-tête, et les deux suivantes contiennent des données.
Retenez surtout ceci : un tableau avance ligne par ligne. C'est souvent la manière la plus simple de le construire sans se perdre.
Les colonnes avec <th>
La balise <th> signifie table header. Elle sert à créer une cellule d'en-tête.
Très souvent, on place ces cellules dans la première ligne du tableau pour indiquer le nom de chaque colonne. Par exemple : Prénom, Ville ou Âge.
Il faut bien faire la différence :
-
<th>nomme une colonne ou une ligne -
<td>contient une donnée normale
<table>
<tr>
<th>Prénom</th>
<th>Ville</th>
<th>Âge</th>
</tr>
<tr>
<td>Sarah</td>
<td>Lyon</td>
<td>24</td>
</tr>
</table>
| Prénom | Ville | Âge |
|---|---|---|
| Sarah | Lyon | 24 |
Grâce à ces en-têtes, le tableau devient tout de suite plus lisible. On comprend rapidement à quoi correspond chaque donnée.
Pour aller plus loin
Maintenant que vous savez créer la structure de base d'un tableau, vous pouvez continuer avec le cours Titre et légende pour apprendre à donner un vrai titre à votre tableau et à mieux présenter son contenu.