Django - 2.6 Créer des tableaux HTML avec table, tr, th et td

Un tableau HTML range des données en lignes et en colonnes. Il permet de retrouver rapidement une valeur. Dans cette leçon, nous créons un tableau avec des en-têtes, nous ajoutons des lignes, puis nous affichons une bordure autour du tableau.

La structure de base

La balise table entoure tout le tableau. Chaque ligne s'écrit avec la balise tr. À l'intérieur d'une ligne, les cellules d'en-tête utilisent th, et les cellules de données utilisent td.

Dans la vidéo, la première ligne contient les en-têtes Nom, Prénom et Âge. Une ligne suivante contient les données, avec l'âge 25.

<table>
  <tr>
    <th>Nom</th>
    <th>Prénom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>Valeur</td>
    <td>Valeur</td>
    <td>25</td>
  </tr>
</table>

Ajouter une bordure et des colonnes

L'attribut border avec la valeur 2 affiche une bordure de 2 pixels autour du tableau. Après actualisation, le tableau apparaît avec ses lignes délimitées.

Pour ajouter une colonne, on écrit un nouveau th dans la ligne d'en-tête, puis un td dans chaque ligne de données. La vidéo ajoute ainsi une colonne Revenus, puis une colonne Genre.

En résumé

Un tableau se construit avec table. Chaque ligne est un tr, les en-têtes sont des th et les données sont des td. Pour ajouter une colonne, il suffit d'ajouter un th et un td à chaque ligne.

Points clés

• La balise table entoure l'ensemble du tableau.
• Chaque ligne est écrite avec la balise tr.
• Les en-têtes utilisent th, les données utilisent td.
• L'attribut border ajoute une bordure autour du tableau.
• Une colonne s'ajoute en créant une cellule dans chaque ligne.

Questions fréquentes

Quelle est la différence entre th et td ?

th désigne une cellule d'en-tête, et td une cellule de données.

Que fait l'attribut border avec la valeur 2 ?

Il affiche une bordure de 2 pixels autour du tableau.

Comment ajouter une colonne ?

Ajoutez un th dans la ligne d'en-tête, puis un td dans chaque ligne de données, au même emplacement.