Einführung in CSS Table Styling

Wir verwenden CSS, obwohl wir HTML-Tabellen verwenden können, weil in der HTML-Tabelle ein tabellenbasiertes Seitenlayout häufig langsamer dargestellt wird als ein entsprechendes CSS-basiertes Layout. Dies gilt insbesondere für Seiten mit viel Inhalt. Tabellen sollten nicht als Layouthilfe verwendet werden. Und wenn wir HTML-Tabellen ohne Stile oder Attribute im Browser erstellen, wird dies ohne Rahmen angezeigt. Durch das Stylen einer Tabelle mit CSS kann das Erscheinungsbild verbessert werden.

CSS-Tabellen sind ziemlich einfach zu verstehen und zu verwenden. Es ist nur eine Frage der Erinnerung an die entsprechenden CSS-Anzeigeeigenschaftswerte für die grundlegenden HTML-Tabellenelemente. Mit Hilfe von CSS sind wir in der Lage, einige stilvolle Tabellen zu erstellen.

Was ist das CSS-Tabellen-Styling?

In einer CSS-Tabelle (Cascading Style Sheets) wird beschrieben, wie eine Reihe von Elementen in Zeilen und Spalten angeordnet wird. Das auf eine HTML-Tabelle angewendete Standard-CSS ist eine CSS-Tabelle.

  • CSS hat Flexibilität entworfen und neu gestaltet.
  • Ein CSS-basiertes Layout stellt sicher, dass Sie alle Ihre Stile (dh von kleinen Änderungen an den Hauptregeln) an einem Ort platzieren.
  • Indem Sie die in diesem Stylesheet festgelegten Layoutregeln ändern, wirken Sie sich auf jede Seite aus, die darauf verweist.
  • CSS-basiertes Seitenlayout wird normalerweise schneller auf dem Bildschirm angezeigt und sogar der Download ist schneller als das tabellenbasierte Layout.

CSS-Tabellenstileigenschaften

Nachfolgend sind die verschiedenen Eigenschaften der CSS-Tabellenstile aufgeführt:

1. Randeinsturz

Hiermit wird angegeben, ob die Rahmen um die Zellen einer Tabelle getrennt oder reduziert werden sollen.

Syntax: border-collapse: separate|collapse|initial|inherit;

  • Randzusammenbruch: Separat: Wird verwendet, damit die angrenzenden Zellen ihre eigenen und unabhängigen Ränder haben, die nicht gemeinsam genutzt werden.

Syntax

border-collapse: separate;

Der Standardwert für die Eigenschaft border-collapse ist separat. Wenn sie voneinander getrennt sind, platzieren Browser mithilfe der Eigenschaft border-spacing einen Abstand von einigen Pixeln zwischen den einzelnen Zellen.

Code

Ausgabe:

  • Border Collapse: Collapse: Wenn wir die Eigenschaft border-collapse auf collapse setzen, wird der Abstand zwischen den Zellen entfernt.

Syntax

border-collapse: collapse;

Code

Ausgabe :

