Die Grundstruktur einer Tabelle: table, tr, td
Die Grundstruktur einer Tabelle: table, tr, td
~8 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Tabellen eignen sich hervorragend, um Daten in Zeilen und Spalten darzustellen - zum Beispiel eine Übersicht von Finns Lieblingsspielern mit Name, Position und Verein.
Drei Elemente für eine Tabelle
Eine Tabelle besteht aus drei ineinander verschachtelten Elementen:
<table>: umschließt die ganze Tabelle.<tr>("table row"): eine einzelne Zeile.<td>("table data"): eine einzelne Zelle innerhalb einer Zeile.
Eine erste Tabelle
<table>
<tr>
<td>Name</td>
<td>Position</td>
</tr>
<tr>
<td>Finn</td>
<td>Stürmer</td>
</tr>
</table>Wichtig zum Verständnis der Verschachtelung: Jede <tr> steht für eine waagerechte Zeile. Innerhalb jeder Zeile stehen so viele <td>-Zellen, wie die Tabelle Spalten hat. In diesem Beispiel hat die Tabelle also 2 Zeilen und 2 Spalten.
Achtung: Jede Zeile (<tr>) sollte immer die gleiche Anzahl an <td>-Zellen haben. Wenn eine Zeile plötzlich weniger oder mehr Zellen hat als die anderen, sieht die Tabelle im Browser oft unerwartet aus.
Finns Spielerliste als Tabelle
Erstelle eine Tabelle mit Finns Lieblingsspielern auf spieler.html:
<h2>Meine Lieblingsspieler</h2>
<table>
<tr>
<td>Name</td>
<td>Position</td>
<td>Verein</td>
</tr>
<tr>
<td>Spieler A</td>
<td>Stürmer</td>
<td>Verein A</td>
</tr>
<tr>
<td>Spieler B</td>
<td>Torwart</td>
<td>Verein B</td>
</tr>
</table>Tipp: Ersetze "Spieler A", "Verein A" usw. gerne durch deine eigenen echten Lieblingsspieler und -vereine!
Speichere und schau dir das Ergebnis im Browser an. Du wirst merken: Ohne CSS sieht die Tabelle noch ziemlich schlicht aus - keine sichtbaren Linien zwischen den Zellen. Das ist wieder ganz normal: Linien, Farben und Abstände kommen erst mit CSS. Die reine Struktur - welche Daten in welcher Zeile und Spalte stehen - ist trotzdem bereits vollständig korrekt und für Screenreader und Suchmaschinen genauso lesbar wie eine hübsch gestylte Tabelle.