Construction de tableau 1

` : Le conteneur principal qui englobe l'ensemble du tableau. `` (Ligne de tableau) : Définit une ligne de tableau. ` ` : Groupe le contenu de l'en-tête. ` ` : Contient le corps principal des données. `` : Définit le pied de page du tableau. `
` (En-tête de tableau) : Définit une cellule d'en-tête (généralement en gras et centrée). `` (Données de tableau) : Définit une cellule standard contenant des données. `
 ` : Ajoute un titre ou une description au-dessus du tableau. ` border` : Définit l'épaisseur de la bordure en pixels. `
`colspan` : Permet à une cellule de s'étendre sur plusieurs colonnes. `rowspan` : Permet à une cellule de s'étendre sur plusieurs lignes. `cellpadding` : Espace entre la bordure de la cellule et son contenu. `cellspacing` : Espace entre les différentes cellules. Gestion des bordures : Par défaut, les tableaux HTML affichent des bordures « doubles » (une pour le tableau et une pour chaque cellule). La propriété la plus importante pour résoudre ce problème est `border-collapse`. Bordures unifiées : Utilisez `border-collapse: collapse;` pour que les cellules partagent une seule bordure fine. Style de bordure : Vous pouvez définir la largeur, le type et la couleur en une seule ligne : `border: 2px solid #3498db; ` Couleurs et « effet zèbre » Vous pouvez améliorer la lisibilité du tableau en colorant les lignes en alternance à l’aide du sélecteur `:nth-child`. Lignes alternées : `tr:nth-child(even) ` colore toutes les lignes paires. En-tête : Il est courant d’attribuer à la balise `
` un arrière-plan différent et un texte clair pour la mettre en valeur. `.table { width: 100%; border-collapse: collapse; /* Supprimer les doubles bordures */ } .tr, td { border: 1px solid #ddd; /* Bordure gris clair */-------------------> Exemple padding: 12px; /* Espacement intérieur des cellules */ text-align: left; } .th { background-color: #4CAF50; /* Fond jaune pour l’en-tête */-------------------> Exemple color: white; } ` /* Texte blanc */ } .tr:nth-child(even) { background-color: #f2f2f2; /* Effet zèbre : colorer les lignes paires *//-------------------> Exemple } .tr:hover { background-color: #ddd; /* Effet de survol -------------------> Exemple */ } Résumé des principales propriétés border-collapse Fusionne les bordures des cellules en une seule (réduction). padding Ajoute un espace entre le texte et la bordure de la cellule. background-color Modifie la couleur d'arrière-plan d'une cellule ou d'une ligne. text-align Aligne le texte (gauche, centre, droite).
ANGEPB Cellule Cellule Cellule Cellule
Cellule Cellule Cellule Cellule Cellule
Cellule Cellule Cellule Cellule Cellule
Cellule Cellule Cellule Cellule Cellule