Tabellen · FWT Dokumentation

Inhalt / Tabellen

Tabellen in FWT

Tabellen sind für echte Daten gedacht. Sie sollen übersichtlich, lesbar und nutzbar bleiben – auch dann, wenn viele Informationen dargestellt werden müssen.

FWT bietet dafür klassische Tabellen, moderne Varianten, Statuszeilen, Badges, Aktionsspalten, kompakte und luftige Darstellungen sowie einen responsiven Tabellen-Wrapper.

Wichtig: FWT-Tabellen bleiben echte HTML-Tabellen mit table, thead, tbody, th und td.

Basis

Klassische Datentabelle

Die Basistabelle ist ruhig, sauber und gut lesbar. Sie ist der Ausgangspunkt für alle weiteren Varianten.

Live-Beispiel

Normale Datentabelle
Projekt	Status	Termin	Betrag
Website Relaunch	In Arbeit	12.06.2026	1.250,00 €
Flyer Druck	Freigegeben	18.06.2026	340,00 €
Logo-Anpassung	Prüfung	21.06.2026	180,00 €

HTML-Code anzeigen

<div class="fwt-table-wrap">
    <table class="fwt-table">
        <caption>Normale Datentabelle</caption>

        <thead>
            <tr>
                <th>Projekt</th>
                <th>Status</th>
                <th>Termin</th>
                <th class="fwt-table-right">Betrag</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Website Relaunch</td>
                <td>In Arbeit</td>
                <td>12.06.2026</td>
                <td class="fwt-table-number">1.250,00 €</td>
            </tr>

            <tr>
                <td>Flyer Druck</td>
                <td>Freigegeben</td>
                <td>18.06.2026</td>
                <td class="fwt-table-number">340,00 €</td>
            </tr>

            <tr>
                <td>Logo-Anpassung</td>
                <td>Prüfung</td>
                <td>21.06.2026</td>
                <td class="fwt-table-number">180,00 €</td>
            </tr>
        </tbody>
    </table>
</div>

Modern

Moderne Tabelle mit Stripe und Hover

Die moderne Variante wirkt hochwertiger und hilft Nutzern, Zeilen besser zu verfolgen. Hover und Streifen dürfen die Lesbarkeit aber nicht stören.

Live-Beispiel

Name	Bereich	Status	Fortschritt
FWT Farben	Designsystem	Fertig	100 %
Grid-System	Layout	In Prüfung	85 %
Tabellen	Inhalt	Aufbau	45 %

HTML-Code anzeigen

<div class="fwt-table-wrap">
    <table class="fwt-table fwt-table-modern fwt-table-striped fwt-table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Bereich</th>
                <th>Status</th>
                <th class="fwt-table-right">Fortschritt</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>FWT Farben</td>
                <td>Designsystem</td>
                <td>Fertig</td>
                <td class="fwt-table-number">100 %</td>
            </tr>

            <tr>
                <td>Grid-System</td>
                <td>Layout</td>
                <td>In Prüfung</td>
                <td class="fwt-table-number">85 %</td>
            </tr>

            <tr>
                <td>Tabellen</td>
                <td>Inhalt</td>
                <td>Aufbau</td>
                <td class="fwt-table-number">45 %</td>
            </tr>
        </tbody>
    </table>
</div>

fwt-table-modern stärkt die Kopfzeile.

fwt-table-striped trennt Zeilen dezenter.

fwt-table-hover hilft bei breiten Tabellen.

Status

Statuszeilen und Badges

Statuszeilen eignen sich für Aufgaben, Tickets, Bestellungen, Prüfstände oder Adminlisten. Die linke Akzentlinie hilft bei der Orientierung, ohne die ganze Tabelle zu überladen.

Live-Beispiel

Aufgabe	Status	Hinweis	Fällig
Farbdoku prüfen	erledigt	Kann erstmal so bleiben.	31.05.2026
Bilder erweitern	später	Für ein nächstes Release vormerken.	offen
Tabellen testen	prüfen	Responsive Verhalten kontrollieren.	heute
Kontrastfehler	kritisch	Text darf nicht schlecht lesbar werden.	sofort

HTML-Code anzeigen

