HTML
LEÇON 4
Objectif du Cours
L'objectif du cours sur les tableaux en HTML est de vous apprendre à créer et manipuler des tableaux en utilisant les balises HTML appropriées. Vous découvrirez comment structurer les données tabulaires de manière claire et organisée, tout en apprenant les différentes propriétés CSS pour styliser vos tableaux. À la fin du cours, vous serez capable de concevoir des tableaux fonctionnels et esthétiques pour présenter des informations de manière efficace sur une page web.
Introduction
Les tableaux en HTML sont utilisés pour organiser et afficher des données de manière structurée. Ils peuvent être simples ou complexes en fonction des besoins. Voyons en détail comment créer et styliser des tableaux.
Tableau Simple
Un tableau simple est constitué de lignes et de colonnes de cellules de données. Chaque ligne est défini par l'élément < tr > et chaque cellule est définie par l'élément < td >.
Tableau avec En-tête
Les tableaux peuvent avoir une première ligne d'en-têtes définie avec l'élément < th >.
Tableau Structuré
Un tableau peut être structuré en utilisant les éléments < thead >, < tbody >, et < tfoot >.
Styles CSS pour les Tableaux
Améliorons l'apparence de nos tableaux en utilisant des styles CSS.
La propriété border-collapse: collapse assure que les bordures se fusionnent pour un aspect plus propre.
Fusion de Colonnes et de Lignes
Colspan et Rowspan
L'attribut colspan permet de fusionner des colonnes, tandis que rowspan permet de fusionner des lignes.
Fusion de Colonnes (colspan)
Lorsque vous utilisez l'attribut colspan sur une cellule d'une ligne, cela signifie que la cellule va s'étendre sur plusieurs colonnes. Voici comment cela fonctionne :
1. Création du Tableau Complet :
Créez le tableau complet avec toutes les cellules.
2. Élimination des Cellules Redondantes :
Retirez les cellules qui ne sont plus nécessaires après la fusion.
Fusion de Lignes (rowspan)
Lorsque vous utilisez l'attribut rowspan sur une cellule d'une ligne, cela signifie que la cellule va s'étendre sur plusieurs lignes. Voici comment cela fonctionne :
1. Création du Tableau Complet :
Tout d'abord, créez votre tableau complet avec toutes les cellules, y compris celles qui seront fusionnées.
2. Élimination des Cellules Redondantes :
Une fois le tableau créé, vous pouvez retirer les cellules qui ne sont plus nécessaires après la fusion.
En adoptant cette approche méthodique, vous vous assurez que les fusions sont correctement intégrées dans votre tableau.
Fusion avec CSS
Parfois, colspan et rowspan ne suffisent pas. Utilisons du CSS pour personnaliser davantage.
Attributs HTML pour les Tableaux
<table>: Conteneur de tableau<tr>: Ligne de tableau<th>: En-tête de tableau<td>: Cellule de données de tableau<thead>: Section d'en-têtes<tbody>: Section de corps<tfoot>: Section de pied de tableau<colspan>: Fusion de colonnes<rowspan>: Fusion de lignes-
<caption>: Cette balise est utilisée pour ajouter un titre ou une légende à votre tableau.- Attributs
align: Alignement horizontal du titre (top, bottom, left, right).
<colgroup>
Cette balise permet de regrouper des colonnes et de spécifier des propriétés communes pour ces colonnes.
- Attributs
span: Nombre de colonnes regroupées.width: Largeur des colonnes.
<col>
Utilisée à l'intérieur de <colgroup>, cette balise permet de définir les propriétés individuelles des colonnes.
span: Nombre de colonnes regroupées.width: Largeur de la colonne.
Propriétés CSS pour les Tableaux
border: Bordures et ses spécification (taille, style, couleur etc.)border-collapse: Fusion des bordurestext-align: Alignement du textemarginetpadding: pour les espacements
Cette leçon est terminée. Vous pouvez la trouver au format PDF ci-dessous. Merci.
LECON 4 (PDF)
Trouver des Exercices et des Tutorielles ICI
About BKOI SCHOOL
Qu'est-ce que BKOISCHOOL ?
Nous créons des expériences d'apprentissage simplifiées et interactives. L'apprentissage du développement web devrait être facile à comprendre et disponible pour tout le monde, partout ! BKOI SCHOOL est une école pour les développeurs web, couvrant tous les aspects du développement web :
BKOI SCHOOL a été créé en 2024 et tire son nom de la capitale du MALI BAMAKO (BKO).