HTML Tabellen

Tabellarische Daten mit caption, thead, tbody, th, td und scope auszeichnen. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• Tabellen für echte Datenvergleiche verwenden
• Kopfzellen und Datenzellen unterscheiden
• barrierearme Tabellen mit caption und scope schreiben

Erklärung

Tabellen sind für tabellarische Daten gedacht, nicht für Seitenlayout. Eine gute Tabelle hat eine Beschriftung, klare Spalten- oder Zeilenüberschriften und eine logische Struktur.

Beispiele

<table>
  <caption>Prüfungstermine Web Development</caption>
  <thead>
    <tr>
      <th scope="col">Thema</th>
      <th scope="col">Datum</th>
      <th scope="col">Dauer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML und CSS</td>
      <td>12. März</td>
      <td>45 Minuten</td>
    </tr>
  </tbody>
</table>

caption erklärt den Zweck. scope="col" verbindet Kopfzellen mit Spalten.

Typische Fehler

• Tabellen für zweispaltige Layouts verwenden.
• Kopfzeilen als normale td schreiben.
• Keine Beschriftung angeben, obwohl die Tabelle erklärungsbedürftig ist.

Best Practices

• Nutze Tabellen nur, wenn Zeilen und Spalten fachlich zusammengehören.
• Halte Tabellen auf mobilen Geräten testbar.
• Verwende th für Überschriften und td für Daten.

Kleine Übung

Erstelle eine Tabelle mit drei Lernressourcen, jeweils mit Thema, Schwierigkeit und geschätzter Bearbeitungszeit.

Zusammenfassung

HTML ist dann gut, wenn die Bedeutung der Inhalte klar erkennbar ist. Saubere Struktur, passende Elemente und barrierearme Grundregeln machen Seiten robuster, verständlicher und leichter prüfbar.

Weiterführende Seiten

• Vorherige Seite: HTML Bilder und Medien
• Nächste Seite: HTML Formulare
• Zur Übersicht
• HTML Listen
• Responsive Design