Tabellen
Tabellen sind für tabellarische Daten gedacht, nicht für Seitenlayout.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Grundaufbau
table ist der Rahmen der Tabelle.
tr erzeugt eine Zeile, td eine normale Datenzelle und th eine Kopfzelle.
<table>
<tr>
<th>Name</th>
<th>Alter</th>
</tr>
<tr>
<td>Max</td>
<td>25</td>
</tr>
</table>Struktur für größere Tabellen
caption gibt der Tabelle eine Beschriftung.
thead, tbody und tfoot trennen Kopf, Inhalt und Fussbereich.
<table>
<caption>Kursplan</caption>
<thead>
<tr><th scope="col">Tag</th><th scope="col">Kurs</th></tr>
</thead>
<tbody>
<tr><td>Montag</td><td>HTML</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">Stand: Oktober</td></tr>
</tfoot>
</table>Vertiefung
Tabellen sind für Daten
Eine Tabelle ist sinnvoll, wenn Zeilen und Spalten eine Beziehung ausdrücken. Für Layouts nimmst du Grid oder Flexbox, nicht table.
Kopfzellen mit th und scope sagen, ob sie eine Spalte oder Zeile beschreiben. caption gibt der gesamten Tabelle einen Namen; thead und tbody strukturieren größere Datenmengen.
<table>
<caption>Kursplan</caption>
<thead>
<tr>
<th scope="col">Tag</th>
<th scope="col">Thema</th>
</tr>
</thead>
<tbody>
<tr>
<td>Montag</td>
<td>HTML</td>
</tr>
</tbody>
</table>Merksatz: caption, th und scope machen Tabellen für alle verständlich. Layout gehört nicht in Tabellen.
Übungsaufgabe
Kursplan als Datentabelle
Baue eine Tabelle mit drei Kursen. Jede Zeile enthält Tag, Kurs und Dauer. Nutze caption, thead, tbody und Spalten-Kopfzellen.
Das soll dein Programm können
- caption für die Tabelle
- thead mit th scope="col"
- tbody mit mindestens drei Datenzeilen
- td für die Daten
- Keine Tabelle für das Seitenlayout
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Die Kopfzeile steht im thead, die Datenzeilen im tbody. scope="col" beschreibt eine Spalte.
Lösung anzeigen
<table>
<caption>Kursplan Oktober</caption>
<thead>
<tr>
<th scope="col">Tag</th>
<th scope="col">Kurs</th>
<th scope="col">Dauer</th>
</tr>
</thead>
<tbody>
<tr>
<td>Montag</td>
<td>HTML</td>
<td>60 Min.</td>
</tr>
<tr>
<td>Mittwoch</td>
<td>CSS</td>
<td>90 Min.</td>
</tr>
<tr>
<td>Freitag</td>
<td>JavaScript</td>
<td>120 Min.</td>
</tr>
</tbody>
</table>Warum funktioniert das?
thead und tbody trennen Kopf und Daten. scope="col" ordnet jede th eindeutig ihrer Spalte zu; die caption erklärt den Zweck der Tabelle.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Deine Lieblingsseite
Baue eine kleine Seite über ein Thema, das dich wirklich interessiert. Nutze die Struktur, die du in dieser Lektion gelernt hast.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.