HTML Tabelle Generator
Einfache Daten-Tabelle. Spalten getrennt mit Pipe (|), Zeilen getrennt mit Zeilenumbruch.
Anwendung & Beispiele
Spalten in Headers und Datenzeilen werden mit | (Pipe) getrennt. Beispiel-Zeile: Anna | 28 | Berlin. Die Tabelle wächst dynamisch mit der Anzahl der Pipes.
FAQ
Wie mache ich meine Tabelle barrierefrei?
Zellen-Headers (<th>) und <caption> helfen Screenreadern. Bei komplexen Tabellen <th scope="col"> / <th scope="row"> setzen, ggf. headers="id1 id2" auf Daten-Zellen für Mehrfach-Bezug.
Wann sollte ich KEINE Tabelle nutzen?
Für Layout — das ist seit HTML5 verpönt. Layout sollte über CSS Flexbox/Grid umgesetzt werden. <table> ausschließlich für tabellarische Daten.
Wie style ich Tabellen responsiv?
Klassisch in einen scrollbaren Container wrappen: <div style="overflow-x:auto"><table>…</table></div>. Alternativ per CSS auf Mobile als gestapelte Karten umbauen.
Wie füge ich eine weitere Spalte hinzu?
Einfach in den Headern und in jeder Datenzeile ein weiteres | setzen – die Tabelle passt sich automatisch an.
Wofür sind ID, Class und Title?
id identifiziert ein Element eindeutig (für CSS, JS, Anker-Links). class erlaubt CSS-Styling, mehrere Klassen werden mit Leerzeichen getrennt. title erzeugt einen Tooltip beim Hover.
Funktioniert der Code in allen Browsern?
Alle hier erzeugten Elemente sind valides HTML5 und werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Bei sehr alten Browsern (z.B. IE 11) kann es bei einzelnen Input-Typen wie color oder date Einschränkungen geben.