CSS -Tabelle Alternative Zeilenfarbe

Wir können die alternativen Zeilen färben, um unsere Tabelle benutzerfreundlicher zu gestalten und dem Benutzer die Daten schnell überfliegen zu können. Wir können die CSS -Eigenschaft verwenden, um die Farbe der alternativen Zeilen zu ändern, um die Aufmerksamkeit des Benutzers auf sie zu lenken. Ein Stilwähler in CSS wird verwendet, um die alternativen Zeilen zu ändern. Mit dem CSS -Style -Selektor können Sie die Farbe der alternativen Zeilen leicht ändern. Der Selektor n-Child () in CSS nimmt einen geraden oder einen ungeraden Parameter und ändert dann die Farbe mithilfe der Hintergrund-Farben-Eigenschaft in diesem Stilwähler. In diesem Tutorial werden wir die Farbe der geraden und seltsamen Zeilen auf verschiedene Weise ändern.

Syntax:

Beispiel 1:

Erstellen Sie eine HTML -Datei, um Tabellen mit Zeilen und Spalten zu erstellen. Verwenden Sie den CSS -Style -Selektor, um die Farbe der alternativen Zeilen zu ändern. Der Visual Studio -Code ist die Software, mit der wir diese Beispiele ausführen. Infolgedessen müssen wir eine HTML -Datei erstellen und den HTML -Code eingeben, um die Tabelle zu erstellen. Der HTML -Code zum Erstellen der Tabelle kann hier angezeigt werden, und die Datei muss mit dem "gespeichert werden" gespeichert werden.HTML ”Erweiterung.

Hier erstellen wir eine Tabelle und bevölkern ihre Zeilen und Spalten mit Daten. Der "”Wird verwendet, um die Headerzellen der Tabelle zu definieren, die“”Wird verwendet, um die Zeilen der Tabelle zu definieren und die“”Wird verwendet, um die Datenzelle in Zeilen zu erstellen. Dann im Inneren ""Tag, wir fügen die Daten zu diesen Zellen hinzu, und diese""Tags befinden sich im"Tag, das eine Zeile darstellt. Wir bevölkern alle Zeilen mit den Daten. Nachdem wir diese einfache Tabelle generiert haben, müssen wir sie stylen und die Farbe der alternativen Zeilen mit dem Style Selector ändern.

Der angegebene Code wird verwendet, um die alternativen Zeilen der von uns generierten Tabelle zu färben. Da es sich um unsere CSS -Datei handelt, in der wir den CSS -Selektor verwenden, um die alternative Farbe der Zeilen zu ändern, wird sie mit dem „gespeichert“ gespeichert “.CSS ”Dateierweiterung. Wir verwenden die Eigenschaft „Border-Collapse“, um die Tabelle zuerst zu stylen, wodurch steuert. Wir konfigurieren es in diesem Fall auf "Zusammenbruch". Infolge der Nutzung haben wir jetzt einen einzelnen Tischgrenze. Die Breite dieser Tabelle ist auf „100 Prozent) eingestellt.”

Dann gibt es „Th“ und „TD“, die den Kopf- bzw. einfachen Zellen darstellen. Stylen Sie diese nun, indem Sie die Eigenschaft „Text-Align“ anwenden, die den Text innerhalb der Zellen auf die „linke“ ausrichtet, während wir ihn festlegen. Wir haben auch seine „Polsterung“ auf „8PX“ gesetzt. Um die Farbe der alternativen Zeilen zu ändern. Daher ändert sich die Farbe der gleichmäßigen Reihen. Die Eigenschaft „Hintergrundfarbe“ wird hier verwendet, um die Farbe der geraden Zeile in "hellgrau" zu ändern, und der Code für diese Farbe lautet "#f2f2f2".

Durch Drücken der "Alt+B" in der zuvor erstellten HTML -Datei wird die Ausgabe auf dem Bildschirm angezeigt. Die gleichmäßigen Zeilen erscheinen in einer anderen Farbe, da wir den Stilwählers auf die gleichmäßigen Reihen der Tabelle anwenden.

Beispiel #2:

In diesem Beispiel ändern wir die Farbe der ungeraden Zeilen der vorherigen Tabelle, die wir im ersten Beispiel konstruiert haben. Wir ändern die Tabelle nicht; Wir ändern einfach die Zeilenfarbe der ungeraden Reihen hier. Die Breite der Tabelle beträgt „100 Prozent."Dann haben wir das" th "und" td ". Wir setzen die "Text-Align" auf "links".”Der Text in den Zellen der Tabelle ist auf der linken Seite der Zelle positioniert. Die „Polsterung“ schafft einen Raum zwischen dem Rand der Tabelle und den Daten, die in den Zellen der Tabelle tippt werden.

