Sintassi Tabelle

Le tabelle sono una parte importante della sintassi estesa di Markdown, utilizzate per visualizzare dati in modo strutturato.

Sintassi Base delle Tabelle

Tabella Semplice

Usa la barra verticale | per separare le colonne e il trattino - per creare la riga di separazione dell'intestazione:

markdown

| Nome  | Età | Professione |
|-------|-----|------------|
| Zhang | 25  | Ingegnere   |
| Li    | 30  | Designer    |
| Wang  | 28  | Product Manager |

Risultato Renderizzato:

Nome	Età	Professione
Zhang	25	Ingegnere
Li	30	Designer
Wang	28	Product Manager

Allineamento delle Colonne

Usa i due punti : per controllare l'allineamento delle colonne:

markdown

| Allineamento Sinistra | Allineamento Centro | Allineamento Destra |
|:---------------------|:-------------------:|--------------------:|
| Contenuto 1          | Contenuto 1         | Contenuto 1         |
| Contenuto 2          | Contenuto 2         | Contenuto 2         |
| Contenuto 3          | Contenuto 3         | Contenuto 3         |

Risultato Renderizzato:

Allineamento Sinistra	Allineamento Centro	Allineamento Destra
Contenuto 1	Contenuto 1	Contenuto 1
Contenuto 2	Contenuto 2	Contenuto 2
Contenuto 3	Contenuto 3	Contenuto 3

Dettagli Allineamento

Sintassi Allineamento

