HTML-Tabelle in Markdown umwandeln (und zurück)

Vom table-Tag zur Markdown-Tabelle

In HTML besteht eine Tabelle aus mehreren verschachtelten Elementen: dem äußeren <table>, den Zeilen <tr> sowie den Kopf- und Datenzellen <th> und <td>. Das ist robust, aber im Quelltext umständlich zu lesen. Markdown kehrt das um: Eine Tabelle ist dort nur eine Handvoll Zeilen aus Text, Pipe-Zeichen und Bindestrichen. Genau diese Verdichtung übernimmt der Konverter für Sie.

Nehmen wir eine typische Personentabelle. So sieht sie als HTML aus:

<table>
  <thead>
    <tr><th>Name</th><th>Rolle</th><th>Ort</th></tr>
  </thead>
  <tbody>
    <tr><td>Anja</td><td>Leitung</td><td>Hamburg</td></tr>
    <tr><td>Mateusz</td><td>Technik</td><td>Berlin</td></tr>
  </tbody>
</table>

Nach dem Umwandeln entsteht daraus eine kompakte Markdown-Tabelle. Die erste Zeile ist der Kopf, die zweite Zeile mit den Bindestrichen ist die Pflicht-Trennzeile, danach folgen die Datenzeilen:

| Name    | Rolle   | Ort     |
| ------- | ------- | ------- |
| Anja    | Leitung | Hamburg |
| Mateusz | Technik | Berlin  |

Die Pipe-Zeichen müssen nicht exakt untereinander stehen, damit es funktioniert. Der Konverter richtet sie trotzdem sauber aus, weil das den Quelltext für Menschen lesbar hält. Probieren Sie es direkt im HTML-zu-Markdown-Werkzeug aus.

Warum GitHub Flavored Markdown nötig ist

Der ursprüngliche Markdown-Standard von 2004 kannte überhaupt keine Tabellen. Erst spätere Erweiterungen führten die Pipe-Syntax ein, am bekanntesten ist GitHub Flavored Markdown, kurz GFM. Heute unterstützen praktisch alle wichtigen Plattformen wie GitHub, GitLab, Reddit oder viele Notizprogramme diese Syntax. Trotzdem gilt: Wo nur strenger CommonMark ohne Erweiterung läuft, erscheint Ihre Tabelle als wirre Textzeile statt als Raster.

Praktisch heißt das, Sie müssen wissen, wohin Ihr Markdown am Ende geht. Für eine README auf GitHub oder einen Beitrag in einem modernen Wiki sind Tabellen kein Problem. Mehr Hintergrund dazu finden Sie im Ratgeber GitHub Flavored Markdown.

Wo Markdown-Tabellen an Grenzen stoßen

Markdown-Tabellen sind bewusst einfach gehalten. Das ist ihre Stärke und zugleich ihre Schwäche. Folgende Dinge aus HTML lassen sich nicht eins zu eins übertragen:

Ein wichtiger Hinweis zu Pipe-Zeichen innerhalb einer Zelle: Wollen Sie ein echtes Pipe-Symbol im Text zeigen, müssen Sie es als | schreiben oder mit einem Backslash maskieren. Sonst denkt der Parser, eine neue Spalte beginnt. Ehrlich gesagt ist das die häufigste Stolperfalle bei handgeschriebenen Tabellen.

Der Rückweg: Markdown-Tabelle zu HTML

Manchmal brauchen Sie den umgekehrten Weg, etwa wenn eine Tabelle aus einer README direkt in eine klassische Webseite soll. Dann fügen Sie die Markdown-Tabelle in die Gegenrichtung des Konverters ein und erhalten ein vollständiges <table>-Element. Aus der kurzen Markdown-Form

<table>
  <tr><th>Name</th><th>Rolle</th></tr>
  <tr><td>Anja</td><td>Leitung</td></tr>
</table>

wird wieder sauberes HTML mit <thead>, <tbody> und korrekten <th>-Zellen. So pendeln Sie beliebig zwischen beiden Formaten, ohne den Inhalt von Hand neu tippen zu müssen.

Alternative für komplexe Tabellen

Steckt in Ihrer Tabelle viel Struktur, etwa mehrere Kopfzeilen, verbundene Zellen oder eingebettete Listen, dann zwingen Sie sie nicht in das Markdown-Korsett. GitHub Flavored Markdown erlaubt es, rohes HTML direkt im Markdown-Text stehen zu lassen. Sie behalten also den <table>-Block als HTML und schreiben den Rest des Dokuments ganz normal in Markdown. Das ist sauberer als eine kaputtgerechnete Pseudo-Tabelle und wird auf GitHub korrekt gerendert.

Wenn Sie Tabellen von Grund auf neu in Markdown anlegen wollen, lohnt der Blick in den Ratgeber Markdown-Tabelle erstellen. Dort steht die Syntax mit allen Ausrichtungsvarianten Schritt für Schritt.

Häufige Fragen