updated:  2023 30. August
published:  2021 09. August

Tabellen in Markdown

Einfaches erstellen von Tabellen in Markdown und wie Tabellen durch CSS angepaßt werden.

Konfiguration

Um Tabellen mit Markdown Formatierungselementen zu generieren, muss in der Konfigurationsdatei config.toml die Erweiterung für Tabellen eingeschaltet werden.

config.toml 

[markup]
  defaultMarkdownHandler = "goldmark" 
  [markup.goldmark]
	[markup.goldmark.extensions]
	  definitionList = true
	  footnote       = true
	  linkify        = true
	  strikethrough  = true
	  table          = true
	  taskList       = true
	  typographer    = true
	  gfm            = true

Einfache Tabellen in Markdown

Mit einem senkrechten Strich (Tasten: [Alt Gr] + [>]) werden in Markdowndateien (*.md) Tabellen generiert.

Tabelle in Markdown (*.md) 
 
 | Spalte 1 | Spalte 2 | Spalte 3 |
 |----:|:--:|:----|
 |Zelle 1.1| Zelle 1.2 | Zelle 1.3 |
 |Zelle 2.1| Zelle 2.2 | Zelle 2.3 |

Ergebnis:

Spalte 1 Spalte 2 Spalte 3
Zelle 1.1 Zelle 1.2 Zelle 1.3
Zelle 2.1 Zelle 2.2 Zelle 2.3

Ausrichtung des Zelleninhalts

In der zweiten Zeile wird die Textausrichtung durch einen Doppelpunkt festgelegt.

Textausrichtung in Tabellen 
 
 | center | links | rechts |
 |:----:|:--|----:|
 |Zelle 1.1| Zelle 1.2 | Zelle 1.3 |
 |Zelle 2.1| Zelle 2.2 | Zelle 2.3 |

Ergebnis:

center links rechts
Zelle 1.1 Zelle 1.2 Zelle 1.3
Zelle 2.1 Zelle 2.2 Zelle 2.3

Das nächste Beispiel zeigt unterschiedliche Textausrichtungen im Tabellenkopf und in den einzelnen Zellen. Des Weiteren ist der senkrechte Strich (Pipe) am Anfang und am Ende einer Zeile nicht zwingend notwendig.

Ausrichtung im Tabellenkopf 
 
| center | center |
:-: | -----------
Zelle 1.1 | Zelle 1.2 (links)

Ergebnis:

center center
Zelle 1.1 Zelle 1.2 (links)

Tabellenanpassung mit eigenem Style

Für eigene Anpassungen einer Tabelle werden zwei Dateien benötigt.

  1. eine Stylesheet-Datei (*.css, *.sass, *.scss)
  2. eine benutzerdefinierte Vorlage (Shortcode z.B. mytable.html)

Grundausstattung einer eigenen Stylesheetdatei für Tabellen.

 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

// TABLE
table {
	width: 98%;
	margin-bottom: 0.25em;
	margin-top: 0.25em;
	/* Tabelle zentrieren mit margin-left:auto margin-right:auto*/
	margin-left: auto;
	margin-right: auto;
	font: inherit;		/* inherit = vererbt von den Eltern */
	/* font-size: inherit;	*/
	border-collapse: collapse;
	thead, 
	th,
	tbody,
	tr,
	td,
	tfoot {
		border-color: $color_Code_border;
		border-style: solid;
		border-width: thin;
		padding: .25em .25em;
	}

	caption {
		color: $color_grey2;
		font: inherit; 
	}

	&.captleft {
		caption { text-align: left; }
	}
	
	&.captright {
		caption { text-align: right; }
	}
	
	&.greyhead {
		thead {
			background-color: $color_Code_border;
		}
	}

	&.grey { background-color: $color_Code_bg; }

	&.noborder	{
		thead,
		th,
		tbody,
		tr,
		td,
		tfoot {
			border: none;
		}
	}
}

.table-responsive {
	overflow-x: auto;
}