Diese "Polsterung" ist also auf "10px" eingestellt. Es wird verwendet, um einen „10px“ -Puffer zwischen dem Inhalt der Tabelle und dem Rand zu erstellen. Wir passen jetzt die Farbe der „seltsamen“ Zeilen des Tisches an. Also verwenden wir hier die Eigenschaft „n-Child ()“. Die Farbe der gleichmäßigen Zeilen ändert sich, wenn wir sie der Eigenschaft „: n-child ()“ geben. Hier wird die Eigenschaft „Hintergrundfarbe“ verwendet, um die Farbe der geraden Zeile mit dem Farbcode „#F2F2F2 auf„ hellgrau “zu ändern.”

Sie können sehen, dass sich die Farbe der ungeraden Zeilen in dieser Ausgabe ändert, da die Farbe der alternativen „ungeraden“ Zeilen geändert wird. Und die Hintergrundfarbe nur der ungeraden Reihen wird grau.

Beispiel #3:

In unserem dritten Beispiel verwenden wir denselben CSS -Stilwähler, den wir in den vorherigen Codes verwendet haben, um die Farben von gleichmäßigen und ungeraden Zeilen zu ändern. Wir verwenden jedoch eine einzelne Tabelle und ändern die Farbe der gleichmäßigen und ungeraden Zeilen. Hier ist die Farbe des „Grenze“ „schwarz“. Die Breite des Randes ist ungefähr „2px“. Und die Art der Grenze ist in der „Grenze“ von CSS solide fest.

Außerdem ist die Grenze „zusammengebrochen“, so dass sie als einzelne Grenze erscheint. Das "100%" wird als "Breite" ausgewählt. Dann haben wir das "Th" und "TD" und richten seinen Text mit der "Text-Align" mit dem "Zentrum" aus. Wir verwenden die „6PX“ -Polsterung dafür. Auch hier ist der Rand für die Überschrift und die Zellen auf "2px" "Breite", "fester" und "schwarz" Farbe eingestellt. Die Farbe der Zeilen ändert sich, wenn wir den Style -Selektor verwenden. Der Stilwähler wird auf die „gleichmäßige“ Anzahl von Zeilen angewendet. Wir setzen die Zeilenhintergrundfarbe für die geraden Reihen zunächst auf „gelbgrün“ auf „Gelbgrün“. Wir möchten auch die Farbe der „seltsamen“ Zeilen ändern, daher verwenden wir diesen Stilwähler wieder und diesmal setzen wir den „seltsamen“ als Parameter des „N-Child ()“ -Selektors ein und setzen seinen „Hintergrund- Farbe "zu" hellgrün ". Infolgedessen ändert sich die Farbe der ungeraden Reihen zu „hellgrün“.

Die alternativen Zeilen in dieser Ausgabe sind unterschiedlich gefärbt. Die gleichmäßigen Reihen sind gelbgrün, während die ungeraden Zeilen hellgrün sind. Durch die Verwendung des CSS -Style -Selektors können Sie die Farbe der alternativen Zeilen ändern.

Beispiel Nr. 4:

Dies ist unser letztes Beispiel und wir werden eine neue Tabelle mit vier Spalten und sechs Zeilen erstellen. Jetzt verwenden wir die beiden Selektoren hier in diesem Code, um die gleichmäßige Zeilenfarbe sowie die ungerade Zeilenfarbe zu ändern.

Hier stylen wir die Überschrift ein wenig, indem wir die Eigenschaft „Text-Align“ verwenden und in das „Zentrum“ setzen. Außerdem setzen wir die "Schriftfamilie" auf "algerische" Schriftart. Die Schriftart "Farbe" dieser Überschrift ist "rot". Die Schriftart "Tabelle" ist auf "Arial" eingestellt und der "Grenzkollapse" ist in diesem Beispiel ebenfalls auf "zusammengebrochen" eingestellt. Die "Breite" ist auf "100px" eingestellt. Die hier für das „Th“ und „TD“ verwendeten Eigenschaften sind die gleichen wie in den vorherigen Beispielen. Hier ist die „gleichmäßige“ Reihenfarbe auf „hellgrün“ und die „seltsame“ Reihenfarbe wird auf „helles Meeresgrün“ eingestellt, indem der Selektor „n-Child ()“ verwendet wird.

Die Ausgabe wird unten wiedergegeben und Sie werden feststellen. Dies ist das Ergebnis der Verwendung des Selektors „N-Child ()“ in unserem CSS-Code.

Abschluss

Dieser Leitfaden hat gezeigt, wie die alternativen Zeilenfarben mithilfe des CSS N-CHild () -Selectors ändert. Wir haben behandelt, wie es sowohl mit einer ungeraden Anzahl von Zeilen als auch mit einer geraden Anzahl von Zeilen funktioniert. Wir haben die Eigenschaft „Hintergrundfarbe“ verwendet, mit der die Farbe von Zeilen geändert wird. Wir haben den Selektor n-Child () verwendet, um die verschiedenen Farben auf die alternativen Zeilen in diesem Handbuch anzuwenden, und wir haben jeden Code eingehend durchgesehen. Wir haben auch den HTML- und CSS -Code sowie die Ausgabe eingeschlossen. Infolgedessen erhalten Sie viel Wissen über das CSS -Konzept, die Farbe der alternativen Zeilen zu ändern.