51

Markdown und Tabelle

1. Markdown pur

Die Code Beispiele sind aus der GitHub Markdown Hilfe

Beispiel 1

Code

| First Header Second Header Third Header Fourth Header
| ————- ————- ————- ————-
| 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

Ausgabe

First Header Second Header Third Header Fourth Header
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

Der Titel einer Spalte wird durch Bindestriche von den Zellen mit Daten getrennt. Drei Bindestriche sind das Minium. Die Spaltenbreite wird automatisch gesetzt.

Beispiel 2

Code

| First Header Second Header Third Header Fourth Header
| —
| Content Cell Content Cell Content Cell Content Cell

Ausgabe

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

Text kann auch als Block formatiert werden. Dafür verwendet man Gravis: `
Das Beispiel aus der GitHub Hilfedatei:

NoText

Markierungsmöglichkeiten sind dieselben wie in Markdown allgemein. * für kursiv, ** für fett, kann man auch kombinieren. Details dazu stehen in der GitHub Helpdatei.

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

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

HTML mit CSS

Tabellen sollten mit CSS formatiert werden. Folgende HTML Attribute werden z.B. nicht mehr von HTML5 unterstützt:

  • bgcolor → CSS: background-color
  • border → CSS: border
  • cellpadding → CSS:padding
  • cellspacing → CSS: border-spacing
  • frame → CSS: border
  • rules → CSS: border
  • summary → Zusammenfassung_des_Tabelleninhalts
  • width

Die einzelnen HTML Elemente werden am einfachsten mit Klassen formatiert. “Klasse” kann man sich als Vorlage vorstellen, auf die im HTML Element verwiesen wird.
Die einzelnen Tags können aber auch direkt formatiert werden. In dem Beispiel 1 wird der Zebra Look der Tabelle über das formatieren des Tags “TR” erreicht. Der Tag “tr” wird hier zweifach definiert, was für einen CSS Laien verwirrend macht. Unter dem Strich geht es in diesem Post primär darum zu zeigen, was mit HTML und CSS in einer Markdown Datei erreichdet werden kann.

Dieses CSS Verfahren wird Pseudoklasse genannt. Das hier verwendete Element “nth-child” mit dem Wert “odd” kann man z.B. auf der Mozilla Website nachlesen. Im Beispeil unten hat es im CSS Abschnitt <style type=”text/css”> eine CSS Klasse namens “.zahl”. Damit kann eine HTML Aufzählung (Tag OL / UL) über den Befehl \list-style anders formatiert werden. Dieser CSS Artikel listet die verschiedenen Möglichkeiten auf, wie Listen anders dargestellt werden können. Um eine Liste absteigend zu nummerieren und die Ziffern mit einer führenden Null (01 / 02 / etc.) mit der oben definierten CSS Klasse “zahl” darzustellen, muss das ol tag so aussehen:

<ol reversed=”reversed” class=”zahl” >

Wenn der Google Font “Space Mono” initialisiert wurde, kann ich für die Aufzählung auch diese Schrift definieren:

\style=”font-family: ‘Space Mono’;”

Die CSS Angaben sind hierarchisch organisiert. Grundlegende Angaben die für das ganze Repository (“Jeckyl Now” Build) gelten, stehen in der Datei “style.css”. Diese werden ggf. überschrieben, wenn ich in einer MD Datei (Blogpost) zum gleichen HTML Tag Angaben mache. Kug (Kurz und gut): Wenn in der Datei “style.css” steht, dass der Tag H1 (Titel) grün sein soll, jedoch in einer MD Datei H1 ist rot definiert ist, dann wird in dieser Datei der Titel in rot angezeigt.

Dasselbe gilt, wenn ich zu einem einzelnen Tag eine CSS Anweisung setze. Diese wird die globale und auch die CSS Anweisungen in der Datei selber überschreiben. Da die Stlye.css anhand der Endung als W3C (HTML / CSS / etc.) Datei von VS Code erkannt wird, kann ich dort auch mit den integrierten Tools und Modulen arbeiten. Z.B. um einen Farbcode auszuwählen.
NoText

Beispiel 1

Code

<style type=”text/css”>
th { background-color: #666; color: #fff; } tr { background-color: #fffbf0; color: #000; } tr:nth-child(odd) { background-color: #e4ebf2 ; } .zahl { list-style: square inside; }
</style>
<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></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Ausgabe

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

Beispiel 2 Colspan mit individueller Breite der Spalten

Code

<table style=”border-collapse: collapse;” border=”0”><colgroup><col style="width: 42px;" /><col style="width: 561px;" /><col style="width: 111px;" /><col style="width: 75px;" /><col style="width: 75px;" /><col style="width: 75px;" /></colgroup>
<tr style=”height: 21px;”>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr style=”height: 21px;”>
<td></td>
<td>Acer</td>
<td>Asus</td>
<td>Dell</td>
<td>Huawei</td>
<td>Thinkpad</td>
</tr>
</table>

Ausgabe

1 2 3 4 5 6
Acer Asus Dell Huawei Thinkpad

Beispiel 3: Tabellenzellen direkt formatiert

Code

<table>
<tbody valign=”top”>
<tr style=”height: 21px;”>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: solid 1.0pt; border-right: none;”> </td>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: solid 1.0pt; border-right: none;” valign=”bottom”>Klang</td>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: solid 1.0pt; border-right: none;” valign=”bottom”>Pynyin</td>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: solid 1.0pt; border-right: none;” valign=”bottom”>traditionell</td>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: solid 1.0pt; border-right: none;” valign=”bottom”>simpel</td>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: solid 1.0pt; border-right: none;” valign=”bottom”>Zeichen</td>
</tr>
<tr style=”height: 21px;”>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;”>1</td>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;” valign=”bottom”>Hoch</td>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;” valign=”bottom”>dì yī shēng</td>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;” valign=”bottom”>第一聲</td>
<td style=”padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;” valign=”bottom”>第一声</td>
<td style=”padding-left: 5px; padding-right: 5px; border: none;” valign=”bottom”>¯</td>
</tr>
</tbody>
</table>

Ausgabe

Klang Pynyin traditionell simpel Zeichen
1 Hoch dì yī shēng 第一聲 第一声 ¯

Mit dem “HTML Table Style Generator” von Eli Geske können auch “nicht Webentwickler” wie ich sich schöne CSS Tabellen Design zusammen klicken. Danke an dieser Stelle an Eli Geske für den tollen Webservice!

Quellen

  1. GitHub Help: Organizing information with tables
  2. GitHub Help: Organizing information with tables
  3. Daringfireball.net:HTML
  4. Tables Online Generator
  5. SelfHTML Aufbau einer Tabelle
  6. css-tricks.com: A Complete Guide to the Table Element
Letzte Änderung May 8, 2019