Eine Tabelle mit Markdown zu Ihrem Beitrag hinzufügen

[Discourse]

Diese Anleitung erklärt, wie Sie Ihren Discourse-Beiträgen mithilfe von Markdown Tabellen hinzufügen können.

Erforderliche Benutzerebene: Alle Benutzer

Das Hinzufügen von Tabellen zu Ihren Beiträgen kann helfen, Daten strukturiert und leicht lesbar darzustellen. Diese Anleitung führt Sie durch die Erstellung von Tabellen in Markdown auf Discourse und behandelt die Grundlagen von Tabellen, die Ausrichtung und spezielle Funktionen wie das Hinzufügen von Emojis und Bildern.

Verwendung des Tabellenerstellers (Table Builder)

Discourse verfügt über einen integrierten Table Builder (Tabellenersteller), mit dem Sie Tabellen mithilfe einer tabellenkalkulationsähnlichen Oberfläche erstellen und bearbeiten können – es sind keine Markdown-Kenntnisse erforderlich.

Um eine neue Tabelle einzufügen:

1. Öffnen Sie den Composer
2. Klicken Sie in der Symbolleiste auf die Schaltfläche (das Optionenmenü)
3. Wählen Sie Tabelle einfügen (Insert table)
4. Verwenden Sie den Tabellenkalkulationseditor, um Ihre Kopfzeilen und Daten hinzuzufügen
5. Klicken Sie auf Tabelle erstellen (Build Table), um die generierte Markdown-Tabelle in Ihren Beitrag einzufügen

Um eine vorhandene Tabelle in einem Beitrag zu bearbeiten, klicken Sie auf die Schaltfläche Tabelle bearbeiten (Edit Table), die über der Tabelle erscheint (für Benutzer mit Bearbeitungsberechtigung sichtbar). Dadurch wird derselbe Editor für Tabellenkalkulationen geöffnet, der bereits mit den Daten der Tabelle vorausgefüllt ist.

Erstellen einer einfachen Tabelle

Das Erstellen einer Tabelle in Discourse mithilfe von Markdown ist unkompliziert. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Beginnen Sie mit der Definition der Kopfzeile:

• Die erste Zeile Ihrer Tabelle enthält die Überschriften für jede Spalte.
• Die zweite Zeile trennt die Kopfzeilen vom Rest der Tabelle.

Hier ist ein Beispiel für eine Tabelle mit drei Spalten:

| Col A | Col B | Col C |
|---|---|---|

Dies ergibt:

Col A	Col B	Col C

2. Fügen Sie Datenzeilen hinzu:

• Jede Zeile beginnt und endet mit dem Zeichen |.
• Stellen Sie sicher, dass die Anzahl der Spalten mit der der Kopfzeile übereinstimmt.

Beispiel:

| Col A | Col B | Col C |
|---|---|---|
| A1 | B1 | C1 |
| A2 | B2 | :smile: |

Dies ergibt:

Col A	Col B	Col C
A1	B1	C1
A2	B2

Ausrichtung

Sie können die Ausrichtung des Spalteninhalts mit Doppelpunkten (:) steuern:

• Links ausgerichtet: |:---|
• Zentriert ausgerichtet: |:---:|
• Rechts ausgerichtet: |---:|

Beispiel:

| Left | Center | Right |
|:---|:---:|---:|
| My content is on the left | I'm the center of the world | I like being on the right side |
| :waxing_gibbous_moon: | :full_moon: | :waning_gibbous_moon: |

Dies ergibt:

Left	Center	Right
My content is on the left	I’m the center of the world	I like being on the right side

Klickbare Links in Tabellen

Das Hinzufügen klickbarer Links in Tabellen kann nützlich sein, um Benutzer auf bestimmte Ressourcen oder externe Inhalte zu verweisen.

Um einen klickbaren Link einzufügen, verwenden Sie die Standard-Markdown-Link-Syntax innerhalb einer Tabellenzelle. Das Format lautet [Link-Text](URL).

Beispiel:

