Chargement...

En-têtes de tableau HTML

Après les tailles, cette leçon marque le sens des libellés : th, scope, caption. Le style reste en CSS.

Pourquoi ce n’est pas un simple `td` gras

Les outils d’assistance ont besoin d’un vrai th. Un td gras peut paraître identique sans sémantique d’en-tête.

Réponse directe

Libellez avec th. Utilisez scope si besoin et <caption> pour le titre. Les valeurs restent en td.

En-têtes de colonnes avec caption

Ligne du haut en th scope="col" plus caption.

Column headers and caption

html

HTML Code

<table>
<caption>Weekly inventory</caption>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Aisle</th>
</tr>
<tr>
<td>Notebook</td>
<td>12</td>
<td>B2</td>
</tr>
<tr>
<td>USB cable</td>
<td>7</td>
<td>A1</td>
</tr>
</table>

Lecture de l’exemple colonnes

caption dans table
th du haut avec scope=col
quantités en td

En-têtes de lignes pour des enregistrements nommés

Le nom de ligne devient th scope="row", souvent combiné aux en-têtes de colonnes.

Row headers with a header row

html

HTML Code

<table>
<caption>Team scores</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Points</th>
<th scope="col">Level</th>
</tr>
<tr>
<th scope="row">Ada</th>
<td>98</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Lin</th>
<td>91</td>
<td>B</td>
</tr>
</table>

Lecture de l’exemple lignes

haut en scope=col
Ada/Lin en scope=row
points en td

Carte scope

Référence rapide des valeurs.

📊 scope attribute values

Value	Typical use	Example cell
col	Header labels a column	Top “Qty” label
row	Header labels a row	Side “Ada” name
colgroup	Header for a group of columns	Advanced multi-header grids
rowgroup	Header for a group of rows	Advanced sectioned tables

Maîtrisez d’abord col et row dans ce cours.

Pratique

Tableau de club à 3 colonnes
caption
th scope=col en haut
th scope=row pour les noms
repassez un nom en td et comparez

Erreurs faciles

td gras sans th
caption hors du table
oublier scope sur grilles mixtes
tout marquer th

Résumé

th marque de vrais en-têtes
scope lie colonne ou ligne
caption titre le tableau
données en td

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 Instructions

Lisez chaque question attentivement
Sélectionnez la meilleure réponse pour chaque question
Vous pouvez refaire le quiz autant de fois que vous le souhaitez
Votre progression sera affichée en haut

Langue