Einfache Tabellen

Stelle Daten in Zeilen und Spalten mit den Tags table, tr, th und td dar.

6 Min. · 3 Fragen

Ein Stundenplan, eine Preisliste, eine Sportrangliste: Manche Informationen liest man von Natur aus in Zeilen und Spalten. Genau dafür sind HTML-Tabellen da. Drei Tags reichen für den Anfang: <table> umschließt die ganze Tabelle, <tr> (table row, Tabellenzeile) erstellt eine Zeile, und <td> (table data, Tabellendaten) erstellt eine Zelle innerhalb einer Zeile.

<table>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>0.30 euros</td>
  </tr>
</table>

Um jeder Spalte einen Titel zu geben, ersetzt du in der ersten Zeile <td> durch <th> (table header, Tabellenkopf). Der Browser zeigt diese Kopfzellen fett und zentriert an, was sie von den Daten abhebt.

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
</table>

Der Browser baut die Tabelle Zeile für Zeile auf: Die erste Zelle jedes <tr> landet in der ersten Spalte, die zweite Zelle in der zweiten Spalte und so weiter. Standardmäßig wird eine Tabelle ohne sichtbare Rahmen angezeigt: Das ist normal - das Aussehen (Linien, Farben, Abstände) wird später mit CSS geregelt.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welches Tag erstellt eine Tabellenzeile?
   • <td>
   • <tr>
   • <table>
   • <row>
2. Was ist der Unterschied zwischen <td> und <th>?
   • <th> erstellt eine Kopfzelle, <td> eine Datenzelle
   • <th> erstellt eine ganze Tabelle, <td> eine Zeile
   • Keiner, die beiden sind austauschbar
3. Wofür sollte eine HTML-Tabelle verwendet werden?
   • Die gesamte Website anordnen
   • Daten in Zeilen und Spalten darstellen
   • Aufzählungslisten ersetzen