Markdown und Tabelle - Unterseite HTML ohne CSS

2 minute read

HTML Tabelle in Markdown einbetten

Unter Quellen Punkt 3 erläutert der Erfinder von Markdown - John Gruber - auf seiner Website Daringfireball, wie weit die Unterstützung von HTML / CSS in Markdown geht. VS Code kann den HTML Code in einer Markdown Datei nicht prüfen. D.h. wenn Fehler auftreten, kopiere ich den HTML Teil in eine HTML Datei und debuge sie mit VS Code.

HTML kennt abschliessend folgende Elemente für eine Tabelle:

  • table (die Tabelle selbst)
  • caption (die Tabellenüberschrift)
  • thead, tbody, tfoot (Zeilengruppen)
  • colgroup, col (Spaltengruppen)
  • tr (Tabellenzeilen)
  • th / td (Tabellenzellen)

Der Zebralook der Beispiele entsteht dadurch, dass weiter unten über CSS der TR Tag entsprechend konfiguriert wurde. Natürlich wirkt sich der Code auf alle TR Tags in diesem Dokument aus.

Beispiel 1: Eine einfache HTML Tabelle

Die Titel der Spalten (First / Second / …) werden von Markdown automatisch dunkel eingefärbt, wenn man das HTML Tag “th” verwendet.

Code

\<table>  
  \<tr>  
    \<th>First</th>  
    \<th>Second</th>  
    \<th>Third</th>  
    \<th>Fourth</th>  
  \</tr>  
  \<tr>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
  \</tr>  
  \<tr>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
  \</tr>  
  \<tr>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
  \</tr>  
  \<tr>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
    \<td>  Content Cell</td>  
  \</tr>  
\</table>  

Ausgabe

First Second Third Fourth
Content Cell Content Cell Content Cell Content Cell
Content Cell Content Cell Content Cell Content Cell
Content Cell Content Cell Content Cell Content Cell
Content Cell Content Cell Content Cell Content Cell

Beispiel 2: Eine HTML Tabelle zusätzlich mit den Elementen “Kopf”, “Inhalt” und “Fuss”

Code

\<table>  
    \<thead>  
        \<tr>  
          \<th>Head</th>  
        \</tr>  
    \</thead>  
    \<tbody>  
        \<tr>  
          \<td>Content Cell</td>  
          \<td>Content Cell</td>  
          \<td>Content Cell</td>  
          \<td>Content Cell</td>  
        \</tr>  
    \</tbody>  
    \<tfoot>  
        \<tr>  
          \<td>Foot</td>  
        \</tr>  
    \</tfoot>  
\</table>  

Ausgabe

Head
Content Cell Content Cell Content Cell Content Cell
Foot

Beispiel 3: Mit dem Element “colspan” können Zellen zu einer zusammengefasst werden

Code

\<table>  
    \<thead>  
        \<tr>  
          \<th>Head</th>  
        \</tr>  
    \</thead>  
    \<tbody>  
        \<tr>  
          \<td colspan="3">Content Cell 1</td>  
          \<td>Content Cell 4</td>  
        \</tr>  
    \</tbody>  
    \<tfoot>  
        \<tr>  
          \<td>Foot</td>  
        \</tr>  
    \</tfoot>  
\</table>  

Ausgabe

Head
Content Cell Content Cell Content Cell Content Cell
Content Cell 1 Content Cell 4
Foot

Beispiel 4: Mit dem Element “rowspan” können Spalten zusammengefasst werden.

Code

\<table>  
    \<thead>  
        \<tr>  
          \<th>Head\</th>  
        </tr>  
    \</thead>  
    \<tbody>
        \<tr>  
          \<td rowspan="2">Content Cell Row 1\</td>  
          \<td>Content Cell</td>  
          \<td>Content Cell</td>  
          \<td>Content Cell</td>  
        \</tr>  
        \<tr>  
          \<td>Content Cell</td>  
          \<td>Content Cell</td>  
          \<td>Content Cell</td>  
          \<td>Content Cell</td>  
        \</tr>    
    \</tbody>  
    \<tfoot>  
        \<tr>  
          \<td>Foot</td>  
        \</tr>  
    \</tfoot>  
\</table>  

Ausgabe

Head
Content Cell Row 1 Content Cell Content Cell Content Cell
Content Cell Content Cell Content Cell Content Cell
Foot

Markdown HTML Tabelle - Hauptseite

Meta

Version: 1.5 Erstellt: 21. April 2019
Modifiziert: 10. September 2020