Mise en forme d’un tableau en CSS CSS10

Cet exercice consiste à construire un tableau en HTML et à le mettre en forme en CSS.

Consignes

Créez un dossier racine local qui contiendra la totalité des fichiers de votre exercice.

HTML : Créez une page HTML dans votre dossier racine local.

HTML : Intégrez une feuille de styles interne ou une feuille de styles externe dans votre page html.

HTML : Insérez un tableau composé de 3 colonnes et de 4 lignes.

 

 

 

CSS : Ajoutez une largeur au tableau width et centrez-le dans la page en utilisant des marges automatiques.

CSS : Ajoutez des bordures aux cellules du tableau.


CSS : Supprimez les espaces entre les cellules du tableau en appliquant au tableau la propriété CSS suivante border-collapse: collapse ; pour obtenir le résultat correspondant à l’aperçu.

HTML :  Ajoutez une ligne d’en-tête au tableau.

CSS : Ajoutez une bordure aux cellules de la ligne d’en-tête.

CSS : Ajoutez une marge interne dans les cellules du tableau afin que le texte ne soit plus collé aux bordures.

HTML : Ajoutez les éléments thead et tbody à votre tableau afin de distinguer les lignes d’en-têtes des lignes de contenu.

Références sur la balise HTML thead (site W3schools)

Références sur la balise HTML tbody (site W3schools)

CSS : Modifier la couleur d’arrière-plan des lignes avec une couleur de votre choix différente pour les lignes d’en-têtes et les lignes de contenu. Utilisez la couleur de d’arrière-plan des lignes de l’en-tête pour modifier la couleur des bordures.

CSS / HTML : Alternez les couleurs d’arrière-plan des lignes de contenu paires et impaires.

Deux méthodes à votre disposition :

  1. Ajoutez des classes CSS sur les lignes du tableau
  2. Utilisez le sélecteur nth-child (solution préconisée)

Références sur le sélecteur nth-child (site  W3schools)

CSS : Ajoutez un effet de survol sur les lignes de contenu au survol de la souris.

Correction

La correction de l’exercice est téléchargeable ci-dessous avec une feuille de styles externe :

Correction

Cela peut vous intéresser :

2 réactions sur “ Mise en forme d’un tableau en CSS [CSS10] ”

  1. Patrice GIRAUD Réponse

    Merci pour le sélecteur nth-child ! Je recherchais quelque chose de ce genre, sans en connaître l’existence. Je m’en suis servi pour aligner à gauche les éléments de la première colonne, et centrer ceux de la deuxième. Tout ça en gardant pour chaque élément une simple balise , toute la mise en forme se trouvant dans la classe.
    Un grand gain de temps, et le « TryIt » de W3Schools permet de vérifier qu’on a bien compris le mécanisme avant de se lancer dans l’implémentation du code.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.