🎨 HTML – Leçon 4 : Tableaux et mise en forme

📘 Objectif

Dans cette leçon, tu vas apprendre deux choses :

• 📊 Comment organiser des données dans un tableau (comme dans Excel)
• 🖋 Comment rendre ton texte plus lisible avec du gras, de l’italique ou des sauts de ligne

📊 Comprendre les tableaux HTML

Un tableau sert à afficher des informations bien rangées, avec des lignes et des colonnes. On l’utilise pour créer des fiches, des listes, des comparatifs…

Voici les balises utilisées :

• <table> : démarre le tableau
• <tr> (table row) : crée une ligne
• <td> (table data) : crée une cellule dans une ligne
• <th> (table header) : cellule d’en-tête (souvent en gras)

Imagine que chaque ligne est une personne, et chaque colonne une info (comme le prénom ou l’âge).

  

    
Nom
    
Âge
  
  

    
Alice
    
25
  
  

    
Bob
    
30
  

    

🖋 Mise en forme du texte (sans CSS)

Voici quelques balises très utiles pour améliorer la présentation de ton texte :

• <strong> : met du texte en gras
• <em> : met du texte en italique
• <br> : ajoute un saut de ligne (comme Enter sur ton clavier)
• <center> : centre un contenu horizontalement (ancienne méthode)

Exemple :

Important : pense à bien structurer ton texte !
Ligne 1
Ligne 2 (en dessous)
    

🛠 Essaie toi-même

<h2>Tableau d'élèves</h2> <table border="1"> <tr> <th>Prénom</th> <th>Classe</th> </tr> <tr> <td>Lina</td> <td>4A</td> </tr> <tr> <td>Mathis</td> <td>3B</td> </tr> </table> <p><strong>Important :</strong> Apprends à <em>structurer</em> ton contenu.</p> <p>Chaque bloc<br>peut être séparé.</p>
Afficher le résultat

🎯 Défi

À toi de jouer !

• ✅ Ajoute une 3e ligne au tableau
• ✅ Mets ton prénom en gras
• ✅ Ajoute un <br> pour faire un saut de ligne