Table CSS Alternative Row Couleur
Nous pouvons colorer les lignes alternatives pour rendre notre table plus conviviale et permettre à l'utilisateur de parcourir rapidement les données. Nous pouvons utiliser la propriété CSS pour modifier la couleur des lignes alternatives pour attirer l'attention de l'utilisateur sur eux. Un sélecteur de style en CSS est utilisé pour changer les lignes alternatives. À l'aide du sélecteur de style CSS, vous pouvez facilement modifier la couleur des lignes alternatives. Le sélecteur Nth-Child () dans CSS prend un paramètre uniforme ou impair, puis modifie la couleur à l'aide de la propriété de couleur d'arrière-plan dans ce sélecteur de style. Dans ce tutoriel, nous modifierons la couleur des lignes pair et étranges de plusieurs manières.
Syntaxe:
| 1 2 3 4 5 | : nth-child (pair / bizarre) // Déclaration CSS; |
Exemple 1:
Créez un fichier HTML pour créer des tables avec des lignes et des colonnes. Utilisez le sélecteur de style CSS pour modifier la couleur des lignes alternatives. Le code Visual Studio est le logiciel que nous utilisons pour exécuter ces exemples. En conséquence, nous devons créer un fichier HTML et saisir le code HTML pour faire le tableau. Le code HTML pour la construction du tableau peut être vu ici, et le fichier doit être enregistré avec le «.Extension html ”.
Ici, nous créons une table et remplissons ses lignes et ses colonnes avec des données. Le "
Le code donné est utilisé pour colorer les lignes alternatives de la table que nous avons générées. Parce que c'est notre fichier CSS dans lequel nous utilisons le sélecteur de style CSS pour modifier la couleur alternative des lignes, elle est enregistrée avec le «.Extension de fichier CSS. Nous utilisons la propriété «bordure-bordure» pour styliser d'abord la table, ce qui contrôle si la frontière de la table s'effondre en une seule bordure ou si elle est divisée. Nous le configurons pour «s'effondrer» dans ce cas. À la suite de l'utilisation, nous avons maintenant une seule bordure de table. La largeur de cette table est définie sur «100%."
Ensuite, il y a «th» et «td» qui représentent respectivement l'en-tête et les cellules simples. Maintenant, coiffez-les en appliquant la propriété «Text-Align» qui aligne le texte à l'intérieur des cellules à la «gauche» pendant que nous la définissons. Nous avons également réglé son «rembourrage» sur «8px». Après cela, pour changer la couleur des lignes alternatives, nous utilisons le sélecteur de style CSS que nous donnons à la propriété «: nth-child ()». Par conséquent, la couleur des lignes uniques change. La propriété «Color en arrière-plan» est utilisée ici pour changer la couleur de la ligne uniforme en «gris clair» et le code de cette couleur est «# f2f2f2».
En appuyant sur le «Alt + B» dans le fichier HTML que nous avons préparé précédemment, la sortie s'affiche à l'écran. Les lignes uniformes apparaissent dans une couleur différente, car nous appliquons le sélecteur de style aux rangées uniformes de la table.
Exemple n ° 2:
Dans cet exemple, nous modifions la couleur des lignes étranges de la table précédente que nous avons construite dans le premier exemple. Nous ne changeons pas la table; Nous changeons juste la couleur des lignes des lignes étranges ici. La largeur de la table est «à 100%.«Ensuite, nous avons le« TH »et le« TD ». Nous définissons le «Text-Align» sur «gauche."Le texte à l'intérieur des cellules de la table est positionné sur le côté gauche de la cellule. Le «rembourrage» crée un espace entre la bordure de la table et les données qui sont tapées dans les cellules de la table.
Ainsi, ce «rembourrage» est défini sur «10px». Il est utilisé pour créer un tampon «10px» entre le contenu de la table et la bordure. Nous ajustez maintenant la couleur des lignes «étranges» de la table. Nous utilisons donc la propriété «nth-child ()» ici. La couleur des lignes uniformes change si nous le donnons à la propriété «: nth-child ()». Ici, la propriété «fond-couleur» est utilisée pour modifier la couleur de la ligne uniforme en «gris clair» en utilisant le code de couleur «# f2f2f2."
Vous pouvez voir que la couleur des lignes impairs change dans cette sortie car la couleur des lignes «étranges» alternatives est modifiée. Et la couleur d'arrière-plan des seules rangées devient gris.
Exemple # 3:
Dans notre troisième exemple, nous utilisons le même sélecteur de style CSS que nous avons utilisé dans les codes précédents pour modifier les couleurs des lignes uniques et étranges. Cependant, nous utilisons une seule table et changeons la couleur de même et des lignes étranges. Ici, la couleur de la «bordure» est «noir». La largeur de la frontière est à peu près «2px». Et le type de frontière fabriqué est solide dans la propriété «frontière» de CSS.
De plus, la frontière est «effondrée», il apparaît donc comme une seule bordure. Le «100%» est sélectionné comme «largeur». Ensuite, nous avons le «TH» et le «TD» et alignons son texte sur le «Centre» en utilisant le «Text-Align». Nous utilisons le rembourrage «6px» pour ces. Encore une fois, la bordure de l'en-tête et des cellules est définie sur «2px» «largeur», type «solide» et couleur «noir». La couleur des lignes change lorsque nous utilisons le sélecteur de style. Le sélecteur de style est appliqué au nombre «pair» de lignes. Nous définissons la couleur du fond des lignes pour les lignes uniformes sur «jaune-vert» au début. Nous voulons également changer la couleur des lignes «impaises», nous utilisons donc à nouveau ce sélecteur de style et cette fois, nous mettons le «bizarre» comme paramètre du sélecteur «nth-child ()» et définissons son «arrière-plan» Couleur "à" vert clair ". En conséquence, la couleur des lignes impaises change en «vert clair».
Les lignes alternatives dans cette sortie sont colorées différemment. Les lignes uniques sont jaunes-vert, tandis que les rangées étranges sont vert clair. En utilisant le sélecteur de style CSS, vous pouvez modifier la couleur des lignes alternatives.
Exemple n ° 4:
Ceci est notre dernier exemple et nous allons créer une nouvelle table contenant quatre colonnes et six rangées. Maintenant, nous utilisons les deux sélecteurs ici dans ce code pour modifier la couleur de la ligne uniforme ainsi que la couleur de la ligne étrange.
Ici, nous stylissons un peu le titre en utilisant la propriété «Text-Align» et en la fixant au «centre». De plus, nous avons mis la police «Font-Family» à la police «algérienne». La police «couleur» de cette rubrique est «rouge». La police «Table» est définie sur «Arial» et le «border-rollapse» est également défini sur «s'effondrer» dans cet exemple. La «largeur» est définie sur «100px». Les propriétés utilisées ici pour le «TH» et le «TD» sont les mêmes que dans les exemples précédents. Ici, la couleur de la ligne «pair» est définie sur «vert clair» et la couleur de ligne «étrange» est définie sur «Green de mer clair» en utilisant le sélecteur «Nth-Child ()».
La sortie est rendue ci-dessous et vous observerez que les lignes uniformes sont de la même couleur et que les lignes impaires sont également des mêmes couleurs. Ceci est le résultat de l'utilisation du sélecteur «Nth-Child ()» dans notre code CSS.
Conclusion
Ce guide a démontré comment modifier les couleurs de ligne alternatives en utilisant le sélecteur CSS Nth-Child (). Nous avons couvert comment cela fonctionne avec un nombre impair de lignes ainsi qu'avec un nombre égal de lignes. Nous avons utilisé la propriété «Color d'arrière-plan» qui est utilisée pour modifier la couleur des lignes. Nous avons utilisé le sélecteur nith-child () pour appliquer les différentes couleurs aux lignes alternatives de ce guide, et nous avons parcouru chaque code en profondeur. Nous avons également inclus le code HTML et CSS ainsi que la sortie. En conséquence, vous acquiz beaucoup de connaissances sur le concept CSS de modification de la couleur des lignes alternatives.