In den frühen Tagen der Webentwicklung waren HTML-Tabellen sehr einfach und es fehlten umfangreiche Styling-Optionen. Heutzutage sind die meisten Tabellen jedoch so gestaltet, dass sie den Benutzern ein ästhetischeres und funktionaleres Erlebnis bieten.
CSS bietet eine Reihe von Attributen für Tabellenstile. Mit diesen Attributen können Sie unter anderem Tabellenzellen trennen, Tabellenränder sowie Tabellenbreite und -höhe festlegen.
Dieses Tutorial erklärt anhand von Beispielen, wie Sie eine Tabelle mit CSS formatieren . Am Ende dieses Tutorials sind Sie ein Experte.
HTML-Tabellen
Der HTML-Code definiert die Struktur der Tabellen. Verwenden Sie das Tag
, um eine Tabelle zu definieren. Die Tags
,
und
geben jeweils Zeilen, Tabellenüberschriften und Inhaltszellen an.
Sehen wir uns eine Beispiel-HTML-Tabelle an. Im folgenden Beispiel haben wir eine Tabelle mit den fünf besten Büchern auf der Bestsellerliste der New York Times für die Woche vom 23. März 2020:
Der Code für unsere Tabelle lautet wie folgt:
Diese Tabelle hat drei Spalten und sechs Zeilen, einschließlich einer Zeile mit `on Ihre Meinung.
Tables CSS
CSS wird verwendet, um Tabellen zu formatieren. Obwohl die obige Tabelle die Daten auf organisierte Weise zeigt, ist sie in einfachem HTML geschrieben (es gibt keine Stile). Durch die Verwendung von CSS können Sie Tabellen besser aussehen lassen.
Es gibt viele CSS-Funktionen, die Sie verwenden können einen Tisch gestalten. Mit CSS können Sie:
Rahmen hinzufügen
Rahmen komprimieren
Rahmenabstand anpassen
Breite und Höhe von a anpassen Tabelle
Padding hinzufügen
Text horizontal ausrichten
Text vertikal ausrichten
Jog Mouse (Hover) Funktion hinzufügen
Zellenfarben festlegen
Legen Sie fest, wie leere Zellen angezeigt werden
Wir werden alle diese Themen in der folgenden Diskussion behandeln.
Rahmen
Angenommen, wir möchten Rahmen um das Array oder um die darin enthaltenen Elemente hinzufügen.
Um Rahmen hinzuzufügen, können wir die Eigenschaft border verwenden. Hier ist ein Beispiel, das die Border-Eigenschaft verwendet, um Rahmen zu einer Tabelle und ihren Zellen hinzuzufügen, einschließlich Header-Zellen:
In unserem Code definieren wir einen durchgezogenen schwarzen Rand, 1 Pixel breit. Hier ist das Ergebnis unseres Codes:
Beachten Sie, dass unsere Tabelle doppelt enthält Ränder Das liegt daran, dass wir einen Rand auf die Tabelle selbst (
), ihre Kopfzeilen (
) und ihre Zellen (
) angewendet haben, doppelte Ränder auf einfache Ränder, wir können die Eigenschaft border-collapse verwenden.
Die Eigenschaft border-collapse wandelt die doppelten Rahmen einer Tabelle in einfache Rahmen um. Der Standardwert der Eigenschaft border-collapse ist eingeklappt. Wenn die Eigenschaft border-collapse den Wert collapse < erhält /code>, Rahmen um ein Array werden reduziert.
Hier ist ein Beispiel für die Eigenschaft b command-collapse in Aktion:
Unser Code gibt zurück:
Unsere Tabelle und ihr Inhalt haben jetzt einen einzigen Rahmen.
Border Spac eng
Sie können die Eigenschaft border-spacing verwenden, um den Abstand zwischen Zellen in einer Tabelle zu definieren.Die Eigenschaft border-spacing definiert den horizontalen und vertikalen Abstand dazwischen Zellen - und zwar in dieser Reihenfolge.
Hier ist ein Beispiel, in dem die Eigenschaft border-spacing in unserer ursprünglichen Tabelle verwendet wird (diejenige ohne reduzierte Ränder):
Unser Code gibt zurück:
Jede unserer Zellen hat einen horizontalen Abstand von 10px und vertikale Ränder.
Breite und Höhe
Mit den Attributen width und height können Sie die Breite und Höhe einer Tabelle und ihrer Eigenschaften angeben .
Angenommen, wir möchten, dass die Breite unserer Tabelle oben (diejenige mit eingeklappten Rändern) der Breite der Webseite selbst entspricht, und angenommen, wir möchten, dass die Höhe jeder Tabellenüberschrift 30 Pixel hoch sein muss unter Verwendung des folgenden CSS-Codes:
Unser Code gibt zurück:
Wie Sie sehen können, hat unsere Tabelle jetzt die Breite von der Webseite dar. Außerdem sind die Spaltenüberschriften in unserer Tabelle 30 Pixel hoch.
Padding
Sie können die Eigenschaft padding verwenden, um etwas Abstand zwischen den Rändern von einzufügen Zellen in einer Tabelle und den Inhalt dieser Zellen. Die Eigenschaft padding kann für die Tags
und
verwendet werden.
Sup, nehmen wir an, wir möchten 10 Pixel Padding um die Zelle herum hinzufügen Inhalt unserer Tabelle einschließlich Kopfzellen. Wir können das mit diesem Code tun:
Unser Code gibt zurück:
Der Inhalt der einzelnen Zeilen und unserer Header-Tabelle jetzt haben 10px Padding an allen Kanten.
Horizontale Textausrichtung
Sie können die Eigenschaft text-align verwenden, um Text auszurichten, der in einem oder
gespeichert ist ein Array. Standardmäßig sind
-Elemente zentriert und
-Elemente linksbündig ausgerichtet.
Die am häufigsten verwendeten Werte des Textausrichtungsattributs sind:< br>
links, Mitte, rechts (unterstützt von allen Browsern außer Microsoft Edge und Internet Explorer)
Start und Ende (unterstützt von allen Browsern außer Microsoft Edge und Internet Explorer )
Angenommen, wir möchten die
-Elemente in unserem Array zentrieren und die
-Elemente links von jeder Zelle ausrichten. Wir können dies mit diesem Code tun:
Unser Code gibt zurück:
In diesem Beispiel haben wir den Text außerhalb der Zelle zentriert. Die Zelle d `Header und Header-Zelltext sind linksbündig ausgerichtet.
Vertikale Textausrichtung
CSS Die Eigenschaft vertical-align wird verwendet, um die vertikale Ausrichtung des Inhalts in der
oder
. Standardmäßig ist der Wert der Eigenschaft vertikale Ausrichtung auf middle gesetzt, was bedeutet, dass der Inhalt vertikal in der Mitte der Zelle ausgerichtet wird.
Angenommen, wir möchten den Text in unseren Zellen
am unteren Rand der Zellen ausrichten. Eventuell tun wir dies mit diesem Code:
