So stylen Sie Tische mit CSS

Cascading Style Sheets (CSS) werden hauptsächlich in Kombination mit HTML zu Stilelementen wie Tabellen, Text, Schaltflächen und Bildern verwendet. Insbesondere ist eine typische HTML-Tabelle nicht benutzerfreundlich und leicht verständlich. Daher sollten Sie die erforderliche Tabelle mit CSS erstellen, um ihr Erscheinungsbild zu verbessern.

Dieser Blog wird das Verfahren des Stylings demonstrieren Tische Verwendung CSS. Also lasst uns anfangen!

Was sind Tabellen in HTML

Tische werden als wesentliche Komponente von einem angesehen Html dokumentieren. Es kann mit der “erstellt werden

"Tag und die Untertabelsetiketten""Für Reihen", "

”Für Spalten und“

”Für Tischkopfzeile. Alle genannten Tags sind das grundlegende Tisch -Tag. Für Stylingtische können jedoch CSS -Stileigenschaften verwendet werden.

Im Folgenden sind einige wichtige und grundlegende CSS -Eigenschaften angegeben, die beim Wechsel des Tischstils helfen:

Fügen Sie Grenzen hinzu
Grenzen einstellen
Kollapsgrenzen
Breite und Höhe des Tisches einstellen
Vertikalen Text ausrichten
Horizontale Text ausrichten
Polsterung hinzufügen
Definieren Sie Zellfarben

Wir werden nun alle oben gegebenen CSS-Eigenschaften diskutieren, um HTML-Tabellen mit geeigneten Beispielen zu stylen.

Stiltabellen mit CSS -Grenzeigenschaften

CSS bietet eine „Grenz“ -Spertion an, die zum Hinzufügen von Grenzen in einer Tabelle verwendet wird. Um eine Grenze hinzuzufügen, können Sie das folgende Beispiel annehmen.

Beispiel
Das untergegebene Beispiel zeigt einen Feststoff an “Schwarz"Grenze zu"1px"Breite für den ganzen Tisch"Tisch", Header"th"Und Spalten"td”:

Lehrer	Student
Alice	Markieren
Luice	Greif

Ausgang

Style Table Border unter Verwendung der CSS -Breite Eigenschaft

Im vorherigen Beispiel haben Sie die Methode gesehen, um einen Rand um eine Tabelle in CSS einzulegen. Das Gegebene "GrenzeEigenschaft gibt die Breite nicht an, da Sie sie möglicherweise entsprechend Ihren Anforderungen anpassen möchten. Schauen Sie sich dazu das angegebene Beispiel an.

Beispiel
In diesem Beispiel erstellen wir eine HTML -Tabelle und stylen sie so, dass er den gesamten Scan mit voller Breite umfasst100%”:

Vollbreite der Tabelle

Lehrer	Student
Alice	Markieren
Luice	Greif

Ausgang

Stiltabellen mit CSS-Border-Collapse-Eigenschaft

Wie Sie sehen können, hat die im oben gegebene Beispiel für jede Zeile und Spalte erstellte Tabelle, die möglicherweise keinen angemessenen Blick auf eine Website verleiht. CSS ermöglicht es Ihnen jedoch zu Zusammenbruch Die Grenzen in einen einzelnen Grenze mit dem “Grenzkollapse" Eigentum.

Beispiel
Jetzt werden wir das nutzen “Grenzkollapse”Eigenschaft, um die erstellte Tabelle mit einem einzigen Rand für Zeilen und Spalten zu stylen:

Tischgrenzen kollabieren

Lehrer	Student
Alice	Markieren
Luice	Greif

Ausgang

Stiltabelle mit CSS -Breite und Höheneigenschaften

In CSS, die “Breite" Und "HöheEigenschaften werden hauptsächlich zur Änderung der Tabellenmatrizen verwendet. Zum Beispiel werden wir im folgenden Beispiel die Tabelle festlegen Breite als "90%" und das Höhe der Tischkopfzelle als “90px”:

Styling -Tabellen mit CSS

Beispiel für die Einstellung von Höhe und Breite:

Lehrer	Student
Alice	Markieren
Luice	Greif

Ausgang

Style-Tabellenzellen-Ausrichtung mithilfe von CSS vertikaler Aligneigenschaften

CSS “vertikaler AusrichtungDie Eigenschaft wird zum Ausrichten des Textes in der Tabellenzelle von oben, unten oder in der Mitte verwendet. Sie müssen jedoch auswählen, ob die Zeile oder die Spalten vertikal ausgerichtet werden soll. Überprüfen Sie das angegebene Beispiel:

Stylingtische in HTML

Beispiel für die Einstellung der vertikalen Ausrichtung

Lehrer	Student
Alice	Markieren
Luice	Greif

Das obige Beispiel richtet den Tischzelltext vertikal nach unten aus:

Style Table-Zellen-Ausrichtung unter Verwendung von CSS-Horizontal-Align-Eigenschaft

CSS bietet Angebote “horizontaler AlignEigentum zum Zweck der horizontalen Ausrichtung des Textes. Diese Eigenschaft kann helfen, den Text nach links, rechts oder in der Mitte auszurichten:

Stylingtische in HTML

Beispiel für die Einstellung der horizontalen Ausrichtung

Lehrer	Student
Alice	Markieren
Luice	Greif

Das oben gegebene Beispiel richtet den in der Tabellenzelle hinzugefügten Text in Bezug auf Unterseite:

Stiltische mit CSS -Polstermobilie

Der "Polsterung”CSS -Eigenschaft wird verwendet, um die Räume zwischen Textzellen und Rand zu kontrollieren. Es wird hauptsächlich für die verwendet

Und

Elemente.

Beispiel

Stylingtische in HTML

Beispiel für die Verwendung von Padding -Eigenschaften

Lehrer	Student
Alice	Markieren
Luice	Greif

Die folgenden Bilder bedeutet, dass wir erfolgreich „20px“ -Polster zwischen dem Rand und dem Zelltext hinzugefügt haben:

Stiltabellen mit CSS-Hintergrund-Farben-Eigenschaft

Mit CSS können Sie Farben für jede Tabelle, Zeile oder Zelle für jede Tabelle separat definieren. Beispielsweise enthält die folgende Tabelle die Hintergrund des Tischkopfes “th" als "orange” Farbe und alles "N-te Kind (sogar)"Sogar Anzahl der Zeilen"tr" werde haben "grau" Hintergrundfarbe:

Farbiger Tischkopf

Lehrer	Student
Alice	Markieren
Luice	Greif

Ausgang

Abschluss

Zu Stil html Tische können Sie verwenden Verschiedene CSS -Eigenschaften Zum Hinzufügen und Anpassen von Grenzen, Erzeugen von Kollapsgrenzen, Einstellungsbreite und Höhe der Tabelle, horizontal oder vertikaler Text, Hinzufügen von Polsterung oder Anpassung von Zeilen, Spalten oder Zellen mit den angegebenen Farben. Dieser Blog hat die Verwendung verschiedener CSS -Eigenschaften für Stiltabellen für eine Webseite gezeigt. Versuchen Sie ihnen, HTML -Tische auf neue Weise zu stylen!