HTML Tabellen Colgroup

Das <colgroup>-Element in HTML wird verwendet, um Gruppen von Spalten in einer Tabelle zu definieren. Dies ermöglicht es Ihnen, bestimmte Stile für eine Gruppe von Spalten anzuwenden, ohne jeden einzelnen Spaltenkopf oder jede Zelle manuell anpassen zu müssen. In diesem Leitfaden erfahren Sie, wie Sie <colgroup> effektiv nutzen können.

1. Was ist ein Colgroup?

Ein <colgroup>-Element umschließt mehrere <col>-Elemente, die jeweils eine Spalte in der Tabelle repräsentieren. Mit diesem Element können Sie Stile, Breiten und andere Eigenschaften für mehrere Spalten gleichzeitig festlegen.

Beispiel für ein einfaches Colgroup

<table border="1">
    <colgroup>
        <col style="background-color: #f2f2f2;">
        <col style="width: 150px;">
        <col style="background-color: #e0e0e0;">
    </colgroup>
    <tr>
        <th>Name</th>
        <th>Alter</th>
        <th>Beruf</th>
    </tr>
    <tr>
        <td>Max Mustermann</td>
        <td>30</td>
        <td>Ingenieur</td>
    </tr>
    <tr>
        <td>Maria Müller</td>
        <td>25</td>
        <td>Ärztin</td>
    </tr>
</table>

Erklärung:

• Das <colgroup>-Element definiert eine Gruppe von drei Spalten.
• Die erste und dritte Spalte haben eine Hintergrundfarbe, während die zweite Spalte eine feste Breite von 150 Pixel hat.

2. Verwendung von Colgroup zur Stilgestaltung

Mit <colgroup> können Sie das Erscheinungsbild Ihrer Tabelle vereinfachen und gleichzeitig eine bessere Kontrolle über die Formatierung gewinnen.

Beispiel mit mehreren Colgroups

<table border="1">
    <colgroup>
        <col style="background-color: #f9f9f9;" />
        <col style="width: 100px;" />
    </colgroup>
    <colgroup>
        <col style="background-color: #e0e0e0;" />
    </colgroup>
    <tr>
        <th>Name</th>
        <th>Alter</th>
        <th>Beruf</th>
    </tr>
    <tr>
        <td>Max Mustermann</td>
        <td>30</td>
        <td>Ingenieur</td>
    </tr>
    <tr>
        <td>Maria Müller</td>
        <td>25</td>
        <td>Ärztin</td>
    </tr>
</table>

Erklärung:

• Hier werden zwei <colgroup>-Elemente verwendet. Die erste Gruppe hat zwei Spalten, während die zweite Gruppe eine einzige Spalte mit einer Hintergrundfarbe hat.

3. Spaltenbreiten mit Colgroup festlegen

Mit <colgroup> können Sie auch die Breiten mehrerer Spalten definieren, was besonders nützlich ist, wenn Sie eine konsistente Breite über viele Zeilen hinweg wünschen.

Beispiel für feste Spaltenbreiten

<table border="1">
    <colgroup>
        <col style="width: 150px;">
        <col style="width: 100px;">
        <col style="width: 200px;">
    </colgroup>
    <tr>
        <th>Name</th>
        <th>Alter</th>
        <th>Beruf</th>
    </tr>
    <tr>
        <td>Max Mustermann</td>
        <td>30</td>
        <td>Ingenieur</td>
    </tr>
    <tr>
        <td>Maria Müller</td>
        <td>25</td>
        <td>Ärztin</td>
    </tr>
</table>

Erklärung:

• Jede Spalte hat eine definierte Breite, was die Tabelle übersichtlich und gut strukturiert macht.

4. Stil und Formatierung

Zusätzlich zu den Breiten und Farben können Sie auch Schriftarten und andere Stile mit CSS auf die gesamte Gruppe anwenden.

Beispiel mit CSS-Stil

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

<table>
    <colgroup>
        <col style="background-color: #f9f9f9;" />
        <col style="width: 100px;" />
        <col style="background-color: #e0e0e0;" />
    </colgroup>
    <tr>
        <th>Name</th>
        <th>Alter</th>
        <th>Beruf</th>
    </tr>
    <tr>
        <td>Max Mustermann</td>
        <td>30</td>
        <td>Ingenieur</td>
    </tr>
    <tr>
        <td>Maria Müller</td>
        <td>25</td>
        <td>Ärztin</td>
    </tr>
</table>

Häufig gestellte Fragen