HTML-Tabellen-Generator

Hinweise für saubere HTML-Tabellen

Verwende <thead> für echte Kopfzeilen, <tbody> für Datensätze und eine sinnvolle caption, wenn der Tabellenzweck nicht bereits aus dem Kontext klar ist.

Für sehr breite Tabellen ist ein responsiver Wrapper sinnvoll. Die eigentlichen Tabellenzellen bleiben dabei semantisch sauber und können separat per CSS gestaltet werden.

Semantik und Zugänglichkeit

Eine HTML-Tabelle ist für zusammengehörige Daten gedacht, nicht für das allgemeine Seitenlayout. Der Generator erzeugt bei aktivierter Kopfzeile <thead> und <tbody>. Die erste Zeile wird als <th> ausgegeben; mit der Option scope="col" wird die Zuordnung als Spaltenkopf zusätzlich eindeutig.

Eine caption beschreibt den Zweck der Tabelle, wenn er nicht schon aus dem umgebenden Text hervorgeht. Der Generator erzeugt keinen <tfoot>-Bereich und keine Zeilenköpfe oder mehrstufigen Kopfmatrizen. Für Summen, komplexe Tabellen oder zusätzliche scope="row"-Angaben musst du den Code nachbearbeiten. Semantische Elemente helfen der Barrierefreiheit, ersetzen aber keine Prüfung des konkreten Inhalts.

Escaping, Vorschau und sichere Ausgabe

Die Option Zellinhalte HTML-sicher escapen ist standardmäßig aktiv. Dann werden unter anderem &, <, >, Anführungszeichen und Apostrophe in Zellen und Attributwerten als Text ausgegeben. Ein Wert wie <b>Test</b> bleibt dadurch Text und wird nicht zu einer fetten Überschrift.

Die Vorschau setzt Zell- und Caption-Inhalte unabhängig von dieser Option als Text in DOM-Elemente ein. Auch bei einem Testwert <script>alert(1)</script> wird in der Vorschau kein Script ausgeführt. Wenn du das Escaping deaktivierst, schreibt der Generator die Eingabe absichtlich als Roh-HTML in den erzeugten Code. Verwende diese Option nur mit vertrauenswürdigen, bewusst formatierten Daten und prüfe den Code vor dem Einbau in eine Website.

CSV-Parsing und Grenzen

• Wähle Semikolon, Komma, Tabulator oder Pipe; bei „Automatisch“ wertet das Tool die ersten Datenzeilen aus.
• Doppelte Anführungszeichen und ein Trennzeichen innerhalb eines zitierten Feldes werden in einer Datenzeile berücksichtigt.
• Ein zitiertes Feld, das über mehrere physische Zeilen läuft, wird nicht als vollständiger mehrzeiliger CSV-Datensatz unterstützt.
• Uneinheitliche Zeilen werden auf die größte Spaltenzahl aufgefüllt. Leerzeilen können übersprungen und Zellränder automatisch getrimmt werden.
• Die Eingabe wird als Browser-Text verarbeitet; eine automatische Zeichensatz-Erkennung oder eine vollständige RFC-4180-Prüfung ist nicht Bestandteil des Tools.

Im Formularmodus sind derzeit höchstens 12 Spalten und 30 Zeilen vorgesehen. Eingefügte Daten haben kein vergleichbares Formularlimit, aber sehr große Tabellen bleiben unpaginiert und ungefiltert. Nutze für große Datenmengen besser Pagination, Suche oder eine spezialisierte Tabellenkomponente.

Reproduzierbare Beispiele

Eine kleine semantische Tabelle mit Caption und Spaltenköpfen sieht sinngemäß so aus:

<table>
   <caption>Teamstatus</caption>
   <thead>
      <tr><th scope="col">Name</th><th scope="col">Status</th></tr>
   </thead>
   <tbody>
      <tr><td>Ada</td><td>Aktiv</td></tr>
   </tbody>
</table>

Teste zusätzlich den Wert <b>Test</b> mit aktivem und deaktiviertem Escaping, eine Tabelle mit unterschiedlich langen Zeilen sowie eine breite Tabelle im responsiven Wrapper. Prüfe anschließend Vorschau, Ausgabe, Kopieren und Download.

Weiterführend: HTML Standard: Tabellen und MDN: HTML tables.