Wie man Tabellen mit CSS formatiert

Wie Man Tabellen Mit Css Formatiert



Tabellen sind das gebräuchlichste und effektivste Werkzeug, um Daten auf organisierte Weise darzustellen. In früheren Zeiten, vor CSS, war die -Element wurde zum Erstellen reichhaltiger Designlayouts verwendet. Heutzutage werden Layouts jedoch unter Verwendung mehrerer anderer CSS-Eigenschaften erstellt. Genauer gesagt wird das HTML-Element „“ verwendet, um eine Webtabelle zu erstellen, die durch Anwenden verschiedener CSS-Eigenschaften weiter gestaltet werden kann.

Diese Studie führt in Bezug auf das Styling von Tabellen mit CSS.

Wie formatiere ich Tabellen mit CSS?

Um Stile auf die Tabelle anzuwenden, gehen wir die unten angegebenen Schritte durch.





Schritt 1: Erstellen Sie eine Tabelle in HTML



< Tisch >
< Bildbeschriftung > Informationen für Studenten < / Bildbeschriftung >
< Kopf >
< tr >
< th > Name < / th >
< th > Kurs < / th >
< th > Markierungen < / th >
< / tr >
< / Kopf >
< tbody >
< tr >
< td > Wilhelm < / td >
< td > Vernetzung < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Einführung in C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > Einführung in Java < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / Tisch >

Um eine Tabelle in HTML zu erstellen, werden die folgenden HTML-Elemente verwendet:



  • „ ”-Element wird verwendet, um eine Tabelle in HTML zu erstellen.
  • „ ”-Element wird verwendet, um der Tabelle eine Beschriftung hinzuzufügen.
  • „ “ wird verwendet, um die Kopfzeile der Tabelle anzugeben, die normalerweise die Überschriften enthält.
  • „
