📊 Arbeitsblatt: HTML Tabellen

Name: ____________________
Datum: ____________________

1. Die Logik einer Tabelle

Tabellen in HTML sind wie ein Regalsystem. Damit alles an seinem Platz bleibt, müssen wir uns strikt an die Hierarchie halten:

Die 3 Ebenen der Tabelle:
1. <table> → Das gesamte Regal (der äußere Rahmen).
2. <tr> (Table Row) → Ein einzelner Regalboden (eine Zeile).
3. <td> (Table Data) → Die einzelnen Fächer auf dem Boden (eine Zelle).

Merke: Du kannst keine Zellen (<td>) direkt in die Tabelle schreiben. Sie müssen immer erst in einer Zeile (<tr>) stecken!

2. Die Struktur im Code

Schau dir an, wie eine kleine Tabelle mit zwei Zeilen und zwei Spalten aufgebaut ist:

<table> <tr> <!-- Zeile 1 --> <td>Name</td> <td>Alter</td> </tr> <tr> <!-- Zeile 2 --> <td>Max Mustermann</td> <td>13 Jahre</td> </tr> </table>

3. Praktische Übungen

🚀 Aufgabe 1: Der Tabellen-Bau

Erstelle in deiner HTML-Datei eine Tabelle, die deinen aktuellen Lieblingsfächer auflistet. Die Tabelle soll so aussehen:

  • Zeile 1: Fachname | Note (Wunsch)
  • Zeile 2: Informatik | 1
  • Zeile 3: Kunst | 2

Tipp: Nutze drei <tr>-Blöcke und in jedem Block zwei <td>-Zellen.

🚀 Aufgabe 2: Der Stundenplan-Check

Erweitere deine Tabelle oder erstelle eine neue. Baue einen kleinen Stundenplan für zwei Tage (z.B. Montag und Dienstag) mit jeweils drei Stunden.

Checkliste:
□ Hat die Tabelle einen <table> Rahmen?
□ Hat jeder Tag seine eigene <tr> Zeile?
□ Sind die Fächer in <td> Zellen geschrieben?

🌟 Profi-Challenge (für Experten)

Kannst du folgende Dinge herausfinden?

  1. Die Kopfzeile: Es gibt ein spezielles Tag für Tabellenköpfe. Suche nach <th>. Was macht dieses Tag im Vergleich zu <td>?
  2. Die Optik: Tabellen sehen ohne CSS oft "nackt" aus. Versuche, in deinem CSS den Befehl table, td { border: 1px solid black; } einzubauen. Was passiert?
  3. Zell-Verschmelzung: Wie kann man eine Zelle über zwei Spalten strecken? (Tipp: Suche nach dem Attribut colspan).