Tabellen

Meistere die Kunst der Datenpräsentation

Mit CSS kannst du deine Tabellen nicht nur nützlich, sondern auch richtig schick machen. Farben und Hintergründe lassen sie erstrahlen, während Ränder und Rahmen für die nötige Portion Eleganz sorgen. Eine Tabelle soll schließlich auch mal aus dem Vollen schöpfen dürfen! Die Wahl der passenden Schriftarten und Ausrichtungen macht deine Daten nicht nur lesbar, sondern präsentiert sie wie Stars auf der Bühne.

Du kannst auch mit Farbakzenten und unterschiedlichen Schriftgrößen eine kleine Hierarchie schaffen, um wichtige Informationen auf den Thron zu heben. Und denk daran: Deine Tabelle soll auf jedem Gerät glänzen, ob auf einem riesigen Monitor oder einem winzigen Smartphone.

Los geht’s

Tabellenmagie

Tabellenmagie

CSS-Zauber und andere Mysterien

Mit CSS kannst du deine Tabellen mit individuell gestalteten Rahmen aufpeppen. Die border-Eigenschaft erlaubt es dir, Dicke, Farbe und den Stil der Linien nach Belieben anzupassen. Und falls du es lieber aufgeräumt magst, sorgt border-collapse dafür, dass die Abstände zwischen den Zellen minimiert werden.

td {
    border: 1px solid grey;
    padding: 10px;
    text-align: center;
    vertical-align: bottom;
}

th:hover {
    background-color: red;
}

Die Tabelle füllt die gesamte Fenster-breite aus. Dank border-collapse gibt es keine Rahmenabstände, und die Zellen haben einen Innenabstand, mit ausgerichteter Schrift. Der th nimmt beim darüberfahren mit der Maus die Hintergrundfarbe rot an.

weitere Eigenschaften für Tabellen

text-align: center: Zentriert den Text in den Tabellenzellen – damit es aussieht, als hätten sich die Buchstaben ordentlich hingesetzt.
vertical-align: bottom: Lässt den Inhalt am unteren Rand der Zellen Platz nehmen, für eine etwas entspanntere Haltung.

background-color: Verleiht deinen Tabellenzellen ein bisschen Farbe und sorgt so für visuelle Highlights.
hover: Beim Schweben des Mauszeigers ändern sich die Hintergrundfarben der Zellen, was eine interaktive visuelle Rückmeldung schafft – fast, als würden sie zurückwinken!

In dieser Lektion hast du gelernt…

Wie du mit border und border-collapse die Darstellung deiner Tabelle beeinflusst, um saubere und klare Strukturen zu schaffen.
Warum padding in Tabellenzellen wichtig ist, um Inhalte optisch angenehmer und lesbarer zu gestalten.
Auf welche Weise du text-align und vertical-align nutzt, um den Text in den Zellen präzise auszurichten.
Wozu du background-color und hover-Effekte einsetzen kannst, um deine Tabelle interaktiver und optisch ansprechender zu gestalten.
Wie du mit CSS-Stilen für th und td unterschiedliche visuelle Effekte für Kopf- und Inhaltszellen deiner Tabelle erzeugst.

Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!

Das verflixte Rezept

In einem verlassenen Alchemistenlabor, wo die Spinnweben die wahren Meister sind, liegt ein altes Rezept, das aussieht, als hätte ein betrunkener Troll es geschrieben. Doch keine Sorge – mit CSS bringst du Ordnung ins Chaos! Verwandle die Tabelle in ein Meisterwerk: Lass die Schrift glänzen, die Zutaten magisch schimmern und die Anweisungen vor Eleganz nur so strahlen. Wer weiß, vielleicht zauberst du am Ende nicht nur ein Rezept, sondern auch ein Lächeln auf das Gesicht des nächsten Alchemisten!

Deine Aufgabe: Erstelle eine schöne Tabelle

Breiten und Rahmen setzen:
Setze für die Tabelle eine Breite von 100% und sorge dafür, dass die Rahmen mithilfe von border-collapse zusammengeführt werden.
Hintergrund- und Schriftfarben anpassen:
Füge für den Kopfbereich (<thead>) eine Hintergrundfarbe und eine Schriftfarbe hinzu. Setze auch für die Zeilen im Hauptteil (<tbody>) Hintergrundfarben.
Hover-Effekt anwenden:
Erstelle einen Hover-Effekt für die Zeilen im <tbody>, damit die Zeile beim Überfahren hervorgehoben wird.
Schriftfamilie verwenden:
Verwende eine Standard-Schriftart (Arial) für die gesamte Tabelle, um die Schrift ansprechend zu gestalten.

Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!

Editor in neuem Tab öffnen

CSS

/* body */
body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Grundlegende Tabellenstruktur */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
}

/* Tabellenrahmen */
th,
td {
    border: 2px solid forestgreen;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

/* Hintergrundfarben und Schriftfarben */
thead {
    background-color: darkgreen;
    color: white;
}

tbody tr {
    background-color: lightgreen;
}

tfoot {
    background-color: forestgreen;
    color: white;
}

/* Hover-Effekt */
tbody tr:hover {
    background-color: yellowgreen;
    color: black;
}

Weiter geht’s