Historique des conversations
Chargement...
Chapitre 6 : Les tableaux en HTML
Chapitre 6 : Les tableaux en HTML
Créer un tableau simple
Un tableau HTML est défini par la balise <table>. Il contient des lignes <tr> et des cellules <td>.
<table>
<tr>
<td>Nom</td>
<td>Âge</td>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>Ajouter un en-tête avec <th>
Les cellules d’en-tête sont définies avec <th> au lieu de <td>.
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>Utiliser les attributs colspan et rowspan
colspan permet d'étendre une cellule sur plusieurs colonnes, et rowspan sur plusieurs lignes.
<table>
<tr>
<th colspan="2">Informations</th>
</tr>
<tr>
<td>Nom</td>
<td>Jean</td>
</tr>
</table>Structure complète d’un tableau
Voici les balises structurantes complètes :
<table>: le tableau<thead>: en-tête du tableau<tbody>: corps du tableau<tfoot>: pied du tableau
<table>
<thead>
<tr><th>Produit</th><th>Prix</th></tr>
</thead>
<tbody>
<tr><td>Pain</td><td>1€</td></tr>
<tr><td>Lait</td><td>1.2€</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">Total : 2.2€</td></tr>
</tfoot>
</table>
Évaluation des acquis
Correction immédiate
Quiz du chapitre 6
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Tableau simple
Atelier #1Crée un tableau 2x2. Une ligne d'en-tête (Nom, Âge) et une ligne de données (Alice, 25).
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
#2 — Fusion de colonnes
Atelier #2Fusionne deux cellules horizontalement avec colspan.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<table>
<tr>
<td colspan="2">Titre fusionné</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
#3 — Fusion de lignes
Atelier #3Fusionne deux cellules verticalement avec rowspan.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<table>
<tr>
<td rowspan="2">Fusion verticale</td>
<td>Ligne 1</td>
</tr>
<tr>
<td>Ligne 2</td>
</tr>
</table>
#4 — Caption
Atelier #4Ajoute une légende (caption) à ton tableau : 'Liste des inscrits'.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<table>
<caption>Liste des inscrits</caption>
<tr>
<td>Alice</td>
</tr>
</table>
#5 — Structure sémantique
Atelier #5Utilise thead, tbody et tfoot pour structurer un tableau.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<table>
<thead>
<tr><th>Produit</th><th>Prix</th></tr>
</thead>
<tbody>
<tr><td>Pomme</td><td>1€</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>1€</td></tr>
</tfoot>
</table>