HTML Tabellen

HTML Tabellen sind ein grundlegendes HTML-Element zur strukturierten Darstellung von Daten. Sie ermöglichen es, Informationen in einem klaren und geordneten Format darzustellen, das sowohl für Benutzer als auch für Suchmaschinen leicht verständlich ist. In diesem Leitfaden erfahren Sie, wie Sie Tabellen in HTML erstellen, anpassen und formatieren können.

1. Grundlegende Struktur einer HTML-Tabelle

Eine HTML-Tabelle wird mit dem <table>-Tag erstellt. Innerhalb dieses Tags werden Zeilen mit <tr> (table row) definiert, und die Zellen innerhalb jeder Zeile werden mit <td> (table data) für normale Zellen und <th> (table header) für Tabellenüberschriften erstellt.

Grundlegendes Tabellenbeispiel

<table>
    <tr>
        <th>Name</th>
        <th>Alter</th>
        <th>Stadt</th>
    </tr>
    <tr>
        <td>Max Mustermann</td>
        <td>30</td>
        <td>Berlin</td>
    </tr>
    <tr>
        <td>Maria Müller</td>
        <td>25</td>
        <td>München</td>
    </tr>
</table>

Erklärung:

• <table>: Das Haupttag für die Tabelle.
• <tr>: Definiert eine Zeile der Tabelle.
• <th>: Definiert eine Tabellenkopfzelle (meist fett und zentriert dargestellt).
• <td>: Definiert eine normale Tabellenzelle.

2. Tabellenüberschriften und -körper

Um die Struktur einer Tabelle besser zu organisieren, können Sie <thead>, <tbody> und <tfoot> verwenden. Diese Tags helfen, Kopfzeilen, den Hauptinhalt und Fußzeilen der Tabelle voneinander zu trennen, was besonders bei großen Tabellen nützlich ist.

Beispiel mit <thead>, <tbody> und <tfoot>

<table>
    <thead>
        <tr>
            <th>Produkt</th>
            <th>Preis</th>
            <th>Menge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apfel</td>
            <td>1,50 €</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Banane</td>
            <td>0,99 €</td>
            <td>5</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Gesamt</td>
            <td>8,45 €</td>
        </tr>
    </tfoot>
</table>

Erklärung:

• <thead>: Beinhaltet den Tabellenkopf, der meist für Spaltenüberschriften verwendet wird.
• <tbody>: Enthält den Hauptteil der Tabelle.
• <tfoot>: Beinhaltet die Fußzeile der Tabelle, häufig für Summen oder andere abschließende Informationen genutzt.
• colspan="2": Kombiniert zwei Spalten in einer Tabellenzelle.

3. Rahmen und Abstände in Tabellen

Standardmäßig haben HTML-Tabellen keine sichtbaren Rahmen. Sie können jedoch Rahmen (sowohl außen als auch zwischen den Zellen) und Abstände mit CSS oder dem border-Attribut hinzufügen.

Tabelle mit Rahmen

<table border="1">
    <tr>
        <th>Name</th>
        <th>Beruf</th>
    </tr>
    <tr>
        <td>Anna Schmidt</td>
        <td>Lehrerin</td>
    </tr>
    <tr>
        <td>Peter Klein</td>
        <td>Ingenieur</td>
    </tr>
</table>

Hinweis: Das border-Attribut wird nicht mehr empfohlen. Verwenden Sie stattdessen CSS.

Tabelle mit CSS-Rahmen und Abständen

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 10px;
    }
</style>

<table>
    <tr>
        <th>Name</th>
        <th>Alter</th>
        <th>Land</th>
    </tr>
    <tr>
        <td>Sara</td>
        <td>28</td>
        <td>Deutschland</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>33</td>
        <td>USA</td>
    </tr>
</table>

Erklärung:

• border-collapse: collapse;: Verhindert doppelte Rahmen zwischen den Zellen.
• padding: 10px;: Fügt Abstand innerhalb der Zellen hinzu.

4. Tabellenzellen über mehrere Zeilen oder Spalten verbinden

Sie können Tabellenzellen kombinieren, indem Sie colspan (für Spalten) oder rowspan (für Zeilen) verwenden.

Zellen über mehrere Spalten verbinden

<table border="1">
    <tr>
        <th colspan="3">Monatsübersicht</th>
    </tr>
    <tr>
        <td>Januar</td>
        <td>Februar</td>
        <td>März</td>
    </tr>
</table>

Zellen über mehrere Zeilen verbinden

<table border="1">
    <tr>
        <th rowspan="2">Name</th>
        <td>Max Mustermann</td>
    </tr>
    <tr>
        <td>Anna Schmidt</td>
    </tr>
</table>

5. Tabellen mit CSS gestalten

Die Darstellung von Tabellen kann mit CSS stark verbessert werden. Farben, Schriften und Abstände können angepasst werden, um eine ansprechende Tabelle zu erstellen.

Tabelle mit CSS-Styling

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    th {
        background-color: #f2f2f2;
        text-align: left;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    tr:hover {
        background-color: #ddd;
    }
</style>

<table>
    <tr>
        <th>Produkt</th>
        <th>Preis</th>
        <th>Menge</th>
    </tr>
    <tr>
        <td>Apfel</td>
        <td>1,50 €</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Banane</td>
        <td>0,99 €</td>
        <td>5</td>
    </tr>
</table>

6. Responsive Tabellen

Um sicherzustellen, dass Tabellen auch auf kleineren Bildschirmen gut aussehen, können Sie CSS Media Queries verwenden, um Tabellen responsive zu gestalten. Hier ist ein einfaches Beispiel, wie Sie die Tabellen auf kleinen Bildschirmen scrollbar machen können.

Beispiel für eine responsive Tabelle

<style>
    .table-container {
        overflow-x: auto;
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
</style>

<div class="table-container">
    <table>
        <tr>
            <th>Produkt</th>
            <th>Preis</th>
            <th>Menge</th>
        </tr>
        <tr>
            <td>Apfel</td>
            <td>1,50 €</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Banane</td>
            <td>0,99 €</td>
            <td>5</td>
        </tr>
    </table>
</div>

Häufig gestellte Fragen