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. Bring diese Zeilen in die richtige Reihenfolge, um eine gültige Tabelle mit einer Zeile und einer Zelle zu erhalten.

   <table>
   <tr>
   <td>1</td>
   </tr>
   </table>

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