Markdown ist das Format, in dem ich fast alles schreibe - READMEs, Plugin-Dokumentation, Release Notes, Pull Request Descriptions, das Changelog für WP Adminify, die Hälfte meiner internen Notizen Es geht für jedes Konstrukt aus dem Weg, bis auf eine In dem Moment, in dem eine Tabelle beteiligt ist, höre ich auf zu schreiben und fange an, Pipe-Zeichen zu zählen, und der Ablauf ist weg. Fügen Sie einer fünfreihigen Tabelle eine Spalte hinzu und Sie bearbeiten sechs Zeilen von Hand, plus die Trennzeichenzeile, und Sie werden nicht wissen, ob Sie es richtig gemacht haben, bis die Seite rendert.
tl; dr: der Markdown-Tabellengenerator Gibt Ihnen ein Raster im Tabellenkalkulations-Stil, generiert beim Tippen gültigen GitHub Flavored Markdown und importiert CSV, Tabellenkalkulationspaste oder eine vorhandene Markdown-Tabelle, damit Sie diese umstrukturieren können Stellen Sie mit einem Klick eine Ausrichtung pro Spalte ein und exportieren Sie Markdown, HTML oder CSV. Alles läuft in Ihrem Browser.
Das Tool existiert, weil die Tabellensyntax der einzige Teil von Markdown ist, in dem das Quellformat aktiv gegen die Bearbeitung kämpft. Diese Anleitung behandelt die Funktionsweise von GFM-Tabellen, die Regeln, die entscheiden, ob Sie renderen, die Escape-Fallen, die Zeilen aufbrechen, und wie Sie den Generator für die Arbeitsabläufe verwenden Tabellen stammen normalerweise aus - einer Tabelle, einem Abfrageergebnis oder einer Tabelle, die jemand bereits geschrieben hat.
Was ist eine Markdown-Tabelle?
Eine Markdown-Tabelle besteht aus drei Zutaten, die in einer festen Reihenfolge gestapelt sind: eine Kopfzeile, eine Trennzeichenzeile und null oder mehr Körperzeilen Tabellen sind überhaupt nicht Teil des Kerns Markdown - sie sind eine Erweiterung, die durch die definiert wird GitHub Flavoured Markdown spec(weshalb eine Tabelle auf GitHub rendern kann und an anderer Stelle als wörtliche Pipes herauskommt Zellen werden durch Pipe-Zeichen getrennt, und jede Zeile belegt genau eine Zeile.
| Tool | Category | Offline |
| --- | --- | --- |
| JSON Formatter | Coding | Yes |
| YAML to JSON | Data | Yes |
Die Trennzeichenzeile ist der Teil, der sie zu einer Tabelle macht, anstatt zu einem Absatz, der Pipes enthält Es muss die zweite Zeile sein, sie muss aus Bindestrichen mit optionalen Doppelpunkten bestehen, und sie muss die gleiche Anzahl von Zellen haben wie die Kopfzeile, alle diese falsch verstehen und der Renderer behandelt den ganzen Block als gewöhnlichen Text - weshalb & quot; meine Tabelle als Klartext rendert" ist fast immer ein Trennzeichenzeilenproblem.
Tabellen sind nicht Teil der ursprünglichen CommonMark-Spezifikation Sie kamen als GitHub Flavored Markdown-Erweiterung an und wurden anschließend fast überall übernommen: GitHub, GitLab, Bitbucket, Obsidian, Notion, Docusaurus, MkDocs, VitePress, Hugo, Jekyll, Discord und die meisten statischen Generatoren. & quot; Fast & quot; ist das operative Wort Ein minimaler CommonMark-Renderer ohne Erweiterungen zeigt Ihre Tabelle als Literal Pipes an, und die Fixierung besteht darin, stattdessen HTML auszusenden - was der Generator mit einem Klick auf die Ausgabetabulatoren tun kann.
Warum die Syntax schwerer zu pflegen ist, als sie aussieht
Das Lesen einer Markdown-Tabelle ist einfach. Wenn Sie eine Tabelle pflegen, verbergen sich die Kosten, und sie kommt von vier Stellen.
Struktur lebt in der Interpunktion. Es gibt keine Zellgrenze außer einem Zeichen, das auch in regulären Ausdrücken, Shell-Befehlen und TypeScript-Verbindungstypen vorkommt. Jeder von ihnen innerhalb einer Zelle muss entkommen, sonst erhält die Zeile stillschweigend eine Spalte.
Die Ausrichtung wird in der Doppelpunktplatzierung kodiert. Ein Doppelpunkt links bedeutet linksbündig, ein Doppelpunkt auf beiden Seiten bedeutet zentriert, ein Doppelpunkt rechtsbündig Es gibt kein Schlüsselwort, durch das man sich daran erinnern kann, und der Unterschied zwischen ---: und :--- Ist ein Charakter hintereinander, den niemand genau liest.
Die Bearbeitung erfolgt mehrzeilig. Eine Spalte hinzufügen bedeutet, jede Zeile plus den Begrenzer zu berühren Zeilen neu anordnen bedeutet ohne visuelle Rückmeldung ausschneiden und einfügen Eine Spalte löschen ist eine Suche nach der n-ten Pipe auf jeder Zeile.
Die Ausrichtung der Quelle erfolgt manuell. Gepolsterte Spalten sind nicht erforderlich - Renderer ignorieren zusätzliche Leerzeichen -, aber ungepolsterte Tabellen lassen sich schlecht in einem Diff lesen, sodass die Leute sie von Hand auffüllen und sie dann jedes Mal neu aufpolstern, wenn der Inhalt einer Zelle's wächst.
Ein Grid-Editor entfernt alle vier Man bearbeitet Zellen; die Syntax wird generiert Das ist die gesamte Prämisse des Tools.
So verwenden Sie den Markdown Table Generator
Schritt 1: Holen Sie Ihre Daten ins Raster
Drei Routen rein, je nachdem, wo die Daten bereits leben.
Tippe es ein. Das Gitter öffnet sich mit einer gefüllten Probe Überschreiben Sie die Zellen, oder schlagen Sie Clear für ein leeres Drei-mal-Drei und beginnen Sie frisch.
Aus einer Tabellenkalkulation einfügen. Öffnen Sie das Import-Panel und fügen Sie einen kopierten Bereich von Excel, Google Sheets, Numbers oder LibreOffice ein Tabellen-getrennter Text in die Zwischenablage ein, und der Importeur erkennt das automatisch - es muss ihm nicht gesagt werden, welches Trennzeichen Sie verwenden.
Fügen Sie CSV oder eine vorhandene Tabelle ein. Das gleiche Panel akzeptiert CSV, durch Semikolons getrennte Exporte (die Standardeinstellung an vielen europäischen Orten), durch Pipe abgegrenzten Text und Markdown-Tabellen. Wenn der Text wie eine Markdown-Tabelle aussieht - eine Header-Zeile, gefolgt von einer Trennzeile - wird er als eine analysiert, einschließlich seiner Spaltenausrichtungen, sodass Sie eine Tabelle von einem README laden, umstrukturieren und wieder einfügen können.
CSV-Import folgt den RFC 4180-Regeln, anstatt naiv auf Kommas aufzuteilen Ein zitiertes Feld kann Kommas, Zeilenumbrüche und doppelte Zitate enthalten, die für ein wörtliches Zitatzeichen stehen. Das ist wichtiger, als es klingt: Jeder Export, der eine Adresse, eine Beschreibung oder einen Preis in einem Gebietsschema enthält, das Kommas verwendet, wird eine naive Aufteilung aufheben, und Sie werden es erst bemerken, wenn eine Spalte eine Zelle fehlt. Wenn Ihr CSV groß genug ist, dass Sie es vor dem Import überprüfen möchten, wird die CSV-Betrachter Öffnet es zuerst in einem sortierbaren Raster.
Schritt 2: Den Tisch formen
Die Kontrollen rund um das Gitter decken die Vorgänge ab, die im rohen Markdown schmerzhaft sind:
- Reihe und Spalte Am Ende des Rasters hinzufügen.
- Die Pfeile neben jeder Reihe bewegen sie nach oben oder unten - nützlich, um eine Vergleichstabelle nach dem zu bestellen, was Sie am wichtigsten entschieden haben.
- Die Minus-Taste in einem Zeilen- oder Spaltenkopf löscht sie über jede Zeile hinweg auf einmal.
- Transponieren Vertauscht Zeilen und Spalten Daten, die aus einem Bericht eingefügt werden, sind häufig für ein Dokument falsch ausgerichtet, und die Transponierung erfolgt mit einem Klick anstelle eines vollständigen Retypes.
Schritt 3: Ausrichtung pro Spalte festlegen
Jeder Spaltenkopf trägt drei Ausrichtungsschaltflächen: links, Mitte, rechts Klicken Sie auf eine, um sie anzuwenden, klicken Sie erneut darauf, um zum Standard renderer' s zurückzukehren Der Generator schreibt die entsprechenden Doppelpunkte in die Trennzeichenzeile.
Die Ausrichtung lohnt sich bewusst zu verwenden Numerische Spalten - Preise, Zählungen, Prozentsätze, Laufzeiten - lesen Sie weitaus besser rechts ausgerichtet, denn die Ziffern reihen sich nach Stellenwert Kurze Statuswerte sehen aufgeräumt zentriert aus Text gehört nach links Dies ist keine Dekoration; eine rechts ausgerichtete Zahlenspalte ist wirklich schneller, um nach dem größten Wert zu scannen.
Schritt 4: Wählen Sie das Ausgabeformat und kopieren Sie
Drei Ausgabetabulatoren:
Markdown Produziert GFM. Die Gepolsterte Säulen Toggle steuert, ob Zellen mit Leerzeichen gepolstert sind, sodass sich die Rohquelle in einem Monospace-Editor anordnet. Die Auffüllung ändert nichts an der Darstellung der Tabelle - sie ist ausschließlich für jeden gedacht, der die Datei in einem Diff liest. Außenrohre Steuert das Vorder- und Hinterrohr in jeder Reihe; Beide Stile sind gültig, und der Vorderrohrstil ist bei weitem die gebräuchlichere Konvention.
HTML produziert a <table> trotz <thead> und <tbody> und Inline text-align Stile, die Ihren Spaltenausrichtungen entsprechen Verwenden Sie es für Renderer, denen keine Tabellenunterstützung fehlt, für E-Mail-Vorlagen oder wenn Sie es benötigen colspan und mehrzeilige Zellen, die Markdown nicht ausdrücken kann Wenn Sie in die andere Richtung gehen und einen Tisch aus einer Webseite heben möchten, HTML zum Markdown Handhabt.
CSV Gibt Ihnen das Raster als ordnungsgemäß zitierte Daten zurück, um es in eine Tabellenkalkulation einzufügen oder einem Skript zuzuführen.
In die Zwischenablage kopieren oder als downloaden .md, .html, oder .csv Akte
Die Fluchtregeln, die tatsächlich den Spieß sprengen
Zwei Zeichen verursachen fast jede defekte Markdown-Tabelle, und beide werden automatisch vom Generator verarbeitet - Sie sollten jedoch die Regeln für die Tabellen kennen, die Sie von Hand bearbeiten.
Das Rohr. Eine wörtliche Pfeife im Inneren einer Zelle muss geschrieben werden als \|. Ohne den Backslash sieht der Renderer einen Spaltentrenner und Ihre Zeile erhält eine Zelle, die jede Spalte danach abwirft. Dies ist in der technischen Dokumentation am härtesten, wo Zellen legitimerweise Dinge wie enthalten string | null, grep foo | wc -loder eine Regex-Wechselwirkung Die Flucht funktioniert sogar innerhalb von Backtick-Codefeldern - ein seltener Fall, in dem Markdown's übliche & quot; Codefelder sind wörtlich" Regel gilt nicht.
Die Newline. GFM-Tabellen sind streng eine Zeile pro Zeile, eine Zelle kann also keinen echten Zeilenumbruch enthalten Der universelle Workaround ist ein HTML <br> Tag. Wenn Sie mehrzeilige Inhalte in das Raster einfügen, fügt der Generator das Tag für Sie ein; wenn Sie eine Tabelle importieren, die enthält <br>In „wandelt es sich wieder in einen echten Zeilenumbruch im Editor um, sodass die Zelle bequem zu bearbeiten ist.
Zwei weitere Regeln sind es wert, sich auf den Speicher festzulegen, da sie bewirken, dass & quot; meine Tabelle nicht rendert" Berichte, die nichts mit der Tabelle selbst zu tun haben, Erstens braucht eine Tabelle davor eine leere Zeile, wenn sie einem Absatz folgt Zweitens muss innerhalb eines Listenelements die ganze Tabelle in die Inhaltsspalte list item' s eingerückt werden - andernfalls verschluckt die Liste die erste Zeile und die Trennzeichenzeile landet an der falschen Stelle.
Woher Tabellen kommen und wie der jeweilige Fall abläuft
Eine Tabellenkalkulation, die Ihnen zugesandt wurde
Kopieren Sie den Bereich, fügen Sie ihn in das Import-Panel ein, laden Sie ihn in das Raster, löschen Sie die Spalten, die niemand braucht, richten Sie die numerische Spalte mit der rechten Ausrichtung aus, kopieren Sie den Markdown. Unter einer Minute für eine Tabelle, die zehn zum Handformat benötigen würde.
Ein Abfrageergebnis oder eine API-Antwort
Daten, die als JSON starten, benötigen normalerweise einen Hop. Konvertieren Sie es mit JSON zu CSVFügen Sie dann die CSV in den Importeur ein. Wenn Sie in die andere Richtung gehen - eine Markdown-Tabelle, die Sie als Daten benötigen - exportieren Sie CSV aus den Ausgabetabulatoren und führen Sie es durch CSV zu JSONdrohen
Eine Tabelle, die bereits in einem README existiert
Fügen Sie es in das Import-Panel ein. Es kommt mit intakten Ausrichtungen zurück ins Raster, daher ist das Hinzufügen einer Spalte oder das Neuordnen von Zeilen eine normale Bearbeitung und kein Umschreiben. Dies ist der Workflow, den ich am häufigsten verwende: Dokumentationstabellen wachsen monatelang eine Zeile nach der anderen und müssen dann auf einmal umstrukturiert werden.
Eine Vergleichstabelle, die Sie von Grund auf neu schreiben
Beginnen Sie mit dem Raster, tippen Sie, wie Sie denken, und lassen Sie die Auffüllung selbst sortieren. Wenn Sie einen Vergleich in ein Raster statt in eine Pipe-Syntax schreiben, bleibt Ihre Aufmerksamkeit auf der Frage, ob der Vergleich fair ist, und nicht darauf, ob die Spalten ausgerichtet sind.
Dokumentation, die in mehreren Renderern funktionieren muss
Erzeugen Sie den Markdown für die Plattformen, die GFM-Tabellen unterstützen, und schalten Sie dann die Ausgabetabelle auf HTML um, für diejenige, die dies nicht tut Gleiches Raster, zwei Exporte, kein Retyping Wenn Ihre Pipeline Markdown sowieso in HTML konvertiert, Markdown auf HTML Zeigt Ihnen genau, was die Umwandlung produziert.
Markdown-Tabellen versus HTML-Tabellen
| Rücksicht | Markdown-tabelle | HTML-tabelle |
|---|---|---|
| Lesbarkeit der Quelle | Hoch - scannbar als Klartext | Low - Tags dominieren den Inhalt |
| Mehrzeilige Zellen | Nur über <br> |
Nativ, beliebiger Blockinhalt |
| Zusammengeführte Zellen | Nicht unterstützt | colspan und rowspan |
| Ausrichtung pro Spalte | Ja, über Trennkolonen | Ja, über CSS oder Attribute |
| Stylingsteuerung | keine | Vollständige CSS |
| Renderer-unterstützung | GFM-Erweiterung, weit verbreitet, aber nicht universell | Universell, wo auch immer HTML erlaubt ist |
| Diff-freundlichkeit | Gut, eine Zeile pro Reihe | Schlecht, viele Zeilen pro Reihe |
Die praktische Regel: Markdown verwenden, bis Sie eine zusammengeführte Zelle, ein Blockelement innerhalb einer Zelle oder ein bestimmtes Styling benötigen. Dann schalten Sie diese eine Tabelle auf HTML um und lassen Sie den Rest des Dokuments in Ruhe. Die meisten Markdown-Renderer geben rohes HTML durch, daher ist das Mischen der beiden in einer Datei normal.
Ein Hinweis zum Datenschutz
Die Tabellen, die Menschen erstellen, sind oft diejenigen, die sie lieber nicht hochladen würden: Preise noch nicht bekannt gegeben, Mitarbeiterzahl, interne Benchmarks, ein Client's-Daten aus einer Tabelle eingefügt.
Der Generator ist clientseitiges JavaScript Das Gitter, der Importparser, und jeder Exportlauf in der Seite, und nichts, was Sie einfügen, verlässt Ihre Maschine Laden Sie es einmal und es funktioniert offline Das ist das gleiche Prinzip hinter allem auf Toolz.dev, und die Begründung ist es wert, vollständig im Leitfaden auf gelesen zu werden Datenschutz in Online-Tools. Wenn Sie einen breiteren Satz browserbasierter Dienstprogramme für die tägliche Arbeit zusammenstellen, ist die Anleitung für die Coding-Tools und das Webentwickler-Toolkit Cover, was sonst noch ein Lesezeichen verdient.
Praktische Tipps
Halten Sie den Header kurz. Mit auffüllen legt die breiteste Zelle einer Spalte die Breite jeder Zeile in der Quelle fest Ein ausführlicher Header macht die Rohdatei verrauscht und bietet keinen Rendering-Vorteil.
Fürchten Sie keine ungefüllte Ausgabe für generierte Dateien. Wenn eine Tabelle von einem Skript geschrieben und nie als Quelle gelesen wird, schalten Sie das Auffüllen aus und speichern Sie die Bytes.
Sortieren Sie, bevor Sie einfügen. Zeilen mit einem Pfeilklick nach dem anderen neu zu ordnen ist für fünf Zeilen in Ordnung und für fünfzig mühsam, zuerst in der Tabellenkalkulation sortieren, dann importieren.
Achten Sie auf die leere Header-Reihe. Mit & quot; ist die erste Zeile header" ausgeschaltet, der Generator sendet einen leeren Header über Ihren Daten aus, denn GFM hat keine Möglichkeit, eine headerlose Tabelle auszudrücken Einige Renderer zeigen das als dünne leere Zeile an, wenn es Sie stört, exportieren Sie stattdessen HTML, das überhaupt keinen Header benötigt.
Überprüfen Sie das gerenderte Ergebnis, nicht die Quelle. Gepolsterte Quelle, die perfekt aussieht, kann immer noch falsch rendern, wenn die Trennzeichenzeile die falsche Anzahl von Zellen hat Fügen Sie die Vorschau der Plattform ein, auf der Sie veröffentlichen, bevor Sie sie als erledigt bezeichnen.
FAQ
Wie erstelle ich eine Tabelle in Markdown?
Eine Markdown-Tabelle benötigt eine Header-Zeile, eine Trennzeichenzeile mit Bindestrichen und eine Zeile pro Datensatz, wobei die Zellen durch Pipe-Zeichen getrennt sind. Füllen Sie das Raster im Generator aus und das Tool schreibt diese Syntax für Sie, einschließlich der Trennzeichenzeile und etwaiger Ausrichtungskolonen.
Wie richte ich Spalten in einer Markdown-Tabelle aus?
Die Ausrichtung wird mit den Doppelpunkten in der Trennzeichenzeile festgelegt: Ein Doppelpunkt auf der linken Seite richtet sich nach links aus, Doppelpunkte auf beiden Seiten in der Mitte und ein Doppelpunkt auf der rechten Seite richtet sich nach rechts Wählen Sie eine Ausrichtung aus einem Spaltenkopf im Editor und die korrekte Platzierung des Doppelpunkts wird automatisch generiert.
Kann ich einen Excel- oder Google Sheets-Bereich in eine Markdown-Tabelle konvertieren?
Ja. Kopieren Sie die Zellen in Ihre Tabelle und fügen Sie sie in das Import-Panel ein. Tabellenkalkulationen platzieren tabulatorgetrennten Text in der Zwischenablage, den der Importeur automatisch erkennt und in das Raster lädt.
Wie lege ich einen Pipe-Charakter in eine Tabellenzelle?
Ein wörtliches Rohr muss mit einem Backslash entwischt werden oder der Renderer liest es als Spaltentrenner, tippe das Rohr normal im Editor ein und der Generator entweicht es für dich im Ausgang.
Kann eine Markdown-Tabellenzelle mehrere Zeilen enthalten?
Nicht mit echten Zeilenumbrüchen, denn GFM-Tabellen sind streng eine Zeile pro Zeile Die übliche Problemumgehung ist ein HTML-Zeilenumbruch-Tag innerhalb der Zelle, das dieses Tool automatisch einfügt, wenn eine Zelle, die Sie einfügen, einen Zeilenumbruch enthält.
Warum rendert meine Tabelle als Nur-Text auf GitHub?
Die Trennzeichenzeile ist fast immer die Ursache: Es muss die zweite Zeile sein und sie muss die gleiche Anzahl an Zellen haben wie die Kopfzeile Eine fehlende Leerstelle vor der Tabelle kann auch das Rendern stoppen, wenn die Tabelle einem Absatz folgt oder innerhalb einer Liste steht.
Muss ich die Spalten auftragen, damit die Quelle aufeinander abgestimmt ist?
Nr. Renderer ignorieren extra Leerzeichen, so dass eine ungepolsterte Tabelle identisch angezeigt wird Padding existiert für Menschen, die die Rohdatei in einem Editor oder einem Diff lesen Schalten Sie sie mit dem gepolsterten Ausgabe-Toggle aus, wenn Sie kompakte Quelle bevorzugen.
Werden überall unterstützte Markdown-Tabellen unterstützt?
Tabellen sind eher eine GitHub Flavored Markdown-Erweiterung als Teil der ursprünglichen CommonMark-Spezifikation. GitHub, GitLab, Obsidian, Notion, Docusaurus und die meisten Generatoren statischer Standorte unterstützen sie, einige minimale Renderer jedoch nicht. Schalten Sie die Ausgabe auf HTML um, wenn Sie einer davon sind.
