HTML Academy · Leçon

table, tr, td et th

Créez des tableaux simples avec des lignes, des cellules de données et des cellules d’en-tête.

table, tr, td et th est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Tableaux HTML

Les tableaux affichent des données en lignes et en colonnes. Utilisez-les pour des données tabulaires — et non pour la mise en page.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

Les éléments table, tr et td

Éléments essentiels d’un tableau :

<table> — le conteneur du tableau
<tr> — une ligne du tableau
<td> — une cellule de données
<th> — une cellule d’en-tête du tableau (en gras et centrée par défaut)

th ou td

Utilisez <th> pour les cellules d’en-tête — elles ont une signification sémantique :

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

Structure de base d’un tableau

Un tableau minimal, mais complet :

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

Bordures de tableau avec CSS

Par défaut, les navigateurs affichent les tableaux sans bordures. Ajoutez-en avec CSS :

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

Les tableaux ne servent pas à la mise en page

Dans les années 1990, les tableaux servaient à structurer la mise en page. Cette pratique est obsolète et nuisible :

Les lecteurs d’écran interprètent les tableaux comme des données — les tableaux de mise en page déroutent les utilisateurs
Les tableaux sont peu flexibles sur les petits écrans
CSS Grid et Flexbox ont remplacé tous les besoins de mise en page
Utilisez <table> uniquement pour de véritables données tabulaires

Tableaux adaptatifs

Les tableaux débordent sur les petits écrans. Entourez-les d’un conteneur permettant le défilement horizontal :

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Cellules vides

Gérez les cellules vides de manière explicite :

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

Aperçu de thead et tbody

Les tableaux doivent utiliser <thead> et <tbody> pour séparer les lignes d’en-tête des lignes de données — ce point sera abordé dans la prochaine leçon :

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

col et colgroup pour styliser les colonnes

Appliquez des styles à des colonnes entières avec <colgroup> et <col> :

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

Bandes alternées avec CSS

Alternez les couleurs des lignes pour faciliter la lecture :

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

Vérification rapide

Quelle est la différence entre td et th dans un tableau ?

Récapitulatif : table, tr, td et th

Notions essentielles des tableaux :

<table> — conteneur du tableau
<tr> — ligne du tableau
<td> — cellule de données
<th> — cellule d’en-tête (sémantique, en gras par défaut)
Utilisez border-collapse: collapse pour obtenir des bordures nettes
Les tableaux servent uniquement aux données — pas à la mise en page

Questions Fréquemment Posées

La leçon « table, tr, td et th » est-elle gratuite ?

Oui — le texte complet de « table, tr, td et th » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « table, tr, td et th » ?

Créez des tableaux simples avec des lignes, des cellules de données et des cellules d’en-tête. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « table, tr, td et th » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à HTML Academy