table_chart Chapitre 7 : Les Tableaux
Salut le pro de l'organisation ! Parfois, les listes ne suffisent pas.
Pour organiser des données en lignes et en colonnes, comme un
emploi du temps, les tableaux sont les rois !
Les 4 balises pour construire un tableau
Construire un tableau, c'est comme dessiner une grille. On utilise 4 balises principales :
<table> : La grande boîte qui contient tout le tableau.
<tr> : Crée une nouvelle ligne (Table Row).
<th> : Une cellule d'en-tête (Table Header). Le texte est automatiquement en gras et
centré.
<td> : Une cellule de donnée normale (Table Data).
Astuce : Ajouter une bordure pour y voir clair
Au début, les tableaux n'ont pas de lignes visibles. Pour les afficher, on peut ajouter
l'attribut border="1" à la balise <table>. C'est une vieille méthode, mais très
pratique pour apprendre !
Le Code
<table border="1">
<tr>
<th>Jour</th>
<th>Activité</th>
</tr> Le Résultat
<tr> Jour Activité
<td>Lundi</td>
<td>Cours de HTML</td> Lundi Cours de HTML
</tr>
<tr> Mardi Construire un robot
<td>Mardi</td>
<td>Construire un
robot</td>
</tr>
</table>
Page 28 - La Structure des Tableaux | Créé par Aymen Gharbi
splitscreen Chapitre 7 : La Fusion Magique
Et maintenant, un tour de magie ! On va apprendre à fusionner des
cellules pour créer des tableaux plus complexes. On utilise pour
cela les attributs colspan et rowspan.
Fusionner des colonnes avec colspan
colspan (pour "column span") permet à une cellule de s'étendre sur plusieurs colonnes.
C'est parfait pour un titre qui doit prendre toute la largeur du tableau.
Le Code
<table border="1">
<tr>
<th colspan="2">Super- Le Résultat
Héros</th>
</tr> Super-Héros
<tr>
Batman 9/10
<td>Batman</td>
<td>9/10</td>
</tr>
</table>
Fusionner des lignes avec rowspan
rowspan (pour "row span") permet à une cellule de s'étendre sur plusieurs lignes. C'est
utile pour une catégorie qui s'applique à plusieurs éléments.
Le Code
<table border="1">
<tr>
<th>Mois</th>
<th>Économies</th>
Le Résultat
</tr>
<tr> Mois Économies
<td
10 €
rowspan="2">Janvier</td> Janvier
<td>10 €</td> (tirelire)
</tr>
<tr>
<td>(tirelire)</td>
</tr>
</table>
Bel Tounsi: Bej tlasa9 des cases (cellules) m3a b3adh'hom. Colspan tlasa9 des cases
bjanb b3adh'hom (fel 3ordh). W rowspan tlasa9 des cases fou9 b3adh'hom (fel toul).
Sahla barcha bech ta3mel des tableaux mnadhmin w chbebin.
Page 29 - La Fusion Magique des Cellules | Créé par Aymen Gharbi
quiz Quiz des Architectes et Organisateurs
Tu es maintenant un vrai pro de la structure ! Testons tes
connaissances sur les balises sémantiques et les tableaux. C'est
parti !
1. Quelle balise sémantique est utilisée pour le menu de navigation principal d'un
site ?
A) <header>
B) <nav>
C) <menu>
2. Pour quel type de contenu la balise <article> est-elle la plus appropriée ?
A) Un article de blog ou une actualité.
B) La barre latérale avec des pubs.
C) Le pied de page du site.
3. Dans un tableau, quelle balise crée une NOUVELLE LIGNE ?
A) <td>
B) <th>
C) <tr>
4. Tu veux qu'une cellule s'étende sur 3 colonnes. Quel attribut vas-tu utiliser ?
A) rowspan="3"
B) colspan="3"
C) fusion="3"
check_circle Réponses et Explications
1. Réponse : B. La balise <nav> est spécialement conçue pour la navigation
principale. <header> est pour l'en-tête et <menu> est une balise plus ancienne et
moins utilisée.
2. Réponse : A. Un <article> est un contenu autonome qui a du sens par lui-
même, comme un article de blog. La barre latérale serait un <aside> et le pied de
page un <footer>.
3. Réponse : C. <tr> signifie "Table Row" (Ligne de Tableau). <td> et <th> sont des
cellules que l'on place à l'intérieur d'une ligne.
4. Réponse : B. colspan est pour les colonnes, et rowspan est pour les lignes (rows).
Facile à retenir !
Page 30 - Le Quiz des Pros | Créé par Aymen Gharbi
Chapitre 8
Parler avec les Visiteurs : Les Formulaires
edit_note
Posons des questions à nos visiteurs !
31
edit_note Chapitre 8 : Les Formulaires Interactifs
Salut ! Et si on laissait nos visiteurs nous parler ? Les formulaires
sont des outils magiques pour leur permettre de nous envoyer des
messages, de s'inscrire, ou de nous donner leur avis. C'est super
important !
Les Briques d'un Formulaire
Pour construire un formulaire, on a besoin de quelques balises essentielles :
<form> : La grande boîte qui contient tous les champs du formulaire.
<label> : L'étiquette qui dit à quoi sert un champ (ex: "Ton nom :").
<input> : Le champ où l'utilisateur va écrire. C'est la balise la plus polyvalente !
<textarea> : Une grande zone de texte pour les longs messages.
<button> : Le bouton pour envoyer le formulaire.
Exemple : Un formulaire de contact simple
Ici, on demande le nom et un message. Remarque comment le for du <label> est lié à
l'id de l'<input>. C'est important pour l'accessibilité !
Le Code
<form> Le Résultat
<label for="nom">Ton nom : Ton nom :
</label><br>
<input type="text" id="nom">
<br> Message :
<label for="message">Message
:</label><br>
<textarea id="message">
</textarea><br>
<button
Envoyer
type="submit">Envoyer</button>
</form>
Page 32 - Les Bases des Formulaires | Créé par Aymen Gharbi
smart_toy Chapitre 8 : Les Super-Inputs
HTML5 a rendu les formulaires beaucoup plus intelligents ! Plus
besoin d'être un génie pour vérifier une adresse email ou afficher
un calendrier. Il suffit d'utiliser le bon type d'input !
Des inputs pour chaque situation
Voici quelques-uns des nouveaux types d'<input> les plus cool :
type="email" : Demande un email et vérifie si le format est correct.
type="password" : Cache les caractères tapés (affiche ●●●●●).
type="number" : Pour les nombres, avec des petites flèches pour
augmenter/diminuer.
type="date" : Affiche un calendrier pour choisir une date facilement.
type="color" : Affiche une palette pour choisir une couleur.
type="range" : Affiche une barre de défilement (slider).
Exemple : Création d'un personnage de jeu
Email du joueur : Mot de passe secret :
Niveau (1-100) : Date de création :
10 mm/dd/yyyy
Couleur de l'armure :
Bel Tounsi: M3a HTML5, el <input> walla 9wey barcha. Ki t7ot type="email", el
navigateur wa7dou ychouf ken el email s7i7 walla lé. Ki t7ot type="date", y5arjelek
calendrier. Ysahhel 3lik w 3al visiteur barcha 5edma !
Page 33 - Les Super-Inputs HTML5 | Créé par Aymen Gharbi