Pour faciliter la lecture des tableaux, il est souvent utile de styliser les lignes en alternant les couleurs d'arrière-plan. L'une des méthodes les plus courantes pour styliser les tableaux consiste à définir la couleur d'arrière-plan de chaque ligne. Ceci est souvent appelé "zébrures".
Pour ce faire, définissez une classe CSS sur une ligne sur deux, puis définissez le style de cette classe. Cela fonctionne, mais ce n’est pas le meilleur ni le plus efficace des moyens. Lorsque vous utilisez cette méthode, chaque fois que vous devez modifier cette table, vous devrez peut-être modifier chaque ligne de la table pour vous assurer que chaque ligne est cohérente avec les modifications. Par exemple, si vous insérez une nouvelle ligne dans votre table, une classe sur deux en dessous doit modifier la classe.
CSS facilite le style des tableaux avec des zébrures. Vous n'avez pas besoin d'ajouter d'attributs HTML ni de classes CSS supplémentaires, vous utilisez simplement le sélecteur CSS: nth-of-type (n).
Le sélecteur: nth-of-type (n) est une pseudo-classe structurelle en CSS qui vous permet de styliser des éléments en fonction de leurs relations avec les éléments parent et frères. Vous pouvez l'utiliser pour sélectionner un ou plusieurs éléments en fonction de leur ordre source. En d'autres termes, il peut correspondre à chaque élément qui est le nième enfant d'un type particulier de son parent.
La lettre n peut être un mot clé (par exemple, impair ou pair), un chiffre ou une formule.
Par exemple, pour attribuer une couleur de fond jaune à toutes les autres balises de paragraphe, votre document CSS comprendrait les éléments suivants:
p: nième de type (impair) { fond: jaune;}
Commencez avec votre table HTML
Commencez par créer votre tableau comme vous le feriez normalement en HTML. N'ajoutez pas de classes spéciales aux lignes ou aux colonnes.
Dans votre feuille de style, ajoutez le CSS suivant:
tr: nième de type (impair) { couleur de fond: #ccc;}
Cela donnera un style à toutes les autres lignes avec une couleur de fond grise commençant par la première ligne.
Style des colonnes alternantes de la même manière
Vous pouvez appliquer le même style aux colonnes de vos tableaux. Pour ce faire, changez simplement le tr de votre classe CSS en td. Par exemple:
td: nth-de-type (impair) { couleur de fond: #ccc;}
Utilisation de formules dans un sélecteur de type de type (n)
La syntaxe d'une formule utilisée dans le sélecteur est un + b.
- a est un nombre qui représente la taille du cycle ou de l'index.
- n est en fait la lettre "n" et représente un compteur, qui étoiles à 0.
- + est un opérateur, qui peut aussi être "-"
- b est un entier et représente la valeur de décalage - par exemple, le nombre de lignes vers le bas si le sélecteur doit commencer à appliquer la couleur d'arrière-plan. Cela est nécessaire si un opérateur est inclus dans la formule.
Par exemple, si vous souhaitez définir une couleur d'arrière-plan pour chaque troisième ligne, votre formule sera 3n + 0. Votre CSS pourrait ressembler à ceci:
tr: nième de type (3n + 0) { fond: slategray;}
Outils utiles pour utiliser un sélecteur de type de type
Si l'aspect de la formule consistant à utiliser le sélecteur de type de type de pseudo-classe, essayez le site: nth Tester comme un outil utile pour vous aider à définir la syntaxe permettant d'obtenir l'apparence souhaitée. Utilisez le menu déroulant pour sélectionner nth de type (vous pouvez également expérimenter ici d'autres pseudo-classes, telles que nth-child).
