CSS-Styling von Tabellen

Einführung

In diesem Lab lernen Sie die grundlegenden CSS-Eigenschaften kennen, die zum Stylen von HTML-Tabellen verwendet werden. Standardmäßig sind HTML-Tabellen schlicht und können schwer zu lesen sein. Mit CSS können Sie eine einfache Tabelle in eine gut strukturierte, optisch ansprechende und leicht verständliche Datenpräsentation verwandeln.

Wir beginnen mit einer einfachen HTML-Tabelle und wenden schrittweise Stile darauf an. Sie lernen, wie Sie Rahmen verwalten, Abstände hinzufügen, die Kopfzeile gestalten und Text innerhalb der Zellen ausrichten.

Die notwendige index.html-Datei wurde bereits für Sie erstellt. Ihre Aufgabe ist es, CSS-Code in der styles.css-Datei zu schreiben, um die Tabelle zu stylen. Sie können Ihre Änderungen in Echtzeit im Tab "Web 8080" Ihres Arbeitsbereichs anzeigen.

Setze border-collapse auf collapse für die Tabelle

In diesem Schritt beginnen wir mit dem Stylen unserer Tabelle. Standardmäßig haben HTML-Tabellenzellen ihre eigenen individuellen Rahmen, was zu einem "Doppelrahmen"-Look führen kann, der dick und veraltet aussieht. Die border-collapse-Eigenschaft steuert, ob Tabellenrahmen getrennt oder zu einem einzigen Rahmen zusammengefasst werden.

Wir setzen border-collapse auf collapse, um saubere, einzeilige Rahmen zu erstellen.

Öffnen Sie zuerst die Datei styles.css im Dateiexplorer auf der linken Seite. Fügen Sie die folgende CSS-Regel zur Datei hinzu.

table {
  border-collapse: collapse;
}

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei. Obwohl Sie noch keine Rahmen sehen werden, ist diese Eigenschaft für den nächsten Schritt unerlässlich. Sie können zum Tab "Web 8080" wechseln, um die Live-Vorschau zu sehen, obwohl die visuelle Änderung in diesem Stadium minimal sein wird.

Wende border 1px solid black auf th und td an

Nachdem wir die Tabelle so eingestellt haben, dass sie ein zusammengeklapptes Rahmenmodell verwendet, fügen wir nun die tatsächlichen Rahmen zu den Kopfzellen (th) und Datenzellen (td) hinzu. Wir können beide Elemente gleichzeitig mit einem durch Kommas getrennten Selektor ansprechen.

In diesem Schritt fügen Sie jeder Zelle in der Tabelle einen 1px soliden schwarzen Rahmen hinzu.

Fügen Sie die folgende CSS-Regel zu Ihrer styles.css-Datei hinzu, unterhalb der bestehenden table-Regel.

th,
td {
  border: 1px solid black;
}

Speichern Sie die Datei und wechseln Sie zum Tab "Web 8080". Sie sollten nun einen sauberen, einzeiligen Rahmen um jede Tabellenzelle sehen.

Verwende padding 8px für Tabellenzellen

Die Tabelle hat nun Rahmen, aber der Inhalt innerhalb der Zellen berührt die Ränder, was gedrängt aussieht. Wir können die padding-Eigenschaft verwenden, um Abstand zwischen dem Inhalt und dem Zellrahmen zu schaffen und so die Lesbarkeit zu verbessern.

In diesem Schritt fügen Sie allen Tabellenzellen 8px Padding hinzu.

Ändern Sie die bestehende th, td-Regel in styles.css, um die padding-Eigenschaft einzuschließen.

th,
td {
  border: 1px solid black;
  padding: 8px;
}

Nachdem Sie die Datei gespeichert haben, überprüfen Sie erneut den Tab "Web 8080". Sie werden feststellen, dass die Zellen nun größer sind und der Text einen angenehmen Abstand darum hat.

Füge background-color zur Tabellenkopfzeile hinzu

Um den Tabellenkopf von den Datenzeilen abzuheben, ist es üblich, ihm eine andere Hintergrundfarbe zu geben. Dies trennt die Spaltentitel visuell vom Inhalt.

In diesem Schritt fügen Sie den Kopfzellen (th) eine hellgraue Hintergrundfarbe hinzu.

Fügen Sie eine neue CSS-Regel hinzu, die nur die th-Elemente in styles.css anspricht.

th {
  background-color: #f2f2f2;
}

Speichern Sie die Datei und betrachten Sie das Ergebnis im Tab "Web 8080". Die Kopfzeile Ihrer Tabelle sollte nun eine deutliche Hintergrundfarbe haben, die sie leicht erkennbar macht.

Implementiere text-align left für Datenzellen

Die Textausrichtung ist entscheidend für die Lesbarkeit von Tabellen. Standardmäßig sind Kopfzellen (th) zentriert ausgerichtet, während Datenzellen (td) linksbündig ausgerichtet sind. Obwohl linksbündige Ausrichtung der Standard für td-Elemente ist, ist es eine gute Praxis, diese explizit festzulegen, um eine konsistente Darstellung über alle Browser hinweg zu gewährleisten.

In diesem Schritt legen Sie die Textausrichtung für Datenzellen explizit auf links fest.

Fügen Sie eine neue CSS-Regel für den td-Selektor in Ihrer styles.css-Datei hinzu.

td {
  text-align: left;
}

Speichern Sie die Datei. Da dies das Standardverhalten ist, sehen Sie möglicherweise keine visuelle Änderung im Tab "Web 8080", aber Ihr Stylesheet ist nun robuster und expliziter bezüglich des beabsichtigten Designs. Damit ist das grundlegende Styling unserer Tabelle abgeschlossen.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs! Sie haben erfolgreich eine einfache HTML-Tabelle in eine gestylte, professionell aussehende Tabelle umgewandelt, indem Sie grundlegende CSS-Eigenschaften verwendet haben.

In diesem Lab haben Sie gelernt, wie Sie:

• border-collapse: collapse; verwenden, um saubere, einzelne Rahmen für eine Tabelle zu erstellen.
• Einen border für Tabellenkopfzellen (th) und Datenzellen (td) anwenden.
• Internen Abstand zu Zellen mit der padding-Eigenschaft hinzufügen.
• Den Tabellenkopf durch Setzen einer background-color hervorheben.
• Die horizontale Ausrichtung von Text innerhalb von Zellen mit text-align steuern.

Diese Fähigkeiten sind unerlässlich, um tabellarische Daten effektiv im Web darzustellen.