Kapitel 8: HTML-Tabellen-Tags

📊 Lernziel: Tabellen erstellen und strukturieren - perfekt für Datenanzeige!

8.1 Tabellen-Grundstruktur

HTML-Tabellen bestehen aus Zeilen und Zellen.

Grundlegende Syntax:

<table>
  <tr>   <!-- Tabellenzeile -->
    <th>Überschrift 1</th>   <!-- Tabellenkopf-Zelle -->
    <th>Überschrift 2</th>
  </tr>
  <tr>
    <td>Datenzelle 1</td>   <!-- Tabellendaten-Zelle -->
    <td>Datenzelle 2</td>
  </tr>
</table>

Elemente im Überblick:

Tag	Bedeutung	Beschreibung
<table>	Tabelle	Container für die gesamte Tabelle
<tr>	Table Row	Eine Zeile in der Tabelle
<th>	Table Header	Überschriftszelle (fett, zentriert)
<td>	Table Data	Normale Datenzelle

Einfaches Beispiel:

<table>
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ben</td>
    <td>30</td>
  </tr>
</table>

Darstellung:

┌────────┬────────┐
│ Name   │ Alter  │
├────────┼────────┤
│ Anna   │ 25     │
│ Ben    │ 30     │
└────────┴────────┘

---

8.2 Tabellen-Attribute

Wichtige Attribute (HTML):

Attribut	Verwendung	Beispiel
border	Rahmenbreite	<table border="1">
width	Breite	<table width="500"> oder width="100%"
align	Ausrichtung	<table align="center"> (veraltet, besser CSS)
cellpadding	Innenabstand	<table cellpadding="10">
cellspacing	Außenabstand	<table cellspacing="0">

Beispiel:

<table border="1" width="100%" cellpadding="8" cellspacing="0">
  <tr>
    <th>Produkt</th>
    <th>Preis</th>
  </tr>
  <tr>
    <td>HTML-Buch</td>
    <td>29,99 €</td>
  </tr>
</table>

⚠️ Hinweis: Viele Attribute sind veraltet. Heute verwendet man CSS für das Styling (wird in CSS-Tutorial behandelt).

---

8.3 Tabellen-Zusammenfassung: rowspan und colspan

Zellen können zusammengefasst werden.

colspan (Spalten zusammenfassen)

<table border="1">
  <tr>
    <th colspan="2">Adresse</th>  <!-- Erstreckt sich über 2 Spalten -->
  </tr>
  <tr>
    <td>Straße</td>
    <td>Stadt</td>
  </tr>
</table>

Darstellung:

┌─────────────────────┐
│      Adresse        │
├──────────┬──────────┤
│ Straße   │ Stadt    │
└──────────┴──────────┘

rowspan (Zeilen zusammenfassen)

<table border="1">
  <tr>
    <th rowspan="2">Name</th>  <!-- Erstreckt sich über 2 Zeilen -->
    <td>Anna</td>
  </tr>
  <tr>
    <td>Ben</td>
  </tr>
</table>

Darstellung:

┌──────┬───────┐
│      │ Anna  │
│ Name │       │
│      │ Ben   │
└──────┴───────┘

---

8.4 Tabellen-Beschriftung und Überschriften

caption-Tag (Tabellenüberschrift)

<table>
  <caption>Monatliche Ausgaben</caption>
  <tr>
    <th>Monat</th>
    <th>Betrag</th>
  </tr>
  ...
</table>

th-Tag (Tabellenkopf)

• <th> wird für Überschriftenzellen verwendet
• Browser zeigen <th> standardmäßig fett und zentriert an
• Wichtig für Barrierefreiheit (Screenreader)

Beispiel:

<table border="1">
  <caption>Schülerdaten</caption>
  <tr>
    <th>Name</th>
    <th>Note</th>
    <th>Klasse</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>1,0</td>
    <td>10A</td>
  </tr>
</table>

---

8.5 Anfänger-Falle: Layout-Fehler bei Zusammenfassung

Häufiger Fehler: Zusammenfassung (rowspan/colspan) führt zu verschobenem Layout.

❌ Falsch:

<table border="1">
  <tr>
    <th colspan="2">Überschrift</th>
  </tr>
  <tr>
    <td>Zelle 1</td>
    <!-- Fehlt: Zelle 2! -->
  </tr>
</table>

✅ Richtig:

<table border="1">
  <tr>
    <th colspan="2">Überschrift</th>
  </tr>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>  <!-- Muss hinzugefügt werden! -->
  </tr>
</table>

Tipps:

1. Zeichne die Tabelle auf Papier vor
2. Zähle die Zellen in jeder Zeile (müssen übereinstimmen)
3. Verwende Editor mit Auto-Vervollständigung

---

8.6 Praxis: Schülerdaten, Produktpreise, Statistik

Aufgabe 1: Schülerinformations-Tabelle

<table border="1" cellpadding="8">
  <caption>Schülerliste 2026</caption>
  <tr>
    <th>Name</th>
    <th>Alter</th>
    <th>Stadt</th>
    <th>Note</th>
  </tr>
  <tr>
    <td>Anna Müller</td>
    <td>16</td>
    <td>Berlin</td>
    <td>1,3</td>
  </tr>
  <tr>
    <td>Ben Schmidt</td>
    <td>17</td>
    <td>München</td>
    <td>2,0</td>
  </tr>
  <tr>
    <td>Clara Weber</td>
    <td>16</td>
    <td>Hamburg</td>
    <td>1,7</td>
  </tr>
</table>

Aufgabe 2: Produktpreis-Tabelle

<table border="1" cellpadding="8">
  <caption>Unsere Produkte</caption>
  <tr>
    <th>Produkt</th>
    <th>Preis</th>
    <th>Verfügbarkeit</th>
  </tr>
  <tr>
    <td>HTML-Buch</td>
    <td>29,99 €</td>
    <td>Auf Lager</td>
  </tr>
  <tr>
    <td>CSS-Kurs</td>
    <td>49,99 €</td>
    <td>Auf Lager</td>
  </tr>
  <tr>
    <td>JavaScript-Tutorial</td>
    <td>39,99 €</td>
    <td>Ausverkauft</td>
  </tr>
</table>

Aufgabe 3: Statistik-Tabelle mit colspan

<table border="1" cellpadding="8">
  <caption>Umfrage-Ergebnisse</caption>
  <tr>
    <th colspan="2">Kategorie</th>
    <th>Anzahl</th>
    <th>Prozentsatz</th>
  </tr>
  <tr>
    <td colspan="2">Sehr zufrieden</td>
    <td>150</td>
    <td>50%</td>
  </tr>
  <tr>
    <td colspan="2">Zufrieden</td>
    <td>90</td>
    <td>30%</td>
  </tr>
  <tr>
    <td colspan="2">Unzufrieden</td>
    <td>60</td>
    <td>20%</td>
  </tr>
</table>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Tabellen-Grundstruktur (<table>, <tr>, <td>, <th>)
• ✅ Tabellen-Attribute (border, width, align)
• ✅ Zellen zusammenfassen (rowspan, colspan)
• ✅ Tabellen-Beschriftung (<caption>)
• ✅ Häufige Fehler zu vermeiden
• ✅ Verschiedene Tabellentypen zu erstellen

🎯 Nächster Schritt: In Kapitel 9 lernst du Bereichs-Tags (Divisions)!

---

← Zurück zu Kapitel 7: Listen-TagsWeiter zu Kapitel 9: Bereichs-Tags →