Aggiungere una tabella al tuo post usando markdown

[Discourse]

Questa guida spiega come aggiungere tabelle ai tuoi post di Discourse usando Markdown.

Livello utente richiesto: Tutti gli utenti

L’aggiunta di tabelle ai tuoi post può aiutare a presentare i dati in un formato strutturato e di facile lettura. Questa guida ti illustrerà come creare tabelle in Markdown su Discourse, coprendo le basi delle tabelle, l’allineamento e funzionalità speciali come l’aggiunta di emoji e immagini.

Utilizzo del Generatore di Tabelle (Table Builder)

Discourse include un Generatore di Tabelle (Table Builder) integrato che ti consente di creare e modificare tabelle utilizzando un’interfaccia simile a un foglio di calcolo — nessuna conoscenza di Markdown richiesta.

Per inserire una nuova tabella:

1. Apri il compositore
2. Fai clic sul pulsante nella barra degli strumenti (il menu delle opzioni)
3. Seleziona Inserisci tabella (Insert table)
4. Utilizza l’editor di foglio di calcolo per aggiungere le intestazioni e i dati
5. Fai clic su Costruisci Tabella (Build Table) per inserire la tabella Markdown generata nel tuo post

Per modificare una tabella esistente in un post, fai clic sul pulsante Modifica Tabella (Edit Table) che appare sopra la tabella (visibile agli utenti con i permessi di modifica). Questo apre lo stesso editor di foglio di calcolo precompilato con i dati della tabella.

Creazione di una tabella semplice

Creare una tabella in Discourse usando Markdown è semplice. Ecco una guida passo passo:

1. Inizia definendo l’intestazione:

• La prima riga della tua tabella conterrà le intestazioni per ciascuna colonna.
• La seconda riga separa le intestazioni dal resto della tabella.

Ecco un esempio per una tabella con tre colonne:

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

Questo risulta in:

Col A	Col B	Col C

2. Aggiungi righe di dati:

• Ogni riga inizia e finisce con il carattere |.
• Assicurati che il numero di colonne corrisponda a quello dell’intestazione.

Esempio:

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

Questo risulta in:

Col A	Col B	Col C
A1	B1	C1
A2	B2

Allineamento

Puoi controllare l’allineamento del contenuto delle colonne con i due punti (:):

• Allineato a sinistra: |:---|
• Allineato al centro: |:---:|
• Allineato a destra: |---:|

Esempio:

| Sinistra | Centro | Destra |
|:---|:---:|---:|
| Il mio contenuto è a sinistra | Sono il centro del mondo | Mi piace stare a destra |
| :waxing_gibbous_moon: | :full_moon: | :waning_gibbous_moon: |

Questo risulta in:

Sinistra	Centro	Destra
Il mio contenuto è a sinistra	Sono il centro del mondo	Mi piace stare a destra

Link cliccabili nelle Tabelle

L’aggiunta di link cliccabili all’interno delle tabelle può essere utile per indirizzare gli utenti a risorse specifiche o contenuti esterni.

Per includere un link cliccabile, usa la sintassi standard dei link Markdown all’interno di una cella della tabella. Il formato è [Testo del Link](URL).

Esempio:

| Colonna A | Colonna B | Colonna C |
|---|---|---|
| [Google](https://www.google.com) | Testo di esempio | Un altro link |

Questo risulta in:

Colonna A	Colonna B	Colonna C
Google	Testo di esempio	Un altro link

Immagini nelle Tabelle

Per utilizzare immagini nelle tabelle, dovrai utilizzare il carattere di escape \ prima del pipe | nel codice dell’immagine dopo averla caricata.

Esempio:

Immagine | Descrizione
---|---
![Un Chihuahua che si gode un espresso \|411x500, 30%](upload://yHjzeeWrEA1oWYMT9ATBOPudbKk.jpeg) | Un Chihuahua che si gode un espresso in un caffè.

Questo risulta in:

Immagine	Descrizione
	Un Chihuahua che si gode un espresso in un caffè.

Immagini Cliccabili nelle Tabelle

Per rendere un’immagine cliccabile, puoi annidare la sintassi Markdown dell’immagine all’interno della sintassi Markdown del link. Ecco il formato di base:

[![testo alternativo](URL immagine)](URL link)

Il testo alternativo è importante per l’accessibilità, poiché descrive l’immagine se non viene caricata o se viene utilizzata da screen reader. Usa sempre un testo alternativo significativo.

Ecco come puoi incorporare immagini cliccabili in una tabella Markdown:

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

Questo risulta in:

Immagine 1

Copia-incolla di tabelle

Puoi copiare tabelle da documenti esterni o fogli di calcolo e incollarle direttamente nei post; Discourse le convertirà automaticamente in Markdown.

Se crei tabelle frequentemente, puoi anche utilizzare strumenti come TableConvert per convertire tabelle da altri formati (CSV, JSON, ecc.) in 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.