HTML Erste Schritte – Lektion 5 – Tabellen

26/05/2025, by Ivan

Eine der wichtigen Formen zur Speicherung von Informationen sind Tabellen. Tabellen werden von Programmen wie Excel, Access und anderen Datenbanken verwendet. Tabellen stellen Daten sehr anschaulich dar, und auf Grundlage dieser Daten lassen sich Diagramme und Grafiken leicht erstellen.
In dieser Lektion lernen wir, wie man Tabellen in HTML erstellt. Dafür verwenden wir die Tags <table>, <tr>, <td>, <th>, <thead>, <tbody> und <tfoot>.

Tag table

TABLE ist das Haupt-Tag der Tabelle, in dem alle anderen Tabellen-Tags eingebettet werden.

<table>
</table>

Alle weiteren Tags schreiben wir innerhalb dieses Tags.

Tag tr

TR ist das Zeilen-Tag. Jede Tabellenzeile wird mit einem Paar <tr></tr> definiert. Wenn wir drei Zeilen haben wollen, brauchen wir drei solcher Tag-Paare:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Tag td

TD ist das Zellen-Tag. Jede Zelle muss innerhalb einer Zeile liegen. Für eine korrekte Darstellung müssen alle Zeilen die gleiche Anzahl Zellen enthalten. Erstellen wir eine Tabelle mit vier Zellen pro Zeile:

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

Jetzt füllen wir die Tabelle mit Daten:

<table>
  <tr>
    <td>Nummer</td>
    <td>Nachname</td>
    <td>Vorname</td>
    <td>Patronym</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Ivanov</td>
    <td>Ivan</td>
    <td>Ivanovich</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Petrov</td>
    <td>Petr</td>
    <td>Petrovich</td>
  </tr>
</table>

Nun können wir die Tabelle logisch strukturieren und in drei Bereiche unterteilen: thead – Tabellenkopf, tbody – Tabelleninhalt und tfoot – Tabellenfuß.

Tag tbody

TBODY ist optional, aber man kann es verwenden, um den Hauptinhalt der Tabelle zu kennzeichnen.

<table>
  <tbody>
    <tr>
      <td>Nummer</td>
      <td>Nachname</td>
      <td>Vorname</td>
      <td>Patronym</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
</table>

Tag thead

THEAD wird für den Tabellenkopf verwendet. Nehmen wir die erste Zeile in den thead-Bereich auf.

<table>
  <thead>
    <tr>
      <td>Nummer</td>
      <td>Nachname</td>
      <td>Vorname</td>
      <td>Patronym</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
</table>

Jetzt ersetzen wir die td-Zellen im Kopfbereich durch th-Zellen, um zu zeigen, dass es Spaltenüberschriften sind:

<table>
  <thead>
    <tr>
      <th>Nummer</th>
      <th>Nachname</th>
      <th>Vorname</th>
      <th>Patronym</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
</table>

Wenn Sie einen modernen Browser verwenden, sollten die Überschriften fett dargestellt werden. Bleibt noch das Tag für den Tabellenfuß, tfoot.

Tag tfoot

TFOOT definiert die Fußzeile der Tabelle.

<table>
  <thead>
    <tr>
      <th>Nummer</th>
      <th>Nachname</th>
      <th>Vorname</th>
      <th>Patronym</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Erstellt im Jahr 2012</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

Attribut colspan

Ein wichtiges Attribut des td-Tags ist colspan, das Zellen zusammenführen kann. Schauen wir uns unseren Footer an. Dort sind vier Zellen, aber nur eine ist befüllt. Wir können die vier Zellen zusammenführen mit colspan.

<table>
  <thead>
    <tr>
      <th>Nummer</th>
      <th>Nachname</th>
      <th>Vorname</th>
      <th>Patronym</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Erstellt im Jahr 2012</td>
    </tr>
  </tfoot>
</table>

Jetzt haben wir eine große Zelle, die vier Zellen breit ist. Der Wert des colspan-Attributs gibt an, wie viele Zellen zusammengeführt werden.

Extra Block Types (EBT) - Neue Erfahrung im Layout Builder❗

❗Extra Absatztypen (EPT) - Erfahrung mit neuen Absätzen