Tabellen in HTML

Was sind HTML-Tabellen?

HTML-Tabellen werden verwendet, um Daten übersichtlich in Zeilen und Spalten darzustellen. Sie eignen sich zum Beispiel für Preislisten, Stundenpläne und statistische Informationen.

Die wichtigsten HTML-Elemente sind: <table>, <tr>, <th> und <td>.

1. Einfache Tabellen

Mit <table> wird eine Tabelle erstellt. <tr> definiert eine Tabellenzeile. <td> enthält eine normale Tabellenzelle.

HTML-Code

<table>
    <tr>
        <td>Anna</td>
        <td>Berlin</td>
    </tr>
    <tr>
        <td>Max</td>
        <td>Leipzig</td>
    </tr>
</table>

Ergebnis

Die sichtbaren Rahmen werden hier mit CSS gestaltet.

2. Tabellen mit Überschriften

Mit dem Element <th> werden Tabellenüberschriften definiert. Diese erscheinen standardmäßig fett.

HTML-Code

<table>
    <tr>
        <th>Name</th>
        <th>Alter</th>
        <th>Stadt</th>
    </tr>
    <tr>
        <td>Anna</td>
        <td>25</td>
        <td>Berlin</td>
    </tr>
    <tr>
        <td>Max</td>
        <td>30</td>
        <td>Leipzig</td>
    </tr>
</table>

Ergebnis

3. Spalten verbinden mit colspan

Mit dem Attribut colspan können mehrere Spalten zu einer einzigen Tabellenzelle verbunden werden.

HTML-Code

<table>
    <tr>
        <th colspan="3">
            Stundenplan
        </th>
    </tr>
    <tr>
        <th>Montag</th>
        <th>Dienstag</th>
        <th>Mittwoch</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>CSS</td>
        <td>PHP</td>
    </tr>
</table>

Ergebnis

Erklärung: colspan="3" bedeutet, dass die Zelle die Breite von drei Spalten einnimmt.

4. Zeilen verbinden mit rowspan

Mit dem Attribut rowspan können mehrere Zeilen miteinander verbunden werden.

HTML-Code

<table>
    <tr>
        <th>Bereich</th>
        <th>Technologie</th>
    </tr>
    <tr>
        <td rowspan="2">Frontend</td>
        <td>HTML</td>
    </tr>
    <tr>
        <td>CSS</td>
    </tr>
    <tr>
        <td>Backend</td>
        <td>PHP</td>
    </tr>
</table>

Ergebnis

Erklärung: rowspan="2" bedeutet, dass eine Zelle über zwei Zeilen reicht.

5. Komplexe Tabellen

Komplexe Tabellen können mehrere Überschriftenebenen enthalten. Dabei lassen sich colspan und rowspan kombinieren.

HTML-Code

<table>
    <tr>
        <th rowspan="2">Produkt</th>
        <th colspan="2">Preis</th>
    </tr>
    <tr>
        <th>Netto</th>
        <th>Brutto</th>
    </tr>
    <tr>
        <td>Monitor</td>
        <td>100,00 €</td>
        <td>119,00 €</td>
    </tr>
    <tr>
        <td>Tastatur</td>
        <td>50,00 €</td>
        <td>59,50 €</td>
    </tr>
</table>

Ergebnis

6. Tabellen strukturieren

Größere Tabellen können mit <thead>, <tbody> und <tfoot> in Bereiche unterteilt werden.

HTML-Code

<table>
    <thead>
        <tr>
            <th>Produkt</th>
            <th>Preis</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Maus</td>
            <td>20 €</td>
        </tr>
        <tr>
            <td>Tastatur</td>
            <td>50 €</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Gesamt</th>
            <td>70 €</td>
        </tr>
    </tfoot>
</table>

Ergebnis

7. Tabellen mit CSS gestalten

Mit CSS können Tabellen übersichtlicher gestaltet werden. Beispielsweise können abwechselnde Zeilenfarben und Hover-Effekte verwendet werden.

CSS-Code

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #777;
    padding: 10px;
}

tbody tr:nth-child(even) {
    background-color: #f0f5fa;
}

tbody tr:hover {
    background-color: #dceeff;
}

Ergebnis

Bewegen Sie die Maus über eine Tabellenzeile. Die Hintergrundfarbe verändert sich automatisch.

8. Übersicht der HTML-Tabellenelemente

9. Praktische Übungen

<table></table>

<table>
    <tr>
        <td>Anna</td>
        <td>Berlin</td>
    </tr>
</table>

<tr>

<th>

<table>
    <tr>
        <th>Name</th>
        <th>Stadt</th>
    </tr>
</table>

colspan

<th colspan="3">
    Stundenplan
</th>

rowspan

<td rowspan="2">
    Frontend
</td>

<thead>
<tbody>
<tfoot>

border-collapse: collapse;

tbody tr:nth-child(even) {
    background-color: #f0f5fa;
}

tbody tr:hover {
    background-color: #dceeff;
}

Zusammenfassung

HTML-Tabellen ermöglichen eine strukturierte Darstellung von Daten. Mit colspan und rowspan können Zellen miteinander verbunden werden. Die Elemente thead, tbody und tfoot sorgen für eine übersichtliche Struktur. Mit CSS lassen sich Tabellen zusätzlich gestalten.