CSS - Tabellen

Willkommen, ambitionierte Web-Entwickler! Heute tauchen wir in die Welt der CSS-Tabellen ein. Als dein freundlicher Nachbarschaftsinformatiklehrer freue ich mich darauf, dich auf dieser Reise zu führen. Tabellen mögen altmodisch erscheinen, aber glaub mir, sie sind immer noch unglaublich nützlich in der modernen Webgestaltung. Also, rollen wir die Ärmel hoch und los geht's!

CSS Tabellen - Border Collapse

Stell dir vor, du baust einen Zaun um deinen Garten. Du möchtest, dass die Zaunpfähle sich berühren, oder? Genau das macht border-collapse für Tabellenränder. Es bestimmt, ob Zellränder getrennt oder zu einer einzigen Randlinie zusammengefallen sind.

table {
border-collapse: collapse;
}

Dieser Code lässt deine Tabellenränder sich berühren, was ein sauberes, einheitliches Aussehen erzeugt. Es ist, als ob du deiner Tabelle einen schicken Haarschnitt verpasst hättest!

CSS Tabellen - Border Spacing

Was ist, wenn du zwischen deinen Tabellenzellen etwas Platz möchtest? Dann kommt border-spacing ins Spiel. Es ist so etwas wie der soziale Abstand für deine Tabellenzellen!

table {
border-spacing: 5px;
}

Dies fügt einen 5-Pixel-Abstand zwischen deinen Zellen hinzu. Du kannst sogar unterschiedliche horizontale und vertikale Abstände einstellen:

table {
border-spacing: 5px 10px;
}

Hier haben wir 5 Pixel horizontalen Abstand und 10 Pixel vertikalen Abstand. Es ist, als ob du deinen Tabellenzellen etwas Privatsphäre gibst!

CSS Tabellen - Caption Side

Tabellen könnenÜberschriften haben, und du kannst mit caption-side steuern, wo diese Überschriften erscheinen. Es ist, als ob du entscheidest, ob der Titel eines Buches auf der Ober- oder Unterseite des Covers steht.

caption {
caption-side: bottom;
}

Dies platzier deine Tabellenüberschrift unten. Du kannst auch top verwenden, wenn du sie oben haben möchtest.

CSS Tabellen - Empty Cells

Hast du dich jemals gefragt, was mit leeren Zellen in deiner Tabelle passiert? Die Eigenschaft empty-cells lässt dich entscheiden, ob sie angezeigt oder versteckt werden sollen.

table {
empty-cells: hide;
}

Dies macht leere Zellen unsichtbar. Es ist, als ob du ein Hide-and-Seek mit deinen Tabellenzellen spielst!

CSS Tabellen - Table Layout

Die Eigenschaft table-layout bestimmt, wie die Zellen, Zeilen und Spalten einer Tabelle angeordnet werden. Es ist, als ob du zwischen einem strengen Sitzplan und einem freien Durcheinander bei einem Dinner entscheidest.

table {
table-layout: fixed;
}

Dies setzt eine feste Tabellenanordnung, die die Rendergeschwindigkeit für große Tabellen verbessern kann.

CSS Tabelle - mit festem Layout

Bei einem festen Layout wird die Breite der Tabelle durch die erste Zeile oder angegebene Breiten bestimmt. Es ist, als ob du bei einer Hochzeitsfeier fest zugewiesene Plätze hast.

table {
table-layout: fixed;
width: 100%;
}

th, td {
width: 25%;
}

Dies erstellt eine Tabelle mit vier gleich breiten Spalten, unabhängig vom Inhalt.

CSS Tabelle - mit automatischem Layout

Ein automatisches Layout passt die Spaltenbreiten anhand ihres Inhalts an. Es ist, als ob Gäste bei einem lockeren Dinner ihre eigenen Plätze wählen.

table {
table-layout: auto;
width: 100%;
}

Hier passt der Browser die Spaltenbreiten basierend auf ihrem Inhalt an.

CSS Tabellen - Höhe und Breite

Du kannst die Größe deiner Tabelle und ihrer Zellen mit den Eigenschaften height und width steuern. Es ist, als ob du entscheidest, wie groß dein Esstisch sein sollte.

table {
width: 100%;
}

td {
height: 50px;
}

Dies setzt die Tabellenbreite auf 100% ihres Behälters und die Höhe jeder Zelle auf 50 Pixel.

CSS Tabellen - Tabellenausrichtung

Die Ausrichtung des Inhalts innerhalb von Tabellenzellen ist entscheidend für die Lesbarkeit. Es ist, als ob du das Essen auf einem Teller arrangierst - die Präsentation zählt!

td {
text-align: center;
vertical-align: middle;
}

Dies zentriert den Inhalt sowohl horizontal als auch vertikal in jeder Zelle.