Auch wenn Sie dieses Leerzeichen entfernen, indem Sie das Cellspacing-Attribut für das HTML-Tag auf 0 setzen, werden in Browsern weiterhin doppelte Rahmen angezeigt. Das heißt, der untere Rand einer Zelle wird über dem oberen Rand der Zelle darunter angezeigt, was zu einer Verdoppelung der Grenzlinien führt. Wenn Sie die Eigenschaft border-collapse auf collapse setzen, wird sowohl der Abstand zwischen den Zellen als auch das Verdoppeln der Grenzlinien vermieden.

  • Border Collapse: initial: Hiermit wird die Eigenschaft border-collapse auf den Standardwert gesetzt.
  • Border Collapse: Erben: Wird verwendet, wenn die Eigenschaft border-collapse von ihren übergeordneten Elementen erbt. Diese Eigenschaft funktioniert nur, wenn sie auf a angewendet wird Etikett.

    Werte: kollabieren, trennen, initialisieren, erben;

    2. Randabstand

    Es legt den Raum neben den Grenzen und den Inhalt um die Tabelle fest. Es ähnelt dem Zellenabstand des Tags

    Attribut, außer es hat einen optionalen zweiten Wert. Diese Eigenschaft funktioniert nur, wenn sie auf a angewendet wird
    Etikett.

    Syntax

    border-spacing: Length|initial|inherit;

    Der Randabstand nimmt normalerweise ein oder zwei Längenwerte an. Hier wird nur ein Wert angegeben, der sowohl den horizontalen als auch den vertikalen Abstand zwischen den Zellen definiert.

    Code

    Ausgabe:

    Wenn zwei Werte angegeben werden, definiert der erste Wert den horizontalen Abstand zwischen den Zellen (den Abstand zu beiden Seiten jeder Zelle) und der zweite Wert den vertikalen Abstand zwischen den Zellen. (der Raum, der den Boden einer Zelle vom oberen des darunter liegenden trennt).

    3. Beschriftungsseite

    Die Eigenschaft caption-side gibt die Platzierung einer Tabellenüberschrift an. Wenn diese Eigenschaft auf eine Tabellenüberschrift angewendet wird, bestimmt sie, ob die Überschrift oben oder unten in der Tabelle angezeigt wird. Normalerweise wird eine Beschriftung oben in der Tabelle angezeigt.

    Syntax

    caption-side: top|bottom|initial|inherit;

    Diese Eigenschaft kann einen der vier Werte annehmen:

    • Beschriftungsseite: oben: Dies ist der Standardwert. Darin wird die Beschriftung über der Tabelle eingefügt.

    Syntax: caption-side:top;

    Code

    Ausgabe:

    • Beschriftungsseite: Unten: Die Beschriftung wird unter der Tabelle platziert.

    Syntax: caption-side:bottom;

    Code

    Ausgabe:

    • Beschriftungsseite: initial: Hiermit wird die Eigenschaft auf den Standardwert gesetzt.
    • Caption-side: inherit: Übernimmt diese Eigenschaft vom übergeordneten Element.

    Werte: oben, unten, initial, erben;

    4. Leere Zellen

    Hiermit wird dem Browser mitgeteilt, ob eine Tabellenzelle angezeigt werden soll, die vollständig leer ist. Es steuert das Rendern der Rahmen und des Hintergrunds der Zellen, die keinen sichtbaren Inhalt in einer Tabelle haben, die das getrennte Rahmenmodell verwendet.

    Syntax: empty-cells: show|hide|initial|inherit;

    Diese Eigenschaft kann einen der vier Werte annehmen:

    • Leere Zelle: show: Mit dieser Eigenschaft werden die Ränder der leeren Zelle angezeigt.

    Syntax: empty-cells: show;

    Code

    Ausgabe:

    • Leere Zelle: verbergen: Diese Eigenschaft wird verwendet, um die Rahmen in der leeren Zelle zu verbergen.

    Syntax: empty-cells: hide;

    Code

    Ausgabe:

    • Leere Zelle: initial : Hiermit wird die Eigenschaft auf den Standardwert gesetzt.
    • Empty-cell: inherit: Übernimmt diese Eigenschaft vom übergeordneten Element.

    Werte: Anzeigen, Verbergen, Initialisieren, Erben;

    5. Tabellenlayout

    Steuert, wie ein Webbrowser eine Tabelle zeichnet, und kann die Geschwindigkeit, mit der der Browser sie anzeigt, geringfügig beeinflussen. Diese Eigenschaft kann einen der vier Werte annehmen.

    Syntax: table-layout: auto|fixed|initial|inherit;

    Die Standardeigenschaft ist auto.

    1. Tabellenlayout: Auto: Mit Auto wird die Breite der Elemente automatisch an den Inhalt angepasst.

    2. Tabellenlayout: behoben : Die feste Einstellung zwingt den Browser, alle Spalten mit der gleichen Breite wie die Spalten in der ersten Zeile zu rendern. Wenn der Inhalt breiter als die erste Zeile wird, wird der Inhalt außerhalb der Zellen umgebrochen, abgeschnitten oder erweitert.

    Code

    Ausgabe:

    3. Tabellenlayout: initial: Es wird verwendet, um die Eigenschaft auf ihren Standardwert zu setzen.

    4. Tabellenlayout: inherit: Erbt diese Eigenschaft vom übergeordneten Element.

    Fazit

    Mit Hilfe von CSS können wir stilvolle Tabellen erstellen und das Erscheinungsbild der Tabelle verbessern.

    Empfohlene Artikel

    Dies ist eine Anleitung zum CSS Table Styling. Hier diskutieren wir Eigenschaften mit Codes, Ausgaben und Syntax des CSS-Tabellenstils. Sie können auch unsere Artikel durchgehen, um mehr zu erfahren -

    1. Vorteile von CSS
    2. Verwendung von CSS
    3. Einführung in CSS
    4. CSS-Textformatierung

    Kategorie:

    Web-Entwicklungstools