Der <table>-Tag in HTML: Beispiele und Anwendung

Der <table>-Tag in HTML wird verwendet, um Tabellen auf einer Webseite darzustellen. Tabellen dienen zur strukturierten Darstellung von Daten in Zeilen und Spalten. In diesem Artikel lernen Sie die grundlegende Syntax, wichtige Elemente und Techniken zur Gestaltung und Optimierung von Tabellen kennen.

Grundlegende Syntax einer Tabelle

Eine HTML-Tabelle wird mit dem <table>-Tag erstellt. Sie besteht aus Zeilen (<tr>), die wiederum Zellen enthalten. Diese Zellen werden mit <td> (Tabellenzelle) oder <th> (Tabellenkopf) definiert.

Beispiel:

<table>
    <tr>
        <th>Spalte 1</th>
        <th>Spalte 2</th>
        <th>Spalte 3</th>
    </tr>
    <tr>
        <td>Wert 1</td>
        <td>Wert 2</td>
        <td>Wert 3</td>
    </tr>
    <tr>
        <td>Wert 4</td>
        <td>Wert 5</td>
        <td>Wert 6</td>
    </tr>
</table>

Darstellung im Browser:

Spalte 1Spalte 2Spalte 3
Wert 1Wert 2Wert 3
Wert 4Wert 5Wert 6

Wichtige Elemente innerhalb des <table>-Tags

  • <table>: Das Hauptelement, das die gesamte Tabelle definiert.
  • <tr>: Eine Zeile in der Tabelle.
  • <td>: Eine Zelle, die normale Daten enthält.
  • <th>: Eine Kopfzelle, die standardmäßig fett und zentriert dargestellt wird.
  • <caption>: Fügt der Tabelle eine Überschrift hinzu.

Beispiel mit Caption:

<table>
    <caption>Beispieltabelle</caption>
    <tr>
        <th>Produkt</th>
        <th>Preis</th>
        <th>Anzahl</th>
    </tr>
    <tr>
        <td>Apfel</td>
        <td>1,00 €</td>
        <td>10</td>
    </tr>
</table>

Erweiterte Funktionen

Zellen über mehrere Spalten oder Zeilen verbinden

  • colspan: Kombiniert mehrere Spalten.
  • rowspan: Kombiniert mehrere Zeilen.

Beispiel:

<table>
    <tr>
        <th>Name</th>
        <th colspan="2">Details</th>
    </tr>
    <tr>
        <td>Apfel</td>
        <td>Rot</td>
        <td>1,00 €</td>
    </tr>
    <tr>
        <td>Banane</td>
        <td>Gelb</td>
        <td>0,50 €</td>
    </tr>
</table>

Darstellung im Browser:

NameDetails
ApfelRot1,00 €
BananeGelb0,50 €

Tabellen mit CSS gestalten

Mit CSS können Tabellen ansprechender gestaltet werden:

Beispiel:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
    }
    th {
        background-color: #f4f4f4;
    }
</style>

Responsive Tabellen

Bei komplexen Tabellen kann die Darstellung auf mobilen Geräten schwierig werden. Mit CSS können Sie Tabellen für kleinere Bildschirme optimieren.

Beispiel:

<style>
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
</style>

Fazit

Der <table>-Tag ist ein leistungsfähiges Werkzeug in HTML, um Daten in strukturierter Form darzustellen. Mit grundlegender Syntax, erweiterten Funktionen wie colspan und rowspan sowie durch die Nutzung von CSS können Tabellen vielseitig und ansprechend gestaltet werden. Für moderne Webseiten ist es zudem wichtig, Tabellen responsiv zu gestalten, um sie auf verschiedenen Geräten nutzbar zu machen.

Letzte Bearbeitung am Montag, 30. Dezember 2024 – 11:37 Uhr von Alex, Webmaster für Google und Bing SEO.

Konnten wir deine Fragen zu Table Befehl – Um eine Tabelle in HTML zu erstellen, werden verschiedene Tags verwendet beantworten? Lass es uns gerne wissen, falls etwas nicht stimmen sollte. Feedback ist gerne gesehen, auch zum Thema Table Befehl – Um eine Tabelle in HTML zu erstellen, werden verschiedene Tags verwendet.