Sintassi	Allineamento	Esempio
`---`	Sinistra (default)	`
`:--:`	Centro	`
`--:`	Destra	`

Tabelle Dati Numerici

L'allineamento a destra è adatto per visualizzare numeri:

markdown

| Prodotto | Prezzo | Vendite | Fatturato |
|:---------|-------:|--------:|----------:|
| A        | €99    | 1.250   | €123.750  |
| B        | €199   | 856     | €170.344  |
| C        | €299   | 432     | €129.168  |
| **Totale** |      | **2.538** | **€423.262** |

Risultato Renderizzato:

Prodotto	Prezzo	Vendite	Fatturato
A	€99	1.250	€123.750
B	€199	856	€170.344
C	€299	432	€129.168
Totale		2.538	€423.262

Formattazione nelle Tabelle

Formattazione Inline

Le celle delle tabelle supportano la formattazione inline Markdown:

markdown

| Funzionalità   | Stato      | Descrizione                      |
|---------------|------------|----------------------------------|
| **Login**     | ✅ Fatto    | Gli utenti possono accedere via email |
| *Registrazione* | 🚧 In corso | Supporto registrazione terze parti |
| `Reset Password` | ❌ Da fare | Reset password via email         |
| [Centro Utente](/) | ⏳ Pianificato | Gestione informazioni utente |

Risultato Renderizzato:

Funzionalità	Stato	Descrizione
Login	✅ Fatto	Gli utenti possono accedere via email
Registrazione	🚧 In corso	Supporto registrazione terze parti
`Reset Password`	❌ Da fare	Reset password via email
Centro Utente	⏳ Pianificato	Gestione informazioni utente

Codice nelle Tabelle

markdown

| Comando | Funzione        | Esempio              |
|---------|-----------------|----------------------|
| `ls`    | Elenca file     | `ls -la`             |
| `cd`    | Cambia cartella | `cd /home/user`      |
| `mkdir` | Crea cartella   | `mkdir nuova-cartella`|
| `rm`    | Rimuove file    | `rm -rf cartella/`   |

Risultato Renderizzato:

Comando	Funzione	Esempio
`ls`	Elenca file	`ls -la`
`cd`	Cambia cartella	`cd /home/user`
`mkdir`	Crea cartella	`mkdir nuova-cartella`
`rm`	Rimuove file	`rm -rf cartella/`

Esempi di Tabelle Complesse

Tabella di Confronto Tecnologie

markdown

| Caratteristica      | React | Vue | Angular |
|:-------------------|:-----:|:---:|:-------:|
| **Curve di apprendimento** | Media | Facile | Difficile |
| **Performance**    | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **Ecosistema**     | Ricco | Buono | Completo |
| **Supporto Enterprise** | Facebook | Indipendente | Google |
| **TypeScript**     | ✅    | ✅   | ✅ Integrato |
| **Attività Community** | Molto alta | Alta | Media |

Risultato Renderizzato:

Caratteristica	React	Vue	Angular
Curve di apprendimento	Media	Facile	Difficile
Performance	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Ecosistema	Ricco	Buono	Completo
Supporto Enterprise	Facebook	Indipendente	Google
TypeScript	✅	✅	✅ Integrato
Attività Community	Molto alta	Alta	Media

Tabella Documentazione API

markdown

| Parametro | Tipo     | Obbligatorio | Default   | Descrizione                      |
|-----------|----------|:------------:|-----------|----------------------------------|
| `id`      | `number` | ✅           | -         | Identificatore utente univoco    |
| `name`    | `string` | ✅           | -         | Nome utente                      |
| `email`   | `string` | ✅           | -         | Indirizzo email utente           |
| `age`     | `number` | ❌           | `null`    | Età utente                       |
| `avatar`  | `string` | ❌           | `"/default.jpg"` | URL avatar             |
| `status`  | `enum`   | ❌           | `"active"` | Stato account: `active` \| `inactive` |

Risultato Renderizzato:

Parametro	Tipo	Obbligatorio	Default	Descrizione
`id`	`number`	✅	-	Identificatore utente univoco
`name`	`string`	✅	-	Nome utente
`email`	`string`	✅	-	Indirizzo email utente
`age`	`number`	❌	`null`	Età utente
`avatar`	`string`	❌	`"/default.jpg"`	URL avatar
`status`	`enum`	❌	`"active"`	Stato account: `active` \| `inactive`

Suggerimenti di Formattazione Tabelle

Uso delle Emoji

markdown

| OS      | Supporto | Nota         |
|---------|:--------:|--------------|
| Windows | ✅       | Supporto completo |
| macOS   | ✅       | Supporto completo |
| Linux   | ⚠️       | Supporto parziale |
| iOS     | ❌       | Non supportato   |
| Android | 🚧      | In sviluppo      |

Risultato Renderizzato:

OS	Supporto	Nota
Windows	✅	Supporto completo
macOS	✅	Supporto completo
Linux	⚠️	Supporto parziale
iOS	❌	Non supportato
Android	🚧	In sviluppo

Uso dei Badge

markdown

| Progetto | Stato | Versione |
|----------|-------|----------|
| React    | ![Stabile](https://img.shields.io/badge/status-stable-green) | `v18.2.0` |
| Vue      | ![Stabile](https://img.shields.io/badge/status-stable-green) | `v3.3.0`  |
| Angular  | ![Beta](https://img.shields.io/badge/status-beta-orange)     | `v16.0.0` |

Gestione Celle Vuote

Rappresentazione del Contenuto Vuoto

markdown

| Voce | Q1   | Q2   | Q3   | Q4   |
|------|:----:|:----:|:----:|:----:|
| Fatturato | 1M   | 1,2M | -    | -    |
| Spese     | 800K | 900K | 950K | -    |
| Utile     | 200K | 300K |      |      |

Risultato Renderizzato:

Voce	Q1	Q2	Q3	Q4
Fatturato	1M	1,2M	-	-
Spese	800K	900K	950K	-
Utile	200K	300K

Errori Comuni e Soluzioni

1. Barre Verticali Non Allineate

markdown

❌ Errato:
| Nome | Età|Professione|
|------|----|-----------|
|Zhang|25|Ingegnere|

✅ Corretto:
| Nome | Età | Professione |
|------|-----|-------------|
| Zhang | 25  | Ingegnere   |

2. Riga Separatrice Mancante

markdown

❌ Errato:
| Nome | Età | Professione |
| Zhang | 25 | Ingegnere |

✅ Corretto:
| Nome | Età | Professione |
|------|-----|-------------|
| Zhang | 25  | Ingegnere   |

3. Numero di Colonne Non Corrispondente

markdown

❌ Errato:
| Nome | Età | Professione |
|------|-----|-------------|
| Zhang | 25 |  ← Manca la terza colonna

✅ Corretto:
| Nome | Età | Professione |
|------|-----|-------------|
| Zhang | 25  | Ingegnere   |

4. Gestione Caratteri Speciali

markdown

❌ Problema:
| Prezzo | Descrizione |
|--------|-------------|
| $100|tasse incluse |  ← Barra verticale usata male

✅ Soluzione:
| Prezzo | Descrizione |
|--------|-------------|
| $100 | tasse incluse |
| $200 | Prezzo\|tasse incluse |  ← Escape della barra verticale

Funzionalità Avanzate Tabelle

Migliorare con HTML

markdown

<table>
  <tr>
    <th colspan="2">Intestazione Colonna Unita</th>
    <th>Colonna Normale</th>
  </tr>
  <tr>
    <td rowspan="2">Riga Unita</td>
    <td>Dati 1</td>
    <td>Dati 2</td>
  </tr>
  <tr>
    <td>Dati 3</td>
    <td>Dati 4</td>
  </tr>
</table>

Risultato Renderizzato:

Intestazione Colonna Unita		Colonna Normale
Riga Unita	Dati 1	Dati 2
Riga Unita	Dati 3	Dati 4

Stili Personalizzati Tabelle

markdown

<table style="width: 100%; border-collapse: collapse;">
  <tr style="background-color: #f0f0f0;">
    <th style="border: 1px solid #ddd; padding: 8px;">Prodotto</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Prezzo</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">A</td>
    <td style="border: 1px solid #ddd; padding: 8px; color: red;">€99</td>
  </tr>
</table>

Scenari Pratici di Applicazione

1. Gestione Progetti

markdown

## Tabella Avanzamento Attività

| Attività | Responsabile | Data Inizio | Data Fine | Stato | Completamento |
|---------|-------------|-------------|-----------|:-----:|:-------------:|
| Analisi Requisiti | Zhang | 2023-10-01 | 2023-10-07 | ✅ | 100% |
| UI Design | Li | 2023-10-08 | 2023-10-15 | 🚧 | 75% |
| Sviluppo Frontend | Wang | 2023-10-16 | 2023-10-30 | ⏳ | 0% |
| Sviluppo Backend | Zhao | 2023-10-16 | 2023-11-05 | ⏳ | 0% |
| Test | Sun | 2023-11-06 | 2023-11-12 | ⏳ | 0% |

2. Confronto Prodotti

markdown

## Confronto Piani di Abbonamento

| Caratteristica | Free | Pro | Enterprise |
|---------------|:----:|:---:|:----------:|
| **Limite Utenti** | 5 | 50 | Illimitato |
| **Storage** | 1GB | 100GB | 1TB |
| **Chiamate API** | 1000/mese | 100k/mese | Illimitate |
| **Supporto** | Community | Email | Dedicato |
| **SLA** | - | 99.9% | 99.99% |
| **Prezzo** | Gratis | €99/mese | €999/mese |
| | [Scegli](/) | [Scegli](/) | [Contatta Sales](/) |

3. Report Finanziario

markdown

## Report Finanziario Mensile

| Voce | Gen | Feb | Mar | Totale |
|------|-----:|-----:|-----:|-------:|
| **Entrate** |     |     |     |       |
| Vendite Prodotti | 50.000 | 55.000 | 60.000 | 165.000 |
| Servizi | 20.000 | 22.000 | 25.000 | 67.000 |
| Altre Entrate | 2.000 | 1.500 | 3.000 | 6.500 |
| *Subtotale* | *72.000* | *78.500* | *88.000* | *238.500* |
| **Uscite** |     |     |     |       |
| Stipendi | 30.000 | 30.000 | 30.000 | 90.000 |
| Affitto Ufficio | 8.000 | 8.000 | 8.000 | 24.000 |
| Marketing | 10.000 | 12.000 | 15.000 | 37.000 |
| *Subtotale* | *48.000* | *50.000* | *53.000* | *151.000* |
| **Utile Netto** | **24.000** | **28.500** | **35.000** | **87.500** |

Best Practice

1. Mantieni la Semplicità

markdown

✅ Consigliato: Semplice e chiaro
| Voce | Stato |
|------|-------|
| A    | Fatto |
| B    | In corso |

❌ Non consigliato: Sovraccarico di informazioni
| Nome Progetto | Stato Attuale | Descrizione Dettagliata | Responsabile | Data Inizio | Data Fine | Note |

2. Usa Intestazioni Significative

markdown

✅ Consigliato: Intestazioni descrittive
| Linguaggio di Programmazione | Difficoltà | Applicazione |

❌ Non consigliato: Intestazioni vaghe
| Voce1 | Voce2 | Voce3 |

3. Usa l'Allineamento in Modo Appropriato

markdown

✅ Consigliato: Numeri allineati a destra
| Prodotto | Prezzo | Quantità |
|:---------|------:|--------:|
| A        | €100  | 50      |

✅ Consigliato: Testo allineato a sinistra
| Nome | Dipartimento | Posizione |
|:-----|:-------------|:----------|
| Zhang | Tech        | Ingegnere |

Output HTML

Le tabelle Markdown vengono convertite in HTML:

markdown

| Nome | Età |
|------|-----|
| Zhang | 25 |

Diventa:

html

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Età</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zhang</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Sintassi Correlata

Panoramica Sintassi Base - Basi di Markdown
Panoramica Sintassi Estesa - Altre estensioni
Sintassi HTML - Miglioramenti HTML

Pratica

Prova a creare le seguenti tabelle:

Una tabella di presentazione del team
Una tabella di confronto prezzi prodotto
Una tabella di avanzamento progetto
Una tabella di valutazione tech stack

Strumenti Consigliati

Generator Tabelle

Strumenti online: Tables Generator, Markdown Tables Generator
Plugin editor: VS Code Markdown Table, Typora Table Editing
Strumenti di conversione: Excel to Markdown, CSV to Markdown

Abbellimento Tabelle

Framework CSS: Bootstrap, Tailwind CSS
Librerie tabelle: DataTables, AG Grid
Estensioni Markdown: markdown-it-table, remark-gfm

Sintassi Tabelle ​

Sintassi Base delle Tabelle ​

Tabella Semplice ​

Allineamento delle Colonne ​

Dettagli Allineamento ​

Sintassi Allineamento ​

Tabelle Dati Numerici ​

Formattazione nelle Tabelle ​

Formattazione Inline ​

Codice nelle Tabelle ​

Esempi di Tabelle Complesse ​

Tabella di Confronto Tecnologie ​

Tabella Documentazione API ​

Suggerimenti di Formattazione Tabelle ​

Uso delle Emoji ​

Uso dei Badge ​

Gestione Celle Vuote ​

Rappresentazione del Contenuto Vuoto ​

Errori Comuni e Soluzioni ​

1. Barre Verticali Non Allineate ​

2. Riga Separatrice Mancante ​

3. Numero di Colonne Non Corrispondente ​

4. Gestione Caratteri Speciali ​

Funzionalità Avanzate Tabelle ​

Migliorare con HTML ​

Stili Personalizzati Tabelle ​

Scenari Pratici di Applicazione ​

1. Gestione Progetti ​

2. Confronto Prodotti ​

3. Report Finanziario ​

Best Practice ​

1. Mantieni la Semplicità ​

2. Usa Intestazioni Significative ​

3. Usa l'Allineamento in Modo Appropriato ​

Output HTML ​

Sintassi Correlata ​

Pratica ​

Strumenti Consigliati ​

Generator Tabelle ​

Abbellimento Tabelle ​

Sintassi Tabelle

Sintassi Base delle Tabelle

Tabella Semplice

Allineamento delle Colonne

Dettagli Allineamento

Sintassi Allineamento

Tabelle Dati Numerici

Formattazione nelle Tabelle

Formattazione Inline

Codice nelle Tabelle

Esempi di Tabelle Complesse

Tabella di Confronto Tecnologie

Tabella Documentazione API

Suggerimenti di Formattazione Tabelle

Uso delle Emoji

Uso dei Badge

Gestione Celle Vuote

Rappresentazione del Contenuto Vuoto

Errori Comuni e Soluzioni

1. Barre Verticali Non Allineate

2. Riga Separatrice Mancante

3. Numero di Colonne Non Corrispondente

4. Gestione Caratteri Speciali

Funzionalità Avanzate Tabelle

Migliorare con HTML

Stili Personalizzati Tabelle

Scenari Pratici di Applicazione

1. Gestione Progetti

2. Confronto Prodotti

3. Report Finanziario

Best Practice

1. Mantieni la Semplicità

2. Usa Intestazioni Significative

3. Usa l'Allineamento in Modo Appropriato

Output HTML

Sintassi Correlata

Pratica

Strumenti Consigliati

Generator Tabelle

Abbellimento Tabelle