HTML Table Generator
Generieren Sie HTML-Tabellencode aus einem visuellen Editor. Fügen Sie Zeilen und Spalten hinzu, legen Sie Kopfzeilen und Stiloptionen fest. Exportieren Sie sauberes HTML mit Inline-Stilen oder CSS-Klassen.
Rows:3
Columns:4
Border style
Edit Table
So verwenden Sie HTML Table Generator
- 1Legen Sie die Anzahl der Zeilen und Spalten fest.
- 2Klicken Sie auf Zellen, um deren Inhalt zu bearbeiten.
- 3Schalten Sie die Kopfzeile um und wählen Sie einen Rahmenstil.
- 4Kopieren Sie den generierten HTML-Tabellencode.
ZenovayAnalytics
Wissen Sie, was Ihre Besucher wirklich tun.
- Besucher-Tracking in Echtzeit
- Datenschutz zuerst, kein Cookie-Banner
- In zwei Minuten eingerichtet
Verwandte Tools
CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.Häufig gestellte Fragen
Was ist die grundlegende HTML-Tabellenstruktur?▾
<table>: Wrapper-Element. <thead>: Tabellenkopfbereich (optional, aber empfohlen). <tbody>: Tabellenkörper. <tfoot>: Tabellenfußzeile (optional). <tr>: Tabellenzeile (innerhalb von thead, tbody oder tfoot). <th>: Tabellenkopfzelle – standardmäßig fett und zentriert, hat das scope-Attribut. <td>: Tabellendatenzelle. Beispiel: <table><thead><tr><th>Name</th><th>Alter</th></tr></thead><tbody><tr><td>Alice</td><td>30</td></tr></tbody></table>.
Wie füge ich HTML-Tabellen Rahmen hinzu?▾
Das HTML-border-Attribut ist veraltet. Verwenden Sie CSS: table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: 8px; }. border-collapse: collapse lässt benachbarte Rahmen zu einem zusammenfließen; border-collapse: separate (Standard) behält separate Rahmen. Für gestreifte Zeilen: tr:nth-child(even) { background: #f9f9f9; }. Für Hover: tr:hover { background: #f0f0f0; }.
Was sind colspan und rowspan?▾
colspan: wie viele Spalten eine Zelle überspannt. rowspan: wie viele Zeilen eine Zelle überspannt. Beispiel: <td colspan="2">überspannt 2 Spalten</td>. Wird für zusammengeführte Zellen verwendet, wie ein Kopf, der mehrere Spalten überdeckt oder eine Zelle, die mehrere Zeilen überdeckt. Bei der Verwendung von colspan/rowspan werden die übersprungenen Zellen aus dem HTML entfernt – die Tabelle wird dennoch korrekt gerendert. Die meisten Tabellenkalkulations-zu-HTML-Konverter behandeln dies automatisch.
Wie mache ich HTML-Tabellen barrierefrei?▾
Fügen Sie scope zu Kopfzellen hinzu: <th scope="col">Spalte</th> oder <th scope="row">Zeilenkopf</th>. Verwenden Sie <caption> für den Tabellentitel. Fügen Sie id/headers-Attribute für komplexe Tabellen hinzu: <th id="h1">Name</th>, <td headers="h1">Alice</td>. Verwenden Sie role="table" für Nicht-Tabellen-HTML-Elemente, die als Tabellen verwendet werden. Vermeiden Sie die Verwendung von Tabellen für das Layout – verwenden Sie stattdessen CSS Grid oder Flexbox. Screenreader kündigen die Spalten-/Zeilenanzahl an und navigieren mit Pfeiltasten zellenweise.
Wie mache ich HTML-Tabellen responsiv?▾
Umhüllen Sie die Tabelle mit einem scrollbaren Container: <div style="overflow-x:auto"><table>...</table></div>. Dies ermöglicht horizontales Scrollen auf kleinen Bildschirmen. Fortgeschrittenere Techniken: Weniger wichtige Spalten auf Mobilgeräten mit CSS ausblenden (display:none bei einem Breakpoint), data-label-Attribute + CSS verwenden, um Beschriftungen anzuzeigen, wenn Spalten zusammenklappen, oder auf Mobilgeräten in Karten umwandeln: table { width:100% } td { display:block; } td::before { content:attr(data-label); }. Bibliotheken wie DataTables behandeln das responsive Verhalten automatisch.