Tabellen

In den Hallen der tabellarischen Ordnung

In der Welt der strukturierten Daten bist du mit HTML der Großmeister der Tabellenkunst! Wann immer es gilt, Statistiken, Finanzübersichten oder Vergleiche in eine wunderbar starre, geradlinige Ordnung zu bringen, gibt es nichts Besseres. Komplexe Informationen auf einen Blick erfassen? Na klar, Tabellen sind da unschlagbar.

Aber Vorsicht: Wenn du denkst, Tabellen seien eine gute Idee für Layouts oder Seitenstrukturen, hast du wohl die Flexibilität moderner Webseiten verflucht. Sie sind so anpassungsfähig wie ein altertümlicher Karren im Highspeed-Rennen. Setz sie klug ein, und deine Daten werden in erhabener, geordneter Form erstrahlen – aber bitte, lass sie aus dem Layout raus!

Los geht’s

Eine einfache Tabelle
Zellen vereinen
Tabellenstruktur meistern

Tabellen im HTML

Daten übersichtlich strukturieren – Zeile für Zeile, Spalte für Spalte!

Token: table, tr, th und caption-Element

Eine einfache Tabelle

Daten geordnet präsentieren

Mit den HTML-Elementen <table>, <tr>, und <td> in der Hand, bist du der Architekt geordneter Daten! Reihen und Spalten sind deine Werkzeuge, um Übersichtlichkeit zu schaffen und Chaos zu bannen.

table: Der heilige Anfang – markiert den Start der Tabelle.
caption: Fügt eine Überschrift hinzu, die deinem Werk Bedeutung verleiht.
tr: Definiert eine neue Zeile, die den Weg weist.
th: Verleiht Spalten eine majestätische Überschrift.
td: Eine Zelle, die nur darauf wartet, mit deinen Daten gefüllt zu werden.

<table>
    <caption>Zutaten</caption>
    <tr>
        <th>Einhorn</th>
        <th>Fee</th>
    </tr>
    <tr>
        <td>Einhornhaar</td>
        <td>Feenstaub</td>
    </tr>
</table>

Zellen vereinen

Tabellenstrukturen flexibel gestalten

Mit den magischen Formeln colspan und rowspan kannst du in HTML-Tabellen die Zellen über Spalten und Zeilen hinweg verbinden.

colspan: Dehnt eine Zelle über mehrere Spalten aus, wie ein fließendes Band. Perfekt für Inhalte, die Raum brauchen.
rowspan: Lässt eine Zelle mehrere Zeilen überspannen, als würde sie von einer Ebene zur nächsten gleiten. Ein Muss, wenn du Zellen über mehrere Zeilen vereinen willst.

<table>
    <tr>
        <th colspan="2">Fee</th>
        <th>Einhorn</th>
    </tr>
    <tr>
        <td>Einhornhaar</td>
        <td>Einhornpups</td>
        <td>Feenstaub</td>
    </tr>
</table>

Tabellenstruktur meistern

Übersicht von Kopf bis Fuß

Die geheimen Helfer der HTML-Tabelle: thead, tbody, und tfoot. Der thead bringt Klarheit mit den Überschriften, während tbody den Hauptinhalt sortiert. Der tfoot ist der ruhmreiche Abschluss, der die Tabelle mit Fußnoten oder Gesamtsummen abrundet. So bleibt alles schön geordnet und übersichtlich!

<table>
    <thead>
        <!-- Tabelleninhalt-->
        <tr>
            <td>...</td>
        </tr>
    </thead>
    <tbody>
        <!-- Tabelleninhalt-->
    </tbody>
    <tfoot>
        <!-- Tabelleninhalt-->
    </tfoot>
</table>

In dieser Lektion hast du gelernt…

Wie du mit <table> eine Tabelle erstellst, um Daten geordnet darzustellen.
Weshalb<th> wichtig ist, um Spaltenüberschriften hervorzuheben und die Übersichtlichkeit zu steigern.
Auf welche Weise du mit <tr> Zeilen und mit <td> einzelne Zellen definierst, um strukturierte Inhalte zu erzeugen.
Warum es sinnvoll ist, mit colspan und rowspan Zellen über mehrere Spalten oder Zeilen hinweg zu kombinieren, um komplexe Layouts umzusetzen.
Wozu<thead>, <tbody> und <tfoot> dienen, um Tabellen logisch zu unterteilen und die Struktur klar zu halten.

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!

Der verlassene Alchemietisch

In einem alten, menschenleeren Haus am Rand des Waldes steht ein Alchemietisch, bedeckt mit verstaubten Fläschchen und zerknitterten Rezepten. Um das Chaos zu entwirren und die Magie wieder fließen zu lassen, musst du die Geheimnisse der Tabellen beherrschen. Nutze HTML, um die Zutaten, Mengen und Anweisungen ordentlich in Spalten und Zeilen zu bringen – damit aus einem explosiven Durcheinander ein meisterhafter Trank wird!

Deine Aufgabe: Die Erstellung und Strukturierung einer Tabelle

Erstelle eine Tabelle wie auf der Abbildung

CSS

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

table,
caption,
td,
th {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 1rem;
}

Grundstruktur der Tabelle:
Erstelle eine Tabelle mit einem <caption>Rezept für den Heiltrank</caption>,
einer Kopfzeile, einem Hauptteil und einem Fußteil.
Füge das CSS von oben im head-Bereich hinzu um die Tabellenstruktur besser zu erkennen.
Zellen zusammenführen
Verwende das Attribut colspan Zellen zusammenzuführen
Tabelleninhalte strukturieren:
Füge in den Zellen (<td> und <th>) die Zutaten und Beschreibungen der Alchemie hinzu.
Stelle sicher, dass die Struktur dem Rezept im Bild entspricht.

Editor in neuem Tab öffnen

HTML

<table>
    <caption>Rezept für den Heiltrank</caption>
    <thead>
        <tr>
            <th>Zutat</th>
            <th>Menge</th>
            <th>Beschreibung</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mondkraut</td>
            <td>3 Blätter</td>
            <td>Nur bei Vollmond sammeln</td>
        </tr>
        <tr>
            <td>Leuchtende Beeren</td>
            <td>5 Stück</td>
            <td>Im Dunkeln leuchtend</td>
        </tr>
        <tr>
            <td colspan="2">Sternenstaub</td>
            <td>Eine Prise</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Alle Zutaten bei Mondschein mischen und im Kessel erhitzen.</td>
        </tr>
    </tfoot>
</table>

weiter geht’s