“ wird für die Additionszeile verwendet.
  • „
    • ” gibt den Hauptteil der Tabelle an.

    Die erstellte Tabelle sieht derzeit so aus:



    Lassen Sie uns weitermachen, um zu sehen, wie diese Tabelle gestaltet wird.



    Schritt 2: Gestalten Sie das „Körper“-Element

    Karosserie {
    Schriftfamilie: Verdana, Geneva, Tahoma, serifenlos;
    Hintergrund- Farbe : RGB ( 233 , 233 , 233 ) ;
    }

    Das -Element wird mit den folgenden CSS-Styling-Eigenschaften angewendet:

    • „ Schriftfamilie „Eigenschaft mit dem Wert“ Verdana, Genf, Tahoma, serifenlos “ wird verwendet, um die vom Browser unterstützte Schriftart anzuwenden. Falls der Browser die erste Schriftart nicht unterstützt, wird die andere verwendet.
    • „ Hintergrundfarbe ”-Eigenschaft legt die Hintergrundfarbe des Elements fest.

    Schritt 3: Gestalten Sie das „Beschriftungs“-Element

    Bildbeschriftung {
    Schriftart- Größe : 25px;
    Text- ausrichten : Center;
    Hintergrund- Farbe : #1C6758;
    Farbe : Maisseide;
    }

    Das

    ” Geben Sie den Inhalt der Überschrift an.
  • „
    • -Element hat folgenden Stil:

    • „ Schriftgröße ”-Eigenschaft wird für die Einstellung der Schriftgröße verwendet.
    • „ Textausrichtung ”-Eigenschaft gibt die Ausrichtung des Texts des Elements an.
    • „ Farbe ”-Eigenschaft bezieht sich auf die Schriftfarbe des Elements.

    Hier ist die Ausgabe des oben bereitgestellten Codes:

    Schritt 4: Rahmen zur Tabelle hinzufügen
    Das ' Grenze ”-Eigenschaft wird verwendet, um einen Rahmen um das Element hinzuzufügen. Es ist eine abgekürzte Eigenschaft, die die Rahmenbreite, den Rahmenstil und die Rahmenfarbe angibt.

    Wenden wir den Rahmen zusammen mit der Polsterung und dem Rand auf die Tabelle an:

    Tisch, th, td {
    Grenze : 2px fest #1C6758;
    Polsterung: 1px 6px;
    Rand: automatisch;
    }

    Hier:

    • „ Grenze ”-Eigenschaft passt den Rahmen um die Tabelle an, indem die Rahmenbreite, der Rahmenstil und die Rahmenfarbe angegeben werden.
    • „ Polsterung “ gibt den Abstand um den Inhalt des Elements an, wobei der erste Wert den Abstand oben-unten definiert und der zweite Wert den Abstand rechts-links des Inhalts hinzufügt.
    • „ Gewinnspanne „Eigenschaft mit dem Wert“ Auto “ fügt gleichmäßigen Abstand um das Element herum hinzu.

    Ausgabe

    Notiz : Wenn wir die Leerzeichen zwischen den Tabellenrändern nicht wollen, verwenden Sie die Eigenschaft border-collapse.

    Schritt 5: Blenden Sie den Randabstand aus der Tabelle ein
    Die Leerzeichen zwischen den Tabellenrändern können entfernt werden, indem Sie das „ Grenze zusammenbrechen ”-Eigenschaft mit dem Wert „collapse“:

    border-collapse: Zusammenbruch;

    Schritt 6: Passen Sie die Tabellengröße an
    Mal sehen, wie man die Tabellengröße anpasst:

    Kopf th {
    Breite : 160px;
    }

    Der Zusatz „ Breite ”-Eigenschaft mit dem

    -Element wird die Tabellengröße automatisch entsprechend anpassen::

    Wir können auch Stile auf die bestimmte Tabellenzelle anwenden. Lassen Sie uns darüber diskutieren!

    Schritt 7: Stilspezifische Tabellenzellen
    Um die bestimmte Tabellenzelle zu formatieren, geben Sie den Klassennamen dieser bestimmten Zelle an. Der folgende Code stellt beispielsweise dar, dass der dritten Zelle der zweiten Zeile ein Klassenname zugewiesen wird „ Markieren “:

    < td Klasse = 'Markieren' > 99 < / td >

    Greifen Sie nun über den Klassennamen in der CSS-Datei auf die Zelle zu:

    .Markieren {
    Hintergrund- Farbe : #0f90d5;
    }

    Das ' .Markieren “ bezieht sich auf das Klassenhighlight des

    		-Elements. Dieses Element wird mit dem „ Hintergrundfarbe ”-Eigenschaft, um die Farbe des Hintergrunds anzugeben.

    Wie wir sehen können, wurde die angegebene Tabellenzelle erfolgreich formatiert:

    Schritt 8: Legen Sie die Schriftfamilie und die Größe der Tabelle fest

    Tisch {
    Schriftfamilie: kursiv;
    Schriftart- Größe : 18px;
    Text- ausrichten : Center;
    }

    Die folgenden CSS-Eigenschaften werden auf das Tabellenelement angewendet:

    • „ Schriftfamilie ”-Eigenschaft legt den Schriftstil des Elements fest.
    • „ Schriftgröße ”-Eigenschaft wird für die Einstellung der Schriftart des Elements verwendet.
    • „ Textausrichtung ”-Eigenschaft wird zum Anpassen der Textausrichtung verwendet.

    Hier ist die Ausgabe:

    Schritt 9: Färbe Reihen in Folge
    Es ist auch erlaubt, Stile auf bestimmte Zeilen oder Spalten anzuwenden. Beispielsweise werden die geraden Zeilen nach dem folgenden Format gestaltet:

    \
    tbody tr:nth-Kind ( auch ) {
    Hintergrund- Farbe : #FFB200;
    }

    Hier:

    • Das ' :n-tes Kind (gerade) Der Pseudoselektor wird verwendet, um ein Argument zu nehmen, das das Muster angibt, auf das das Styling angewendet werden soll.
    • „ Hintergrundfarbe ”-Eigenschaft wird verwendet, um die Hintergrundfarbe des Elements festzulegen.

    Es kann beobachtet werden, dass die Hintergrundfarbe erfolgreich auf die geraden Zeilen angewendet wird:

    Das war alles über das Stylen von Tabellen mit CSS

    Fazit

    Tabellen sind ein wichtiges Werkzeug, um die Daten zu organisieren. Die Tabelle kann mithilfe der HTML-Elemente

    , und mehr erstellt werden. Mehrere CSS-Eigenschaften werden verwendet, um die Tabelle zu stilisieren, wie z. B. Rahmen, Hintergrundfarbe, Schriftfamilie und viele mehr. Zum besseren Verständnis wurde in diesem Artikel ein schrittweises Verfahren zum Gestalten einer Tabelle mit CSS erläutert.

    Andere

    Kategorie

    Beliebte Beiträge

    Was ist AWS Certificate Manager?

    Wie erstelle ich einen neuen Datenbankbenutzer in MySQL?

    Wie greife ich auf die Zwischenschritte eines Agenten in LangChain zu?

    Erstellen Sie Website-Verknüpfungen (.URL), die in Edge - Winhelponline geöffnet werden

    So rufen Sie eine Spalte in MATLAB auf

    Was macht `git stash push` Stash?

    Umgang mit inhaltsbearbeitbaren Änderungsereignissen in JavaScript

    Eine kurze Anleitung für VPC-Peering in AWS?

    So löschen Sie Gruppen mit dem Befehl groupdel in Linux

    Wie klone ich das neueste Commit von GitLab?

    Was ist der Prozess zur Verwendung logischer Operatoren in PowerShell?

    So beheben Sie Browserprobleme unter Windows

    So lösen Sie das Fractional Knapsack-Problem in C++

    So finden Sie die versteckten Dateien über die Linux-Befehlszeile

    Wie installiere ich Windows 7 (Virtual Machine) in VMware?

    So aktualisieren Sie den Raspberry Pi-Kernel

    So ändern Sie eine Textfarbe in LaTeX

    Was sind Operatoren und ihre Typen in der C-Programmierung?

    Ansible Advanced Host List Inventory

    Wie drucke ich Schwarzweiß auf dem MacBook?

    ,