CSS Tabellen - Rand

Ränder können deine Tabelle optisch ansprechender und leichter lesbar machen. Es ist, als ob du Linien auf ein Blatt Papier zeichnest, um Informationen zu organisieren.

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

Dies fügt eine 1-Pixel dicke durchgehende schwarze Linie um die Tabelle und alle ihre Zellen hinzu.

CSS Tabellen - Hintergrundfarbe

Das Hinzufügen von Hintergrundfarben kann deine Tabelle optisch ansprechender machen und帮助你区分表格的不同部分。就像在房子的不同房间涂上不同的颜色。

table {
background-color: #f2f2f2;
}

th {
background-color: #4CAF50;
color: white;
}

Dies setzt eine helle Grautönung als Hintergrund für die Tabelle und eine grüne Hintergrundfarbe mit weißem Text für die Header-Zellen.

CSS Tabellen - Schriftarten

Das Styling des Textes in deiner Tabelle kann die Lesbarkeit erheblich verbessern. Es ist, als ob du die richtige Schriftart für ein Buch auswählst - es kann einen großen Unterschied im Lesevergnügen machen.

table {
font-family: Arial, sans-serif;
}

th {
font-weight: bold;
}

td {
font-size: 14px;
}

Dies setzt Arial als Schriftart für die gesamte Tabelle, macht die Header-Schrift fett und setzt die Zelltextgröße auf 14 Pixel.

CSS Tabellen - Andere Stile

Es gibt viele andere Stile, die du auf Tabellen anwenden kannst. Hier ist eine kurze Übersicht:

Eigenschaft	Beschreibung	Beispiel
padding	Innenabstand der Zellen	td { padding: 10px; }
border-radius	Abgerundete Ecken	table { border-radius: 5px; }
box-shadow	Schatteneffekt	table { box-shadow: 2px 2px 5px grey; }
opacity	Transparenz	table { opacity: 0.8; }

CSS Tabellen - Randabstand

Randabstände können deiner Tabelle etwas Freiraum von anderen Elementen auf der Seite geben. Es ist, als ob du um ein Bilderrahmen auf der Wand etwas Platz lässt.

table {
margin: 20px auto;
}

Dies fügt oben und unten eine 20-Pixel-Randabstand hinzu und zentriert die Tabelle horizontal.

CSS Tabellen - Trennlinien (vertikal / horizontal)

Du kannst Trennlinien zu deiner Tabelle hinzufügen, um Spalten oder Zeilen zu trennen. Es ist, als ob du mit einem Lineal gerade Linien in ein Notizbuch zeichnest.

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

tr {
border-bottom: 1px solid black;
}

Dies fügt vertikale Linien zwischen den Spalten und horizontale Linien zwischen den Zeilen hinzu.

CSS Tabellen - Gestreifte Tabelle

Gestreifte Tabellen können das Lesen von Datenreihen erleichtern. Es ist, als ob du jede zweite Zeile in einem Buch unterstreichen würdest, um deinen Platz zu finden.

tr:nth-child(even) {
background-color: #f2f2f2;
}

Dies erstellt abwechselnde weiße und helle graue Zeilen in deiner Tabelle.

CSS Tabellen - Responsive Tabelle

Das Erstellen von responsiven Tabellen stellt sicher, dass sie auf allen Geräten gut aussehen. Es ist, als ob du einen Esstisch hättest, der sich erweitern oder verkleinern kann, abhängig von der Anzahl der Gäste.

@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
border: none;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
}
}

Dieser Code verwandelt die Tabelle in eine listenähnliche Darstellung auf kleinen Bildschirmen, was das Lesen auf mobilen Geräten erleichtert.

CSS Tabelle - Verwandte Eigenschaften

Hier ist eine Tabelle von verwandten CSS-Eigenschaften, die du nützlich finden könntest, wenn du mit Tabellen arbeitest:

Eigenschaft	Beschreibung
border-collapse	Bestimmt, ob Zellränder getrennt oder zusammengefallen sind
border-spacing	Setzt den Abstand zwischen Zellrändern
caption-side	Legt die Position einer Tabellenüberschrift fest
empty-cells	Legt fest, ob Randlinien in leeren Zellen angezeigt werden sollen
table-layout	Legt das Algorithmus fest, das für die Anordnung von Zellen, Zeilen und Spalten verwendet wird
vertical-align	Setzt die vertikale Ausrichtung des Inhalts in einer Zelle
text-align	Setzt die horizontale Ausrichtung des Inhalts in einer Zelle

Und das ist es! Du bist jetzt gut gerüstet, um Tabellen in CSS zu erstellen und zu stylen. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Eigenschaften zu experimentieren. Viel Spaß beim Programmieren!

Credits: Image by storyset