Pour faciliter la lecture des tableaux, il est souvent utile de styliser les lignes avec des couleurs d'arrière-plan alternées. L'une des manières les plus courantes de styliser les tableaux consiste à définir la couleur d'arrière-plan de toutes les autres lignes. C'est ce qu'on appelle souvent les « zébrures ».
Vous pouvez y parvenir en définissant une ligne sur deux avec une classe CSS, puis en définissant le style de cette classe. Cela fonctionne, mais ce n'est pas la façon la meilleure ou la plus efficace de s'y prendre. Lorsque vous utilisez cette méthode, chaque fois que vous devez modifier ce tableau, vous devrez peut-être modifier chaque ligne du tableau pour vous assurer que chaque ligne est cohérente avec les modifications. Par exemple, si vous insérez une nouvelle ligne dans votre tableau, la classe doit être modifiée pour chaque autre ligne en dessous.
CSS facilite le style des tables avec des rayures zébrées. Vous n'avez pas besoin d'ajouter de supplément HTML attributs ou classes CSS, vous utilisez simplement le: nth-of-type (n) Sélecteur CSS.
Le sélecteur: nth-of-type (n) est une pseudo-classe structurelle en CSS qui vous permet de styliser les éléments en fonction de leurs relations avec les éléments parents et frères. Vous pouvez l'utiliser pour sélectionner un ou plusieurs éléments en fonction de leur ordre de 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é (comme pair ou impair), un nombre ou une formule.
Par exemple, pour styliser toutes les autres balises de paragraphe avec une couleur d'arrière-plan jaune, votre document CSS inclurait:
p: nième de type (impair) {
fond: jaune ;
}
Commencez avec votre tableau HTML
Tout d'abord, créez votre tableau comme vous l'écririez normalement en HTML. N'ajoutez aucune classe spéciale aux lignes ou aux colonnes.
Dans votre feuille de style, ajoutez le CSS suivant:
tr: nième de type (impair) {
couleur d'arrière-plan: #ccc ;
}
Cela stylisera une ligne sur deux avec une couleur de fond grise en commençant par la première ligne.
Styliser les colonnes en alternance de la même manière
Vous pouvez appliquer le même type de style aux colonnes de vos tableaux. Pour ce faire, changez simplement le tr dans votre classe CSS en td. Par example:
td: nième de type (impair) {
couleur d'arrière-plan: #ccc ;
}
Utilisation de formules dans un sélecteur de nième de type (n)
La syntaxe d'une formule utilisée dans le sélecteur est an+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 commence à 0.
- + est un opérateur, qui peut aussi être "-"
- b est un entier et représente la valeur de décalage — par exemple, combien de lignes vers le bas le sélecteur doit-il commencer à appliquer la couleur d'arrière-plan. Ceci est obligatoire si un opérateur est inclus dans la formule.
Par exemple, si vous souhaitez définir une couleur d'arrière-plan pour chaque 3e ligne, votre formule serait 3n+0. Votre CSS pourrait ressembler à ceci:
tr: nième de type (3n+0) {
fond: gris ardoise ;
}
Outils utiles pour l'utilisation du sélecteur de nième type
Si vous vous sentez un peu intimidé par l'aspect formule de l'utilisation du sélecteur de type nième de pseudo-classe, essayez le: nième site de testeur comme un outil utile qui peut vous aider à définir la syntaxe pour obtenir l'apparence que vous souhaitez. Utilisez le menu déroulant pour sélectionner nth-of-type (vous pouvez également expérimenter ici d'autres pseudo-classes, telles que nth-child).