HTML Tabellen – Grundlagen

HTML-Tabellen sind ein grundlegender Bestandteil von Websites und werden auch heute noch verwendet, wenn Inhalte sinnvoll in tabellarischer Form dargestellt werden sollen. In diesem Artikel werden wir uns mit den Grundlagen von HTML-Tabellen befassen und schrittweise lernen, wie man Tabellen erstellt.

Wie kam früher das Design auf Websites

Früher wurde das Design von Websites ohne CSS realisiert. Stattdessen wurden unsichtbare Tabellen verwendet, um das Design zu strukturieren. Heutzutage werden HTML-Tabellen jedoch nicht mehr für das Design von Websites genutzt, sondern nur noch für die Darstellung von Inhalten, wie beispielsweise Fahrplänen.

Bestandteile einer Tabelle – Tabellenaufbau

Eine Tabelle besteht aus Reihen und Spalten. Um eine Tabelle zu erstellen, benötigen wir drei verschiedene HTML-Tags:

1. <table>: Der Start-Tag, der den Anfang der Tabelle kennzeichnet.
2. <tr>: Der Start-Tag für eine Tabellenreihe (englisch: table row).
3. <td>: Der Start-Tag für eine Tabellenzelle (englisch: table data).

Es ist wichtig, sowohl den Start-Tag als auch den entsprechenden End-Tag zu setzen, um valide HTML zu erstellen.

Tabellenzeile erstellen – <tr>

Um eine Tabellenzeile zu erstellen, verwenden wir das <tr>-Tag. “tr” steht für “Tabellenreihe”. Der Code sieht wie folgt aus:

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

Um die Anzahl der Zellen in einer Tabellenzeile festzulegen, verwenden wir das <td>-Tag.

Tabellenzelle erstellen

Um eine Tabellenzelle zu erstellen, verwenden wir das <td>-Tag. “td” steht für “Tabellen-Daten”. Der Code sieht wie folgt aus:

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

Inhalt in Tabelle

Um Inhalt in die Tabelle einzufügen, fügen wir einfach den gewünschten Text zwischen die <td>-Tags ein:

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

Rahmen der Tabelle anzeigen

Um den Rahmen der Tabelle anzuzeigen, verwenden wir das veraltete Attribut border="1". Bitte beachten Sie, dass dieses Attribut eine Warnung oder Fehlermeldung bei der Validierung des Codes verursachen kann. In CSS wird der Rahmen normalerweise über den CSS-Code table, td, th { border: 1px solid orange; } definiert.

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

Mehr Spalten und Zeilen hinzufügen

Um weitere Spalten hinzuzufügen, fügen wir einfach weitere <td>-Tags hinzu. Genauso können wir weitere Zeilen hinzufügen:

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

So sollte der Aufbau einer einfachen Tabelle aussehen. Achten Sie auf die Einrückungen, um die einzelnen Zellen klar voneinander zu trennen.

Tipp: Fehler bei Tabellen vermeiden

Um Probleme zu vermeiden und den Code übersichtlicher zu gestalten, sollten Sie sauberen Code verwenden. Verwenden Sie Einrückungen, um die Struktur der Tabelle besser erkennbar zu machen. Zu Beginn können Sie die einzelnen Zellen auch durchnummerieren.

Beim Erstellen von Tabellen ist es außerdem empfehlenswert, das Attribut border="1" am <table>-Tag zu setzen, um den Rahmen der Tabelle anzuzeigen.

Das war’s! Jetzt können Sie Ihre eigenen HTML-Tabellen erstellen und Inhalte übersichtlich darstellen. Viel Spaß beim Experimentieren!