HTML Tabellen Sizes

Die HTML Größenanpassung (engl.: HTML Table Sizes) von Tabellen ist entscheidend, um sicherzustellen, dass Ihre Daten klar und übersichtlich dargestellt werden. In diesem Leitfaden erfahren Sie, wie Sie die Größe von Tabellen, Spalten und Zellen anpassen können, um ein ansprechendes Design zu erzielen.

1. Tabellenbreite und -höhe

Die Breite und Höhe von Tabellen können entweder in HTML direkt oder durch CSS festgelegt werden. Eine gut dimensionierte Tabelle verbessert die Lesbarkeit und Benutzerfreundlichkeit.

Beispiel für die Breite und Höhe einer Tabelle

<table style="width: 80%; height: 200px; border: 1px solid black;">
    <tr>
        <th>Name</th>
        <th>Alter</th>
    </tr>
    <tr>
        <td>Max Mustermann</td>
        <td>30</td>
    </tr>
</table>

Erklärung:

• style="width: 80%;": Setzt die Breite der Tabelle auf 80% der verfügbaren Breite des übergeordneten Elements.
• height: 200px;: Setzt eine feste Höhe für die Tabelle.

2. Spaltenbreite anpassen

Die Breite einzelner Spalten kann ebenfalls angepasst werden. Hierzu können Sie das width-Attribut im <th> oder <td>-Tag verwenden oder CSS verwenden.

Beispiel für die Anpassung der Spaltenbreite

<table style="width: 100%; border-collapse: collapse;">
    <tr>
        <th style="width: 50%;">Name</th>
        <th style="width: 50%;">Alter</th>
    </tr>
    <tr>
        <td>Max Mustermann</td>
        <td>30</td>
    </tr>
</table>

Hinweis: Wenn die Gesamtbreite der Tabelle 100% beträgt, kann die Angabe der Spaltenbreiten in Prozent hilfreich sein, um sicherzustellen, dass sie korrekt skaliert.

3. Automatische Größenanpassung

Wenn Sie möchten, dass die Spaltenbreiten automatisch an den Inhalt angepasst werden, können Sie CSS verwenden. Hierbei ist es hilfreich, table-layout: auto; zu setzen.

Beispiel für automatische Größenanpassung

<style>
    table {
        width: 100%;
        table-layout: auto; /* Automatische Größenanpassung */
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
    }
</style>

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

4. Feste und prozentuale Größenanpassung

Sie können sowohl feste Pixelwerte als auch prozentuale Werte für die Größenanpassung verwenden. Dies ist besonders nützlich, wenn Sie eine konsistente Darstellung auf verschiedenen Geräten anstreben.

Beispiel für feste und prozentuale Größenanpassung

<style>
    table {
        width: 100%; /* Tabelle nimmt die volle Breite ein */
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
    }
    th {
        width: 50px; /* Feste Breite für Kopfzeilen */
    }
    td {
        width: 30%; /* Prozentuale Breite für Datenzellen */
    }
</style>

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

5. Zellengrößen anpassen

Die Größe von Zellen kann durch die Eigenschaften padding, border und height beeinflusst werden. Diese Eigenschaften helfen, die Zellen visuell ansprechender zu gestalten und die Lesbarkeit zu verbessern.

Beispiel für die Anpassung der Zellengrößen

<style>
    th, td {
        border: 1px solid black;
        padding: 20px; /* Innenabstand */
        height: 50px; /* Feste Höhe für Zellen */
    }
</style>

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

6. Responsive Tabellen

Um sicherzustellen, dass Tabellen auf verschiedenen Bildschirmgrößen gut aussehen, können Sie CSS Media Queries verwenden, um die Größenanpassung dynamisch zu gestalten.

Beispiel für eine responsive Tabelle

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

    @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>Banane</td>
        <td>0,99 €</td>
    </tr>
</table>

Häufig gestellte Fragen