Ajouter un tableau à votre publication en utilisant markdown

[Discourse]

Ce guide explique comment ajouter des tableaux à vos publications Discourse en utilisant Markdown.

Niveau d’utilisateur requis : Tous les utilisateurs

L’ajout de tableaux à vos publications peut aider à présenter les données dans un format structuré et facile à lire. Ce guide vous expliquera comment créer des tableaux en Markdown sur Discourse, couvrant les bases des tableaux, l’alignement et les fonctionnalités spéciales telles que l’ajout d’emojis et d’images.

Utilisation du Constructeur de Tableaux

Discourse comprend un Constructeur de Tableaux intégré qui vous permet de créer et de modifier des tableaux à l’aide d’une interface de type tableur — aucune connaissance de Markdown n’est requise.

Pour insérer un nouveau tableau :

1. Ouvrez le compositeur
2. Cliquez sur le bouton dans la barre d’outils (le menu des options)
3. Sélectionnez Insérer un tableau
4. Utilisez l’éditeur de tableur pour ajouter vos en-têtes et vos données
5. Cliquez sur Construire le Tableau pour insérer le tableau Markdown généré dans votre publication

Pour modifier un tableau existant dans une publication, cliquez sur le bouton Modifier le Tableau qui apparaît au-dessus du tableau (visible pour les utilisateurs disposant des autorisations de modification). Cela ouvre le même éditeur de tableur pré-rempli avec les données du tableau.

Création d’un tableau simple

Créer un tableau dans Discourse en utilisant Markdown est simple. Voici un guide étape par étape :

1. Commencez par définir l’en-tête :

• La première ligne de votre tableau contiendra les en-têtes de chaque colonne.
• La deuxième ligne sépare les en-têtes du reste du tableau.

Voici un exemple pour un tableau à trois colonnes :

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

Ceci résulte en :

Col A	Col B	Col C

2. Ajoutez des lignes de données :

• Chaque ligne commence et se termine par le caractère |.
• Assurez-vous que le nombre de colonnes correspond à celui de l’en-tête.

Exemple :

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

Ceci résulte en :

Col A	Col B	Col C
A1	B1	C1
A2	B2

Alignement

Vous pouvez contrôler l’alignement du contenu des colonnes avec des deux-points (:):

• Alignement à gauche : |:---|
• Alignement au centre : |:---:|
• Alignement à droite : |---:|

Exemple :

| Gauche | Centre | Droite |
|:---|:---:|---:|
| Mon contenu est à gauche | Je suis le centre du monde | J'aime être à droite |
| :waxing_gibbous_moon: | :full_moon: | :waning_gibbous_moon: |

Ceci résulte en :

Gauche	Centre	Droite
Mon contenu est à gauche	Je suis le centre du monde	J’aime être à droite

Liens cliquables dans les tableaux

L’ajout de liens cliquables dans les tableaux peut être utile pour diriger les utilisateurs vers des ressources spécifiques ou du contenu externe.

Pour inclure un lien cliquable, utilisez la syntaxe standard de lien Markdown dans une cellule de tableau. Le format est [Texte du lien](URL).

Exemple :

| Colonne A | Colonne B | Colonne C |
|---|---|---|
| [Google](https://www.google.com) | Texte d'exemple | Un autre lien |

Ceci résulte en :

Colonne A	Colonne B	Colonne C
Google	Texte d’exemple	Un autre lien

Images dans les tableaux

Pour utiliser des images dans des tableaux, vous devrez utiliser le caractère d’échappement \ avant la barre verticale | dans le code de l’image après l’avoir téléchargée.

Exemple :

Image | Description
---|---
![Un Chihuahua profitant d'un expresso \\|411x500, 30%](upload://yHjzeeWrEA1oWYMT9ATBOPudbKk.jpeg) | Un Chihuahua profitant d'un expresso dans un café.

Ceci résulte en :

Image	Description
	Un Chihuahua profitant d’un expresso dans un café.

Images cliquables dans les tableaux

Pour rendre une image cliquable, vous pouvez imbriquer la syntaxe Markdown de l’image dans la syntaxe Markdown du lien. Voici le format de base :

[![texte alternatif](URL de l'image)](URL du lien)

Le texte alternatif est important pour l’accessibilité, car il décrit l’image si elle ne se charge pas ou s’il est utilisé par des lecteurs d’écran. Utilisez toujours un texte alternatif significatif.

Voici comment vous pouvez intégrer des images cliquables dans un tableau Markdown :

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

Ceci résulte en :

Image 1

Copier-coller des tableaux

Vous pouvez copier des tableaux à partir de documents externes ou de tableurs et les coller directement dans les publications ; Discourse les convertira automatiquement en Markdown.

Si vous créez fréquemment des tableaux, vous pouvez également utiliser des outils tels que TableConvert pour convertir des tableaux à partir d’autres formats (CSV, JSON, etc.) en Markdown.

[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.