Tabellen in HTML

1. Das Element <table>

HTML bietet eine praktische Möglichkeit, Daten in strukturierter Form mittels Tabellen darzustellen. Tabellen helfen, Informationen in Reihen und Spalten zu organisieren, was sie ideal für die Darstellung von numerischen Daten, Zeitplänen, Preislisten und anderen strukturierten Datensätzen macht. Schauen wir uns an, wie man die grundlegendsten Tags zum Erstellen von Tabellen verwendet: <table>, <tr>, <td> und <th>.

Der Tag <table> dient als Container für die gesamte Tabelle. Er kennzeichnet Anfang und Ende der Tabelle und enthält alle anderen Tags, die die Tabelle betreffen.

Beispiel für die Erstellung einer Tabelle mit dem Tag <table>:

<table>
  <!-- Hier befinden sich die Reihen und Zellen der Tabelle -->
</table>

Der Tag <table> kann durch den Attribut border zusätzlich gestylt werden, um der Tabelle einen Rahmen zu geben:

<table border="1">
  <tr>
    <td>Beispielzelle</td>
  </tr>
</table>

Hier fügt das Attribut border="1" der Tabelle und ihren Zellen einen sichtbaren Rahmen hinzu.

2. Das Element <tr>

Der Tag <tr> bezeichnet eine Reihe der Tabelle (table row). Jede Tabellenreihe muss sich innerhalb des Tags <tr> befinden, das wiederum innerhalb von <table> platziert wird.

Beispiel:

<table border="1">
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
  </tr>
  <tr>
    <td>Zelle 3</td>
    <td>Zelle 4</td>
  </tr>
</table>

In diesem Beispiel besteht die Tabelle aus zwei Reihen. Jede Reihe enthält zwei Zellen.

3. Das Element <td>

Der Tag <td> (table data) wird verwendet, um Datenzellen in der Tabelle zu erstellen. Er bezeichnet eine normale Tabellenzelle, die Text, ein Bild oder anderen HTML-Inhalt enthalten kann.

Beispiel für die Verwendung von <td>:

<table border="1">
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
  </tr>
</table>

Die Zellen <td> bilden den Hauptinhalt der Tabelle und befinden sich innerhalb der Reihen <tr>.

4. Das Element <th>

Der Tag <th> (table header) wird für die Erstellung von Tabellenüberschriften verwendet. Zellen, die mit <th> erstellt werden, haben standardmäßig fetten Text und sind zentriert. Dies ist nützlich, um Spalten- oder Reihenüberschriften anzugeben.

Beispiel einer Tabelle mit Überschriften:

    
<table border="1">
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>30</td>
</tr>
<table border="1">
    
  

In diesem Beispiel wird <th> verwendet, um die Überschriften „Name“ und „Alter“ anzugeben, wodurch Benutzer schnell verstehen können, was die Daten in jeder Spalte bedeuten.