TAG 2 · HTML

HTML: Tabellen

Tabellen werden verwendet, um Daten übersichtlich in Zeilen und Spalten darzustellen. Zum Beispiel für Stundenpläne, Punktestände, Personen oder andere strukturierte Informationen.

1) Die Grundstruktur einer Tabelle

Eine HTML-Tabelle besteht aus mehreren Elementen. Das wichtigste ist <table>.

<table> Enthält die komplette Tabelle.
<tr> Erstellt eine Tabellenzeile.
<th> Erstellt eine Überschrift einer Spalte.
<td> Erstellt eine normale Tabellenzelle.

2) Eine einfache Tabelle

Hier ist eine einfache Tabelle mit zwei Spalten und drei Personen: 

<table>

  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>

  <tr>
    <td>Mia</td>
    <td>12</td>
  </tr>

  <tr>
    <td>Michael</td>
    <td>14</td>
  </tr>

</table>
Name Alter
Mia 12
Michael 14

3) Tabellenzeilen mit <tr>

<tr> steht für „Table Row“ und erstellt eine komplette Zeile. 

<tr>
  <td>Mia</td>
  <td>12</td>
</tr>

In dieser Zeile befinden sich zwei Zellen: eine mit dem Namen und eine mit dem Alter.

4) Überschriften mit <th>

<th> steht für „Table Header“. Damit werden Überschriften für die einzelnen Spalten erstellt. 

<tr>
  <th>Name</th>
  <th>Alter</th>
  <th>Klasse</th>
</tr>

Der Browser stellt <th> normalerweise fett dar.

5) Normale Zellen mit <td>

<td> steht für „Table Data“ und enthält die eigentlichen Daten. 

<tr>
  <td>Max</td>
  <td>15</td>
  <td>2AHITN</td>
</tr>

6) <thead> und <tbody>

Bei größeren Tabellen kann man die Tabelle zusätzlich in Kopfbereich und Datenbereich aufteilen. 

<table>

  <thead>
    <tr>
      <th>Name</th>
      <th>Punkte</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Mia</td>
      <td>12</td>
    </tr>

    <tr>
      <td>Max</td>
      <td>15</td>
    </tr>
  </tbody>

</table>

Das ist besonders bei größeren Tabellen sinnvoll, weil die Struktur dadurch übersichtlicher wird.

7) Mehrere Spalten

Eine Tabelle kann beliebig viele Spalten besitzen. Wichtig ist, dass die Anzahl der Zellen pro Zeile zur Tabellenstruktur passt. 

<table>

  <tr>
    <th>Name</th>
    <th>Alter</th>
    <th>Klasse</th>
  </tr>

  <tr>
    <td>Mia</td>
    <td>12</td>
    <td>2AHITN</td>
  </tr>

  <tr>
    <td>Michael</td>
    <td>14</td>
    <td>3AHITN</td>
  </tr>

</table>

Merke

  • <table> = komplette Tabelle
  • <tr> = Tabellenzeile
  • <th> = Überschrift
  • <td> = normale Datenzelle
  • <thead> = Kopfbereich
  • <tbody> = Datenbereich
  • Tabellen sind für tabellarische Daten gedacht und nicht als allgemeines Layout-System.

8) Typische Fehler

  • <td> oder <th> außerhalb einer <tr> verwenden.
  • In verschiedenen Zeilen unterschiedlich viele Zellen verwenden, obwohl keine Zusammenfassung von Zellen vorgesehen ist.
  • Tabellen für das komplette Seitenlayout verwenden. Dafür sind CSS Flexbox oder Grid besser geeignet.
  • Überschriften als normale <td>-Zellen schreiben.

9) Mini-Übung

Erstelle eine Tabelle über deine Klasse oder eine erfundene Gruppe.

Die Tabelle soll mindestens enthalten:

  • 3 Spalten
  • eine Kopfzeile mit <th>
  • mindestens 4 Datenzeilen
  • Name und mindestens zwei weitere Informationen

Zusatz: Verwende <thead> und <tbody>.

```