HTML Tabelle Generator
HTML-Tabellen visuell erstellen – Zeilen, Spalten, Daten eingeben und sauberen Code mit CSS-Styling kopieren.
Größe
Daten
Auf Mobile horizontal scrollbar bei vielen Spalten.
Styling
Vorschau
| Spalte 1 | Spalte 2 | Spalte 3 |
|---|---|---|
| Wert 1 | Wert 2 | Wert 3 |
| Wert 4 | Wert 5 | Wert 6 |
HTML-Code
<table class="my-table bordered">
<thead>
<tr>
<th scope="col">Spalte 1</th>
<th scope="col">Spalte 2</th>
<th scope="col">Spalte 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wert 1</td>
<td>Wert 2</td>
<td>Wert 3</td>
</tr>
<tr>
<td>Wert 4</td>
<td>Wert 5</td>
<td>Wert 6</td>
</tr>
</tbody>
</table>CSS-Code
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table th,
.my-table td {
padding: 12px 16px;
text-align: left;
}
.my-table.bordered th,
.my-table.bordered td {
border: 1px solid #e5e7eb;
}Das Wichtigste auf einen Blick
- Visuelle Erstellung von HTML-Tabellen mit Live-Vorschau.
- Zeilen und Spalten dynamisch hinzufügen oder entfernen.
- Daten direkt im Grid eingeben – kein händisches HTML nötig.
- Optionales CSS-Styling: Striped, Hover, Border, Compact, Responsive.
- Output ist semantisch korrekt mit thead/tbody/th und scope-Attributen.
HTML-Tabellen sind das richtige Werkzeug für tabellarische Daten: Preislisten, Vergleiche, Statistiken, Verzeichnisse, Spec-Sheets. Die Struktur basiert auf wenigen Tags – <table> als Container, <thead> für die Kopfzeile, <tbody> für die Datenzeilen, <tr> für jede Zeile und <th>/<td> für Header- bzw. Datenzellen. Die semantische Trennung ist nicht nur Konvention: Screen-Reader nutzen sie zur Navigation, Suchmaschinen verstehen den Kontext besser, und Styling über CSS wird sauberer. Nicht zu nutzen sind Tabellen für Seitenlayouts – dafür gibt es seit Jahren CSS Grid und Flexbox.
Was unser Tool besonders macht: Statt händisches HTML zu schreiben, gibst du Spalten und Zeilen visuell in einem editierbaren Grid ein, aktivierst optional Header und Caption und siehst die Tabelle live. Fünf gängige CSS-Patterns sind als Toggles direkt verfügbar – Striped Rows für Lesbarkeit, Hover-Effekt für Interaktivität, Border, Compact-Padding und ein Responsive-Wrapper mit overflow-x: auto für Mobile. Der HTML-Output ist semantisch korrekt mit <thead>/<tbody>, scope="col" an den Headern und einer optionalen <caption> für Accessibility und SEO. Das CSS kommt als separater Block, nur wenn auch wirklich Styling aktiv ist.
Hintergrund & Anwendungen
Wie eine HTML-Tabelle aufgebaut wird
Die HTML-Struktur einer Tabelle Schritt für Schritt – semantisch korrekt und barrierefrei.
- 1<table>-Element öffnet die Tabelle.
- 2<thead> umschließt die Kopfzeile (semantisch wichtig).
- 3<tr> erstellt eine Tabellen-Zeile.
- 4<th scope="col"> definiert eine Header-Zelle.
- 5<tbody> umschließt alle Datenzeilen.
- 6<td> definiert eine Datenzelle.
- 7Alle Tags werden korrekt geschlossen.
- 8Optional: <caption> für den Tabellen-Titel oberhalb der Tabelle.
Tabellen-Patterns im Vergleich
Wann nutzt du welches Styling?
Häufig gestellte Fragen
Anleitung
- 1
Größe wählen
Anzahl Spalten und Zeilen einstellen, optional Header-Zeile und Caption aktivieren.
- 2
Daten eingeben
In jede Zelle klicken und den Wert eintippen – die Live-Vorschau aktualisiert sich sofort.
- 3
Styling wählen
Optional Striped Rows, Hover, Border, Compact-Padding oder Responsive-Wrapper aktivieren.
- 4
Code kopieren
HTML- und CSS-Code mit einem Klick übernehmen. CSS erscheint nur, wenn auch wirklich Styling aktiv ist.
Über Selbststarter
Selbststarter ist deine Sammlung kostenloser Online-Tools – aktuell Generatoren, bald auch Konverter und mehr. Alle Tools laufen im Browser, ohne Anmeldung, ohne Tracking.
- #html
- #tabelle
- #frontend
- #webentwicklung
- #css