<div class="fwt-table-wrap">
    <table class="fwt-table fwt-table-modern fwt-table-status">
        <thead>
            <tr>
                <th>Aufgabe</th>
                <th>Status</th>
                <th>Hinweis</th>
                <th>Fällig</th>
            </tr>
        </thead>

        <tbody>
            <tr class="fwt-table-row-success">
                <td>Farbdoku prüfen</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-success">
                        erledigt
                    </span>
                </td>
                <td>Kann erstmal so bleiben.</td>
                <td>31.05.2026</td>
            </tr>

            <tr class="fwt-table-row-info">
                <td>Bilder erweitern</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-info">
                        später
                    </span>
                </td>
                <td>Für ein nächstes Release vormerken.</td>
                <td>offen</td>
            </tr>

            <tr class="fwt-table-row-warning">
                <td>Tabellen testen</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-warning">
                        prüfen
                    </span>
                </td>
                <td>Responsive Verhalten kontrollieren.</td>
                <td>heute</td>
            </tr>

            <tr class="fwt-table-row-danger">
                <td>Kontrastfehler</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-danger">
                        kritisch
                    </span>
                </td>
                <td>Text darf nicht schlecht lesbar werden.</td>
                <td>sofort</td>
            </tr>
        </tbody>
    </table>
</div>

Farbe unterstützt die Bedeutung. Der Status muss trotzdem als Text sichtbar bleiben.

Aktionen

Tabellen mit Aktionen

Viele Admin-Tabellen brauchen Aktionen wie Ansehen, Bearbeiten oder Löschen. FWT richtet diese Aktionen sauber aus und hält sie als Gruppe zusammen.

Live-Beispiel

Eintrag	Status	Geändert	Aktionen
Startseite	aktiv	31.05.2026	Ansehen Bearbeiten Löschen
Impressum	Pflichtseite	30.05.2026	Ansehen Bearbeiten
Alte Demo	inaktiv	28.05.2026	Ansehen Entfernen

HTML-Code anzeigen

<div class="fwt-table-wrap">
    <table class="fwt-table fwt-table-modern fwt-table-hover">
        <thead>
            <tr>
                <th>Eintrag</th>
                <th>Status</th>
                <th>Geändert</th>
                <th class="fwt-table-right">Aktionen</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Startseite</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-success">
                        aktiv
                    </span>
                </td>
                <td>31.05.2026</td>
                <td class="fwt-table-right">
                    <div class="fwt-table-actions">
                        <a class="fwt-table-action" href="#">Ansehen</a>
                        <a class="fwt-table-action" href="#">Bearbeiten</a>
                        <a class="fwt-table-action fwt-table-action-danger" href="#">Löschen</a>
                    </div>
                </td>
            </tr>

            <tr>
                <td>Impressum</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-info">
                        Pflichtseite
                    </span>
                </td>
                <td>30.05.2026</td>
                <td class="fwt-table-right">
                    <div class="fwt-table-actions">
                        <a class="fwt-table-action" href="#">Ansehen</a>
                        <a class="fwt-table-action" href="#">Bearbeiten</a>
                    </div>
                </td>
            </tr>

            <tr>
                <td>Alte Demo</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-muted">
                        inaktiv
                    </span>
                </td>
                <td>28.05.2026</td>
                <td class="fwt-table-right">
                    <div class="fwt-table-actions">
                        <a class="fwt-table-action" href="#">Ansehen</a>
                        <a class="fwt-table-action fwt-table-action-danger" href="#">Entfernen</a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Dichte

Kompakte und luftige Tabellen

Nicht jede Tabelle braucht dieselbe Zellhöhe. Adminbereiche profitieren oft von kompakten Tabellen. Öffentliche Übersichten dürfen luftiger wirken.

Kompakte Tabelle

Für viele Daten auf wenig Raum.

Live-Beispiel

ID	Kunde	Status	Netto
1024	Mustermann GmbH	offen	450,00 €
1025	Beispiel e. V.	bezahlt	890,00 €
1026	Privatkunde	Prüfung	120,00 €

HTML-Code anzeigen

<div class="fwt-table-wrap">
    <table class="fwt-table fwt-table-compact fwt-table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Kunde</th>
                <th>Status</th>
                <th class="fwt-table-right">Netto</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td class="fwt-table-number">1024</td>
                <td>Mustermann GmbH</td>
                <td>offen</td>
                <td class="fwt-table-number">450,00 €</td>
            </tr>

            <tr>
                <td class="fwt-table-number">1025</td>
                <td>Beispiel e. V.</td>
                <td>bezahlt</td>
                <td class="fwt-table-number">890,00 €</td>
            </tr>

            <tr>
                <td class="fwt-table-number">1026</td>
                <td>Privatkunde</td>
                <td>Prüfung</td>
                <td class="fwt-table-number">120,00 €</td>
            </tr>
        </tbody>
    </table>
</div>

Luftige Tabelle

Für öffentliche Seiten oder Tabellen mit weniger Daten.

