HTML Tabellen Headers

HTML Tabellenkopfzellen (engl.: HTML Table Headers) sind ein wesentliches Element in HTML-Tabellen, das dazu beiträgt, Daten strukturiert und verständlich darzustellen. Sie bieten eine klare Kennzeichnung der Inhalte in den jeweiligen Spalten und ermöglichen es Benutzern, die Tabelle effizienter zu nutzen. In diesem Leitfaden erfahren Sie, wie Sie Tabellenkopfzellen erstellen, formatieren und gestalten können.

1. Grundlagen der Tabellenkopfzellen

In HTML werden Tabellenkopfzellen mit dem <th>-Tag (table header) definiert. Diese Zellen sind in der Regel fett und zentriert, um den Text hervorzuheben und die Lesbarkeit zu erhöhen. Sie befinden sich innerhalb einer Zeile, die mit <tr> (table row) definiert wird.

Beispiel für eine einfache Tabelle mit Kopfzeilen

<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:

• <th>: Definiert eine Kopfzeile. Der Inhalt wird standardmäßig fett und zentriert dargestellt.
• <tr>: Definiert eine Zeile in der Tabelle.

2. Verwendung von <thead>, <tbody> und <tfoot>

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

Beispiel mit <thead> und <tbody>

<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>
</table>

Erklärung:

• <thead>: Beinhaltet den Tabellenkopf mit den Kopfzeilen.
• <tbody>: Enthält die Hauptdaten der Tabelle.

3. Styling von Tabellenkopfzellen

Tabellenkopfzellen können mit CSS gestaltet werden, um das Aussehen und die Lesbarkeit der Tabelle zu verbessern. Sie können beispielsweise Hintergründe, Textfarben und Schriftarten ändern.

Beispiel für das Styling von Kopfzeilen

<style>
    th {
        background-color: #f2f2f2; /* Hintergrundfarbe für Kopfzeilen */
        color: #333; /* Textfarbe */
        padding: 10px; /* Innenabstand */
        text-align: left; /* Textausrichtung */
    }
</style>

<table>
    <tr>
        <th>Name</th>
        <th>Alter</th>
        <th>Beruf</th>
    </tr>
    <tr>
        <td>Max Mustermann</td>
        <td>30</td>
        <td>Ingenieur</td>
    </tr>
</table>

4. Kopfzeilen über mehrere Spalten und Zeilen

Sie können Kopfzeilen auch über mehrere Spalten oder Zeilen hinweg kombinieren, indem Sie die Attribute colspan und rowspan verwenden. Dies ist nützlich, wenn eine Kopfzeile mehrere Kategorien oder Datenpunkte beschreibt.

Beispiel für colspan

<table>
    <tr>
        <th colspan="2">Monatsübersicht</th>
        <th>Gesamt</th>
    </tr>
    <tr>
        <td>Januar</td>
        <td>Februar</td>
        <td>100 €</td>
    </tr>
</table>

Beispiel für rowspan

<table>
    <tr>
        <th rowspan="2">Name</th>
        <th>Alter</th>
    </tr>
    <tr>
        <td>Max Mustermann</td>
    </tr>
</table>

5. Barrierefreiheit und Tabellenkopfzellen

Um die Zugänglichkeit von Tabellen zu verbessern, sollten Sie sicherstellen, dass die Kopfzeilen korrekt verwendet werden. Screenreader können so besser erkennen, welche Daten zu den jeweiligen Kopfzeilen gehören.

Beispiel für barrierefreie Tabellenkopfzellen

<table>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Alter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Max</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

Erklärung:

• scope="col": Gibt an, dass die Kopfzeile für die gesamte Spalte gilt, was die Lesbarkeit für Screenreader verbessert.

6. Responsive Tabellenkopfzellen

Um sicherzustellen, dass Tabellen auch auf mobilen Geräten gut aussehen, können Sie CSS Media Queries verwenden, um das Design der Kopfzeilen und der Tabelle anzupassen.

Beispiel für eine responsive Tabelle

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
    }

    @media screen and (max-width: 600px) {
        table, th, td {
            display: block; /* Tabelle wird blockartig angezeigt */
            width: 100%; /* Volle Breite */
        }
    }
</style>

<table>
    <tr>
        <th>Produkt</th>
        <th>Preis</th>
    </tr>
    <tr>
        <td>Apfel</td>
        <td>1,50 €</td>
    </tr>
</table>

Häufig gestellte Fragen