HTML Academy · Lektion

table, tr, td und th

Erstellen Sie einfache Tabellen mit Zeilen, Datenzellen und Kopfzellen.

table, tr, td und th ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

HTML-Tabellen

Tabellen stellen Daten in Zeilen und Spalten dar. Verwenden Sie sie für Tabellendaten – nicht für das Seitenlayout.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

Die Elemente table, tr und td

Die wichtigsten Tabellenelemente:

<table> – der Tabellen-Container
<tr> – eine Tabellenzeile
<td> – eine Datenzelle
<th> – eine Kopfzelle (standardmäßig fett und zentriert)

th vs. td

Verwenden Sie <th> für Kopfzellen – sie haben eine semantische Bedeutung:

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

Grundlegende Tabellenstruktur

Eine minimale, aber vollständige Tabelle:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

Tabellenrahmen mit CSS

Browser stellen Tabellen standardmäßig ohne Rahmen dar. Fügen Sie diese mit CSS hinzu:

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

Tabellen sind nicht für das Layout gedacht

In den 1990er-Jahren wurden Tabellen für das Seitenlayout verwendet. Das ist veraltet und schädlich:

Screenreader interpretieren Tabellen als Daten – Layouttabellen verwirren die Benutzer
Tabellen sind auf kleinen Bildschirmen unflexibel
CSS Grid und Flexbox decken inzwischen alle Layout-Anforderungen ab
Verwenden Sie <table> nur für tatsächliche Tabellendaten

Responsive Tabellen

Tabellen ragen auf kleinen Bildschirmen über den verfügbaren Platz hinaus. Umschließen Sie sie, damit horizontal gescrollt werden kann:

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Leere Zellen

Behandeln Sie leere Zellen bewusst:

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

Vorschau auf thead und tbody

Tabellen sollten <thead> und <tbody> verwenden, um Kopfzeilen von Datenzeilen zu trennen – dies wird in der nächsten Lektion behandelt:

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

col und colgroup für die Spaltenformatierung

Wenden Sie mit <colgroup> und <col> Stile auf ganze Spalten an:

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

Zebra-Streifen mit CSS

Abwechselnde Zeilenfarben verbessern die Lesbarkeit:

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

Kurztest

Was ist der Unterschied zwischen td und th in einer Tabelle?

Zusammenfassung: table tr td th

Grundlagen von Tabellen:

<table> – Tabellen-Container
<tr> – Tabellenzeile
<td> – Datenzelle
<th> – Kopfzelle (semantisch, standardmäßig fett)
Verwenden Sie border-collapse: collapse für saubere Rahmen
Tabellen sind ausschließlich für Daten gedacht – nicht für das Seitenlayout

Häufig gestellte Fragen

Ist die Lektion „table, tr, td und th“ kostenlos?

Ja — der vollständige Text von „table, tr, td und th“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „table, tr, td und th“?

Erstellen Sie einfache Tabellen mit Zeilen, Datenzellen und Kopfzellen. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „table, tr, td und th“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

table, tr, td und th
Struktur von thead, tbody und tfoot
colspan und rowspan zum Zusammenfassen
Barrierefreiheit bei Tabellen: scope, summary und caption

← Zurück zu HTML Academy