Live-Beispiel

Leistung	Beschreibung	Status
Website-Beratung	Kurze Einschätzung für kleine Unternehmen und Vereine.	verfügbar
Designsystem	Grundlage für einheitliche Farben, Abstände und Bausteine.	Ausbau

HTML-Code anzeigen

<div class="fwt-table-wrap">
    <table class="fwt-table fwt-table-roomy fwt-table-modern">
        <thead>
            <tr>
                <th>Leistung</th>
                <th>Beschreibung</th>
                <th>Status</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Website-Beratung</td>
                <td>Kurze Einschätzung für kleine Unternehmen und Vereine.</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-success">
                        verfügbar
                    </span>
                </td>
            </tr>

            <tr>
                <td>Designsystem</td>
                <td>Grundlage für einheitliche Farben, Abstände und Bausteine.</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-info">
                        Ausbau
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Responsive

Responsive Tabellen

Tabellen mit vielen Spalten passen auf kleinen Bildschirmen nicht immer vollständig in die Breite. Der Wrapper sorgt dafür, dass die Tabelle horizontal scrollbar bleibt, statt das Layout zu zerstören.

Live-Beispiel

Datum	Vorgang	Kunde	Status	Bearbeiter	Betrag
31.05.2026	Website-Entwurf	Beispielkunde	offen	CSN	1.250,00 €
01.06.2026	Printdatenprüfung	Verein Nord	erledigt	Team	220,00 €

HTML-Code anzeigen

<div class="fwt-table-responsive">
    <table class="fwt-table fwt-table-modern fwt-table-hover">
        <thead>
            <tr>
                <th>Datum</th>
                <th>Vorgang</th>
                <th>Kunde</th>
                <th>Status</th>
                <th>Bearbeiter</th>
                <th class="fwt-table-right">Betrag</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td class="fwt-table-nowrap">31.05.2026</td>
                <td>Website-Entwurf</td>
                <td>Beispielkunde</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-warning">
                        offen
                    </span>
                </td>
                <td>CSN</td>
                <td class="fwt-table-number">1.250,00 €</td>
            </tr>

            <tr>
                <td class="fwt-table-nowrap">01.06.2026</td>
                <td>Printdatenprüfung</td>
                <td>Verein Nord</td>
                <td>
                    <span class="fwt-table-badge fwt-table-badge-success">
                        erledigt
                    </span>
                </td>
                <td>Team</td>
                <td class="fwt-table-number">220,00 €</td>
            </tr>
        </tbody>
    </table>
</div>

Für spätere Releases kann zusätzlich eine Kartenansicht für Mobilgeräte geplant werden. Für den Grundaufbau ist horizontales Scrollen die stabilere Lösung.

Hilfsklassen

Nützliche Tabellen-Hilfsklassen

Zahlen

Zahlen rechts ausrichten und mit tabellarischen Ziffern anzeigen.

<td class="fwt-table-number">1.250,00 €</td>

Nicht umbrechen

Für Datum, Statuscodes oder kurze IDs.

<td class="fwt-table-nowrap">31.05.2026</td>

Zentrieren

Für Icons, kurze Werte oder kleine Statusspalten.

<td class="fwt-table-center">OK</td>

Rechts ausrichten

Für Aktionsspalten oder Werte.

<td class="fwt-table-right">Aktion</td>

Dezenter Text

Für Nebeninformationen in Tabellen.

<td class="fwt-table-muted">optional</td>

Badge

Für Status direkt in Tabellenzellen.

<span class="fwt-table-badge fwt-table-badge-success">aktiv</span>

Barrierefreiheit

Tabellen richtig verwenden

Echte Tabellen nutzen

Für Datentabellen immer echte Tabellen verwenden, keine div-Konstruktionen.

<table class="fwt-table">...</table>

Kopfzeilen setzen

Tabellen brauchen klare Kopfzellen mit th.

<th>Projekt</th>

Caption nutzen

Eine Caption kann erklären, welche Daten die Tabelle zeigt.

<caption>Projektübersicht</caption>

Status nicht nur farbig

Ein Status braucht immer Text, nicht nur Farbe.

<span class="fwt-table-badge fwt-table-badge-warning">prüfen</span>

Nicht alles in Tabellen pressen

Tabellen sind für Daten. Für Layouts lieber Grid oder Cards verwenden.

<div class="fwt-grid fwt-grid-3">...</div>

Mobile Nutzung prüfen

Breite Tabellen müssen auf kleinen Bildschirmen bedienbar bleiben.

<div class="fwt-table-responsive">...</div>