CSS Table Alignment – Beispiele + Erklärungen

1. Tabelle horizontal zentrieren

Befehl: margin: 0 auto;

Erklärung: Der freie Platz links und rechts wird automatisch verteilt → die Tabelle wird zentriert.

1. Zentrierung einer Tabelle

.center-table {
    width: 300px;
    margin: 0 auto;

    BEFEHL: margin: 0 auto;
    ERKLÄRUNG:
    - "margin" ist der Außenabstand einer Box.
    - "0 auto" bedeutet:
        oben/unten = 0,
        links/rechts = automatisch.
    - Der Browser verteilt den freien Platz gleichmäßig.
    - Ergebnis: Die Tabelle wird horizontal zentriert.
}

2. Vertikale Ausrichtung in Zellen

Befehl: vertical-align: top | middle | bottom;

Erklärung: Bestimmt, ob der Inhalt einer Zelle oben, mittig oder unten sitzt.

2. Vertikale Ausrichtung

.vertical td {
    width: 120px;
    height: 80px;
    border: 2px solid blue;

    BEFEHL: vertical-align
    ERKLÄRUNG:
    - Bestimmt, wie Inhalte VERTIKAL ausgerichtet werden.
    - Mögliche Werte:
        top    → Inhalt oben
        middle → Inhalt mittig
        bottom → Inhalt unten
}

3. Text horizontal ausrichten

Befehl: text-align: left | center | right;

Erklärung: Richtet nur den Text horizontal aus, nicht die Zelle selbst.

3. Text-Ausrichtung

.text-demo td {
    width: 120px;
    border: 2px solid green;

    BEFEHL: text-align
    ERKLÄRUNG:
    - Bestimmt, wie TEXT innerhalb einer Zelle ausgerichtet wird.
    - Mögliche Werte:
        left   → linksbündig
        center → zentriert
        right  → rechtsbündig
}

4. Tabelle links und rechts ausrichten (float)

Befehle: float: left; und float: right;

Erklärung: Mit float können Tabellen an eine Seite „geklebt“ werden.

4. Float-Beispiele

.float-left {
    float: left;
    margin-right: 20px;
    width: 200px;

    BEFEHL: float: left;
    ERKLÄRUNG:
    - Das Element "schwimmt" nach links.
    - Andere Inhalte fließen rechts daneben.
}

.float-right {
    float: right;
    width: 200px;

    BEFEHL: float: right;
    ERKLÄRUNG:
    - Das Element wird an den rechten Rand geschoben.
    - Andere Inhalte fließen links daneben.
}

.clear {
    clear: both;  /* löscht die Floats */
}