/* Desktop-Ansicht der Tabellen */
@media only screen and (min-width: $MinWidth) {
	table {
		width: 98%;
		&.width80 { width: 80%; }
		&.width50 { width: 50%; }
		&.tableleft {
			margin-left: 0.5em;
			margin-right: auto;
		}
		&.tableright {	
			margin-left: auto;
			margin-right: 0.5em;
		}
	}
}

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

{{ $htmlTable := .Inner | markdownify }}
{{ $table_class := .Get "class" }}
{{ $table_head := .Get "head" }}
{{ if .Get "caption" }}
    {{ $caption := .Get "caption" }} 
    {{ $old_cap := "<table>" }}
    {{ $new_cap := printf "<table>\n<caption>%s</caption>" $caption }}
    {{ $htmlTable = replace $htmlTable $old_cap $new_cap }} 
{{ end }}
{{ $old_class := "<table>" }}
{{ $new_class := printf "<table class=\"%s\">" $table_class }}
{{ $htmlTable = replace $htmlTable $old_class $new_class }}
{{ $old_thead := "<thead>" }}
{{ $new_thead := printf "<thead class=\"%s\">" $table_head }}
{{ $htmlTable = replace $htmlTable $old_thead $new_thead }}
<div class="table-responsive">
{{- $htmlTable | safeHTML -}}
</div>

Ein weiteres Beispiel einer angepaßten Tabelle findest du auf der dieser Seite: Bootstrap Table

Anwendung {{<mytable ... >}}

Durch die als Shortcodes angelegte Datei mytable.html kann nun eine einfache Markdowntabelle mit den in der Datei _mytable.scss festgelegten Style angepaßt werden. Das erfolgt durch einfaches einschließen der Markdowntabelle zwischen der Anweisung:
{{<mytable ... >}} und {{</mytable>}}.


 {{<mytable caption="Text caption" class="width80 captleft tableright greyhead grey small">}}
  | Spalte 1 | Spalte 2 | Spalte 3 |
  |:----:|:--|----:|
  |Zelle 1.1| Zelle 1.2 | Zelle 1.3 |
  |Zelle 2.1| Zelle 2.2 | Zelle 2.3 |
 {{</mytable>}}

Ergebnis:

Text caption
Spalte 1 Spalte 2 Spalte 3
Zelle 1.1 Zelle 1.2 Zelle 1.3
Zelle 2.1 Zelle 2.2 Zelle 2.3

Hinweis: In der Stylesheetsdatei sind Funktionen zum Verhalten der Tabellen für unterschiedliche Bildschirmbreiten (sog. Responsive Design) programmiert. Auf einem Mobilgerät haben die Optionen tableright, tableleft und width50 keine Auswirkung. Die Tabelle wird dann auf die gesamte Breite des Mobilgerätes ausgedehnt.

Styles Option


 {{<mytable caption="Text caption" class="Option1 Option2 ...">}}

Folgende Optionen stehen zur Verfügung:

Tabellenoptionen
class Option Effekt
width30 Tabellengröße 30%
width50 Tabellengröße 50%
width80 Tabellengröße 80%
tableleft Tabelle nach links ausrichten
tableright Tabelle nach rechts ausrichten
noborder ohne Rahmen
nolineh Horizontallinien abschalten
nolinev Vertikallinien abschalten
nohead ohne Kopfzeile
captleft Caption links ausrichten
captright Caption rechts ausrichten
greyhead Hintergrundfarbe Tabellenkopf
grey Hintergrundfarbe Tabelle
small Abstand (Padding = Polsterung) innerhalb der Zellen verringern
smallfont Schriftgröße reduzieren auf 90%
fontcourier Schriftstil Courier
striped Zeilen gestreift mit Zebramuster
scrollx Horizontaler Scrollbalken wenn die Breite der Tabelle zu gering ist
vtop Vertikale Textausrichtung
nowrap Zeilenumbruch in der ersten Spalte verhindern

Für viewcsv.html stehen zusätzliche Optionen bereit:

Tabellenoptionen
class Option Effekt
headleft Textausrichtung Kopfzeile links
headright Textausrichtung Kopfzeile rechts
Stichworte (tags)