| Column A | Column B | Column C |
|---|---|---|
| [Google](https://www.google.com) | Example Text | Another Link |

Dies ergibt:

Column A	Column B	Column C
Google	Example Text	Another Link

Bilder in Tabellen

Um Bilder in Tabellen zu verwenden, müssen Sie das Escape-Zeichen \ vor der Pipe | im Bildcode einfügen, nachdem Sie das Bild hochgeladen haben.

Beispiel:

Image | Description
---|---
![A Chihuahua enjoying espresso \|411x500, 30%](upload://yHjzeeWrEA1oWYMT9ATBOPudbKk.jpeg) | A Chihuahua enjoying espresso in a cafe.

Dies ergibt:

Image	Description
	A Chihuahua enjoying espresso in a cafe.

Klickbare Bilder in Tabellen

Um ein Bild anklickbar zu machen, können Sie die Bild-Markdown-Syntax in die Link-Markdown-Syntax einbetten. Hier ist das Grundformat:

[![alternativer Text](Bild-URL)](Link-URL)

Der alternativer Text ist wichtig für die Barrierefreiheit, da er das Bild beschreibt, falls es nicht geladen wird oder von Screenreadern verwendet wird. Verwenden Sie immer aussagekräftigen Alternativtext.

So können Sie klickbare Bilder in eine Markdown-Tabelle einfügen:

| Image 1 | 
|---|
| [![Discourse Logo](upload://38VzhGhUKzAURX4FN7LfBEpX6r1.png)](https://meta.discourse.org/)

Dies ergibt:

Image 1

Tabellen kopieren und einfügen

Sie können Tabellen aus externen Dokumenten oder Tabellenkalkulationen kopieren und direkt in Beiträge einfügen. Discourse konvertiert sie automatisch in Markdown.

Wenn Sie häufig Tabellen erstellen, können Sie auch Tools wie TableConvert verwenden, um Tabellen aus anderen Formaten (CSV, JSON usw.) in Markdown zu konvertieren.

[Falco]

Great guide!

Also, if you have a Spreadsheet or a CSV file, and don’t want to convert it manually, I always use this online tool: Markdown Tables generator - TablesGenerator.com

[Biscuit]

Is there any way to add the vertical borders between columns, without using CSS?

[Steven]

Sadly no. You’d have to add it on the css customize section

Something like that should do it :

.cooked table td, .cooked table th, .d-editor-preview table td, .d-editor-preview table th {
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}

[Biscuit]

Thanks. I don’t have admin rights, so unfortunately I can’t modify CSS.

I was hoping an ASCII character like a plus sign would add a vertical border in the table. eg:

+---+---+ 

Sounds like that’s not available.

[W.M]

How to add a custom class attribute to the table?

[ChameleonScales]

How can we make a table of clickable thumbnails ?
I don’t want to use a “hyperlink thumbnail” which would lead you to a new page but rather use Discord’s slideshow tool.
I know we can make thumbnails by using ![title|230x180](image-url) but apparently the vertical bar | inside the brackets breaks the table.
Is there a way around this problem ?

[Steven]

You can use html to make a clickable thumbnail, it will be less perfect, but it’ll work

<a href=""><img src="" width="" height=""></a>

Edit: uh wait, I just have a little doubt, I’m not sure html is supported in tables

[ChameleonScales]

As I said, I don’t want hyperlink images that open a new page.

I want clickable thumbnails that open directly in Discourse and let you slide through the gallery without leaving the website. Just like this :

but inside a table.

[notriddle (Michael Howell)]

Here’s a table with clickable thumbnails in it

Your picture	My picture

Here’s how I did it

<table>
<tr><th>Your picture</th><th>My picture</th></tr>
<tr>
<td>

![Bayon%20temple|271x180](upload://icDRdwwiwP7yGzIQNRNG9R8pLTN.jpg)

</td><td>

![jeezus|225x225](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/d/0/d0cea6798be0f38d39a73056bc45a57ec8a55fba.jpg)

</td>
</tr>
</table>

[ChameleonScales]

Thanks, I actually found the same solution in the mean time but that’s perfect !
Would’ve been more handy in Mardown entirely but this is great already.

Boom baby !

[Falco]

You can do it in pure markdown by escaping the pipe in the images, as we discussed here: Pictures don't upload well into tables because of the straight bar symbol

[ChameleonScales]

Perfect ! Thank you

[adrianbblk]

Is there a way to make it responsive? I mean the width of the table to adjust based on the screen size?

Thanks

[Steven]

It’s already responsive-ish, but it can be optimized

.md-table {
    width: 100%;
}

.md-table table {
    width: 100%;
}

This would be the base to something like this, the table will use all the width of the post on bigger screens. And when you reduce the size of the window, it will adapt.

But it won’t be perfect. If you have only two small columns the table will seem empty, if you have a lot of columns, it will not fit on smaller screens. But it’s a start

[Ayayo]

The most difficult thing for me to do in Markdown syntax is creating tables. I do not need very complicated tables: just simple ones. But even for simple tables, the syntax for tables is … terrible…

And here comes an online TableConvert which is not only a markdown table generator but also a markdown table editor. It’s an easy thing to convert json, csv, excel, latex table and html table into markdown tables.

[codinghorror (Jeff Atwood)]

It’s not all that bad:

hello	there
minimal	table

|hello|there|
|-|-|
|minimal|table|

But sharing tools is always good too.

[justin (Justin DiRose)]

I always forget the syntax because I create tables maybe once every 3 months

[codinghorror (Jeff Atwood)]

Just remember the pipe key and you are 90% of the way there!

[Canapin (Coin-coin le Canapin)]

@Steven

But it won’t be perfect. If you have only two small columns the table will seem empty, if you have a lot of columns, it will not fit on smaller screens. But it’s a start

A behavior similar to bootstrap responsive tables would be neat.
If a table is larger than your screen, it’s becomes horizontally scrollable. Couldn’t be simplier, and it works well.