Markdown-Tabellen-Generator

Den Markdown-Tabellen-Generator verwenden

1. Spaltenheader tippen in die Eingaben oben im Grid. Jeder Header entspricht einer einzelnen Spalte in der gerenderten Markdown-Tabelle.
2. Ausrichtung pro Spalte wählen. Das Dropdown über jedem Header wechselt zwischen links, mitte und rechts; die Trennzeile unter dem Header aktualisiert sich von :--- zu :---: oder ---: entsprechend.
3. Zellen zeilenweise füllen. Tab zum horizontalen Bewegen und Enter zum Bestätigen eines Werts verwenden. Das Markdown-Ausgabepanel rendert bei jedem Tastendruck neu, sodass du das durch Pipe ausgerichtete Ergebnis live siehst.
4. Grid vergrößern mit der Schaltfläche + Zeile hinzufügen unter den Daten und der Schaltfläche + Spalte am rechten Rand der Kopfzeile. Eine Zeile durch Klicken auf die x-Schaltfläche rechts entfernen; eine Spalte durch Löschen ihres Headers und Verwenden der Papierkorb-Steuerung entfernen.
5. Kopieren das formatierte Markdown aus dem Ausgabepanel und in eine README, ein GitHub-Issue, ein Notion-Dokument oder einen beliebigen GFM-fähigen Editor einfügen.

Was der Generator im Hintergrund macht

Die Komponente hält das Grid als zweidimensionales Array im Preact-Zustand plus ein paralleles Array von Ausrichtungs-Token. Bei jedem Rendern setzt ein reiner Helfer drei String-Gruppen zusammen: die Kopfzeile als | h1 | h2 | h3 |, die Ausrichtungszeile mit GFM-Doppelpunkt-Token (:--- für links, :---: für mitte, ---: für rechts) und eine Datenzeile pro Zeile. Pipe-Zeichen innerhalb einer Zelle werden zu \\| gescapet, sodass sie als wörtliches Pipe innerhalb der Zelle rendern und nicht als Spaltenteiler.

Die Ausgabe zielt speziell auf GitHub-Flavored Markdown ab, den unter github.github.com/gfm kodifizierten Dialekt. CommonMark selbst standardisiert keine Tabellen, aber jeder große Renderer, der GFM-Tabellen übernommen hat, liest dieselbe Trennzeilen-Syntax: GitHub, GitLab, Bitbucket, Gitea, Notion, Obsidian, Slack-Snippets, Discord-Codeblöcke mit den richtigen Erweiterungen, Hugo mit dem tables-Render-Hook, MkDocs mit pymdown-extensions und die Marked.js-Bibliothek auf npm.

Wann dieses Werkzeug sich lohnt

• Eine Vergleichstabelle innerhalb einer GitHub-PR-Beschreibung oder einem Issue entwerfen, ohne fünf Minuten damit zu verbringen, Pipe-Zeichen manuell zu zählen.
• Eine Projekt-README mit einer Konfigurations-Matrix, einem Feature-Flag-Inventar oder einer Routen-Tabelle seeden, die sich im Laufe der Zeit aktualisiert.
• Strukturierte Release-Notes (Version, Datum, Zusammenfassung) in eine CHANGELOG.md einfügen, ohne die bestehende Ausrichtung zu brechen.
• Einen schnellen Referenzblock für ein Obsidian- oder Notion-Vault erstellen, wo das manuelle Tippen der Syntax den Schreibfluss unterbricht.
• Eine kleine CSV- oder Tabellenspalte in Markdown für ein Dokumentationssite übersetzen, das kein rohes CSV unterstützt.
• Einem Teamkollegen zeigen, warum ihr Renderer bei einer bestimmten Tabelle scheitert, indem die Struktur hier reproduziert und die kanonische Ausgabe kopiert wird.

Typische Fallstricke und Sonderfälle

• Echte Zeilenumbrüche innerhalb einer Zelle sind in GFM nicht legal. <br> für einen weichen Umbruch innerhalb einer Zelle verwenden; jeder moderne GFM-Renderer respektiert es. Der Generator schreibt getippte Zeilenumbrüche nicht automatisch um, also mit Bedacht einfügen.
• Pipe-Zeichen müssen gescapet werden. Der Generator gibt \\| automatisch aus, aber wenn du vorab gescaptes Markdown wieder einfügst, könnten doppelte Escapes entstehen. Lieber neu exportieren als roundtrippen.
• Ausrichtung ist beratend, nicht erforderlich. Renderer, die die Doppelpunkt-Token ignorieren, fallen standardmäßig auf Links-Ausrichtung zurück. Wenn die Ausgabe nach dem Kopieren in ein Werkzeug, das Ausrichtung respektieren sollte, links-justified aussieht, ist dieses Werkzeug der Spezifikationsverletzer.
• Leere Header-Zellen erzeugen Waisenspalten. GFM erlaubt leere Header, aber die meisten Renderer zeigen eine dünne leere Kopfzeile an, die defekt aussieht. Immer etwas tippen, auch  , in jeden Header.
• Spaltenanzahl muss konsistent sein. Wenn eine Zeile weniger Zellen als der Header hat, füllt GFM fehlende Zellen mit leeren Werten auf; wenn sie mehr hat, werden die extra Zellen von einigen Renderern still gelöscht. Der Generator hält das Grid automatisch quadratisch.
• Listen, Code-Blöcke und Fußnoten funktionieren nicht innerhalb von Zellen. GFM-Tabellen sind für kurzen Text. Für reichhaltigere Inhalte direkt HTML verwenden, da GFM Inline-HTML in Zellen erlaubt.

Die GFM-Tabellengrammatik in einem Absatz

GitHub-Flavored Markdown formalisierte die Tabellensyntax 2014 als Erweiterung zu CommonMark. Eine Tabelle ist eine einzelne Kopfzeile, eine Trennzeile mit mindestens drei Bindestrichen pro Spalte und optionalen Ausrichtungsdoppelpunkten, und null oder mehr Datenzeilen, alle durch Pipe getrennt und jeweils durch einen Zeilenumbruch abgeschlossen. Zellen werden vor dem Rendern von führenden und nachfolgenden Leerzeichen befreit. Pipes innerhalb von Zellen werden mit einem Backslash gescapet. Die Grammatik schließt verschachtelte Tabellen, echte Zeilenumbrüche innerhalb von Zellen und beliebige Block-Inhalte aus; die Einfachheit ist das, was das Roundtrippen in so viele andere Werkzeuge funktioniert.

Alternativen und wann sie besser sind

Die VS-Code-Erweiterung Markdown All in One rendert Tabellen live im Editor und formatiert sie mit einem Tastendruck neu, was Copy-Paste-Roundtrips übertrifft, wenn man bereits im Editor ist. Pandoc konvertiert CSV, HTML und viele andere Quellformate in Markdown-Tabellen in einem Shell-Befehl und ist die richtige Wahl für Batch-Jobs. Das CLI-Werkzeug csvtomd wandelt eine CSV-Datei in eine GFM-Tabelle auf stdout um. Tables Generator (tablesgenerator.com) ist eine reichhaltigere Web-Alternative mit LaTeX-, HTML- und BBCode-Export; das on-page Werkzeug hier gewinnt, wenn du eine schnelle GFM-only-Ausgabe willst, deine Daten nicht in einen Remote-Dienst hochladen möchtest und keine weitere VS-Code-Erweiterung installieren möchtest.