Tabellen

Tabellen dienen dazu, Daten strukturiert darzustellen – etwa Preislisten, Stundenpläne, Netzwerkübersichten oder Konfigurationstabellen.

HTML-Tabellen sind nicht für Layout-Zwecke gedacht, sondern für tabellarische Inhalte.
In dieser Lektion lernst du, wie man Tabellen aufbaut, Zellen kombiniert und sie mit Beschriftungen versieht.

1. Grundaufbau einer Tabelle

Der Basisaufbau besteht aus drei Ebenen:

<table>
  <tr>
    <td>Inhalt 1</td>
    <td>Inhalt 2</td>
  </tr>
</table>

Tag	Bedeutung
`<table>`	umschließt die gesamte Tabelle
`<tr>`	Table Row – definiert eine Zeile
`<td>`	Table Data – definiert eine Zelle

Beispiel:

<table border="1">
  <tr>
    <td>Vorname</td>
    <td>Nachname</td>
  </tr>
  <tr>
    <td>Ricky</td>
    <td>Reichert</td>
  </tr>
</table>

border="1" zeigt zur Veranschaulichung Rahmen an (wird später durch CSS ersetzt).

2. Kopfzeilen mit `<th>`

Tabellenköpfe werden mit <th> (Table Header) erstellt.
Sie erscheinen fett und zentriert.

<table border="1">
  <tr>
    <th>Vorname</th>
    <th>Nachname</th>
    <th>Abteilung</th>
  </tr>
  <tr>
    <td>Ricky</td>
    <td>Reichert</td>
    <td>IT</td>
  </tr>
</table>

Ergebnis:
Eine Tabelle mit Kopfzeile und einer Datenzeile.

3. Tabellenbereiche strukturieren

Für größere Tabellen kann man sie in Kopf-, Körper- und Fußbereich aufteilen:

<table border="1">
  <thead>
    <tr><th>Produkt</th><th>Preis</th></tr>
  </thead>
  <tbody>
    <tr><td>T-Shirt</td><td>19,90 €</td></tr>
    <tr><td>Hoodie</td><td>39,90 €</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Gesamt</td><td>59,80 €</td></tr>
  </tfoot>
</table>

Diese Struktur hilft Browsern, Screenreadern und Suchmaschinen, die Tabelle semantisch korrekt zu verstehen.

4. Zellen verbinden

Manchmal sollen Zellen mehrere Spalten oder Zeilen überdecken:

Attribut	Wirkung
`colspan="2"`	verbindet zwei Spalten
`rowspan="2"`	verbindet zwei Zeilen

Beispiel:

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Noten</th>
  </tr>
  <tr>
    <th>Mathe</th>
    <th>Informatik</th>
  </tr>
  <tr>
    <td>Ricky</td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

5. Tabellenbeschriftung

Mit <caption> kannst du der Tabelle eine Überschrift geben:

<table border="1">
  <caption>Teilnehmerliste</caption>
  <tr><th>Vorname</th><th>Nachname</th></tr>
  <tr><td>Ricky</td><td>Reichert</td></tr>
</table>

6. Beispiel: Stundenplan

Ein praxisnahes Beispiel aus dem Ausbildungsalltag:

<table border="1">
  <caption>Stundenplan</caption>
  <tr>
    <th>Tag</th>
    <th>Fach</th>
    <th>Raum</th>
  </tr>
  <tr>
    <td>Montag</td>
    <td>Netzwerktechnik</td>
    <td>R203</td>
  </tr>
  <tr>
    <td>Dienstag</td>
    <td>Programmierung</td>
    <td>R105</td>
  </tr>
  <tr>
    <td>Mittwoch</td>
    <td>Betriebssysteme</td>
    <td>R204</td>
  </tr>
</table>

7. Häufige Fehler

Fehler	Ursache	Lösung
Unsaubere Struktur	`<tr>` oder `<td>` vergessen	Zeilen und Zellen immer sauber schließen
Keine Kopfzeile	`<th>` nicht verwendet	Für Spaltenüberschriften immer `<th>`
Falsche Kombination von `colspan`/`rowspan`	Anzahl stimmt nicht	Anzahl Spalten/Zeilen prüfen

8. Semantik und Best Practice

-Verwende Tabellen nur, wenn du tabellarische Daten hast.
-Nicht für Seitenlayout oder Design (dafür später CSS verwenden).

Tipp für Barrierefreiheit:
Nutze <th scope="col"> oder <th scope="row"> für Screenreader.

<th scope="col">Fach</th>

9. Fazit

Tabellen bestehen aus <table>, <tr>, <td>, <th>.
Strukturiere große Tabellen mit <thead>, <tbody>, <tfoot>.
Verbinde Zellen mit colspan oder rowspan.
Beschrifte Tabellen mit <caption>.
Nutze Tabellen nur für Daten, nicht für Layouts.