Aiuto:Tabelle

In questa pagina viene spiegata la sintassi per inserire una tabella in Wikivoyage, usando il markup wiki.

Esistono alcuni strumenti per generare automaticamente delle tabelle. Per una guida completa sulle tabelle (in inglese), vedi i link in fondo alla pagina.

Nel seguito viene mostrato in dettaglio come costruire una tabella.

Sommario

Una tabella è definita dai comandi

{| parametri
 
|}

che corrispondono ai comandi HTML standard

<table parametri>
 
</table>

Tra <table e parametri è necessario uno spazio, che invece può essere omesso nella sintassi wiki.

Al posto di parametri normalmente si imposta class="wikitable", che produce un aspetto grafico standard.

Il markup di una tabella si può riassumere nella seguente legenda:

{|	Inizio della tabella
|+	didascalia della tabella, facoltativa, si può mettere solo fra l'Inizio della tabella e la prima riga della tabella
|-	riga della tabella, facoltativa sulla prima riga— MediaWiki assume che esista la prima riga
!	cella intestazione (header), facoltativa. Intestazioni consecutive possono stare sulla stessa linea separata da doppi punti esclamativi (!!).
|	contenuto della tabella, obbligatorio! Celle consecutive possono essere aggiunte sulla stessa riga separate da doppi pipe (||) o cominciate su nuove righe, ciascuna che inizia con un pipe (|).
|}	Fine della tabella

Aggiunta di una nuova riga

Per cominciare una nuova riga si va a capo e si usa il comando

|-

equivalente al comando HTML

<tr>

I parametri possono essere aggiunti così:

|- parametri

che equivale a:

<tr parametri>

Il tag si chiuderà automaticamente all'inizio di una nuova riga o alla chiusura della tabella.

Nota: per riportare un testo su più linee, si usa il comando HTML

<br>

Il risultato sarà il seguente:

Questa parte di testo è

stata formattata con il

tag <br>.

Aggiunta di una serie di celle sulla riga

Le celle vengono generate andando a capo e usando i comandi

|

e

||

ad esempio

|cella1
|cella2
|cella3

oppure così:

|cella1||cella2||cella3

perciò "||" è equivalente a "a capo" + "|"

Entrambi i metodi corrispondono (in HTML) a:

<td>cella1</td><td>cella2</td><td>cella3</td>

I parametri delle celle vengono inseriti così:

|parametri|cella1

che corrisponde a

<td parametri>

Intestazione in grassetto

Funziona allo stesso modo di <td>, tranne che "!" viene utilizzato al posto del "|" di apertura. "!!" può essere utilizzato invece di "||". Tuttavia, i parametri usano ancora "|"!

Esempio:

!parametro1|parametro2|cella1!!cella2

Titolo della tabella (caption)

Un titolo viene creato con il comando

|+ Descrizione

che genera

<caption>Descrizione</caption>

Possono anche essere usati parametri:

|+ parametri|Descrizione

genererà

<caption parametri>Descrizione</caption>

Parametri

Una tabella generica standardizzata dovrebbe impostare soltanto il parametro class="wikitable", che include tutte le caratteristiche grafiche definite dalla skin del sito (anche personalizzabili per ciascun utente dalle proprie preferenze).

In caso di particolari necessità per tutta la tabella o solo per determinate caselle, si possono impostare ulteriori proprietà di stile CSS aggiungendo il parametro style="...", ad esempio:

{| class="wikitable" style="width:60%; float:right;"

Notare che class e style vanno separati da uno spazio, mentre lo spazio tra le proprietà all'interno di style è facoltativo, come anche l'ultimo ";". Nel moderno HTML è deprecato l'uso di attributi diretti come width="60%", ad essi va preferito style, ma si incontrano ancora spesso.

Queste sono alcune proprietà di uso comune (per elenchi completi vedi ad esempio Proprietà CSS2 o CSS Reference):

• width (larghezza della tabella o della colonna, es. 60% o 300px; ma ricorda che la risoluzione video degli utenti varia di molto, e spesso è preferibile lasciare che la larghezza si regoli da sola)
• float (left o right per affiancare la tabella alla sx o alla dx del testo)
• text-align (allineamento del testo dentro le caselle, left right center o justify)
• font-size (dimensione del carattere, es. 90%)
• background-color (colore di sfondo tabella o casella)

Esempi

Esempio semplice

Se non si definisce alcun parametro, la tabella è trasparente.

{| 
| Cella 1, riga 1 
| Cella 2, riga 1 
|- 
| Cella 1, riga 2 
| Cella 2, riga 2 
|}

genera

Cella 1, riga 1	Cella 2, riga 1
Cella 1, riga 2	Cella 2, riga 2

Tabella standard

Notare anche la presenza di intestazioni realizzate con "!"

{| class="wikitable"
! Colonna 1 !! Colonna 2
|-
| Riga 1 cella 1 || Riga 1 cella 2
|-
| Riga 2 cella 1 || Riga 2 cella 2
|}

Colonna 1	Colonna 2
Riga 1 cella 1	Riga 1 cella 2
Riga 2 cella 1	Riga 2 cella 2

Esempi avanzati

Nei seguenti esempi usiamo rowspan e colspan per creare caselle estese su più righe/colonne. Utilizziamo anche lo stile "float:right" per ancorare la tabella a destra.

Cella 1, riga 1	Cella 2, riga 1 (e 2)	Cella 3, riga 1
Cella 1, riga 2		Cella 3, riga 2

{| class="wikitable" style="float:right"
| Cella 1, riga 1 
| rowspan="2" | Cella 2, riga 1 (e 2) 
| Cella 3, riga 1 
|- 
| Cella 1, riga 2 
| Cella 3, riga 2 
|}

Cella 1 (e 2), riga 1		Cella 3, riga 1
Cella 1, riga 2	Cella 2, riga 2	Cella 3, riga 2

{| class="wikitable" style="float:right"
| colspan="2" | Cella 1 (e 2), riga 1 
| Cella 3, riga 1 
|-  
| Cella 1, riga 2  
| Cella 2, riga 2 
| Cella 3, riga 2 
|}

Cella 1, riga 1	Cella 2 (e 3), riga 1 (e 2)		Cella 4, riga 1
Cella 1, riga 2			Cella 4, riga 2
Cella 1, riga 3	Cella 2, riga 3	Cella 3, riga 3	Cella 4, riga 3

{| class="wikitable" style="float:right"
| Cella 1, riga 1 
| colspan="2" rowspan="2" | Cella 2 (e 3), riga 1 (e 2) 
| Cella 4, riga 1 
|- 
| Cella 1, riga 2 
| Cella 4, riga 2 
|- 
| Cella 1, riga 3 
| Cella 2, riga 3
| Cella 3, riga 3
| Cella 4, riga 3 
|}

Tabelle annidate

{| class="wikitable"
| tabella madre
|
{| style="background-color:#ABCDEF; color: inherit" border="2"
|tabella
|-
|annidata
|}
|ancora la tabella madre
|}

Questo codice fa apparire una seconda tabella annidata nella prima. Notare che è necessaria un'andata a capo tra il | della cella e il {| di inizio della tabella annidata.

tabella madre

tabella annidata

ancora la tabella madre

Liste innestate in una cella

{| class="wikitable"
| tabella madre
|
* Primo elemento della lista
* Secondo elemento della lista
|ancora la tabella madre
|}

Questo codice fa apparire una lista innestata nella seconda cella. Notare che è necessaria un'andata a capo tra il | della cella e l'inizio della lista.

tabella madre

Primo elemento della lista Secondo elemento della lista

ancora la tabella madre

Descrizione e righe con più celle

Questo è il titolo.

Indipendenza	19 agosto]] 1919
Moneta	Afghani
Fuso orario	UTC+4:30
Inno nazionale	Sououd-e-Melli
TLD:	.AF

{| class="wikitable" style="float:right"
|+ Questo è il titolo.
|[[Indipendenza]]||19 agosto 1919
|-
|[[Moneta]]||Afghano
|-
|[[Fuso orario]]||UTC+4:30
|-
|[[Inno nazionale]]||Sououd-e-Melli
|-
|TLD:||.AF
|}

Prova di colore su una riga

{|
| cella 1 || cella 2
|- style="background-color:#abcdef; color: inherit"
| cella 3 || cella 4
|}

disegna

cella 1	cella 2
cella 3	cella 4

Test di righe con intestazione e testo

{| class="wikitable"
! 
! Header colonna 1 
! header colonna 2 
|-
! header riga 1
| abcde
| fghil
|-
! header riga 2
| mnopq
| rstuv
|}

appare come:

	Header colonna 1	header colonna 2
header riga 1	abcde	fghil
header riga 2	mnopq	rstuv

ma:

{| class="wikitable"
!   !! col Header1 !! ch2 
|-
! header riga 3 || abc def ghi ||   gchf ghh dfgh
|-
! header riga 4         || gfbb gbgbds ||    dfgsdsdg
|-
! header riga 5         ||             ||    
|}

appare come:

	col Header1	ch2
header riga 3	abc def ghi	gchf ghh dfgh
header riga 4	gfbb gbgbds	dfgsdsdg
header riga 5

Tabella al centro della pagina

Per centrare una tabella nella pagina occorre impostare margini laterali con valore "auto".
Attenzione: non usare <center> o <div align="center"> (sono deprecati).

{| class="wikitable" style="margin-left: auto; margin-right: auto;"
! Colonna 1 !! Colonna 2
|-
| Riga 1 cella 1 || Riga 1 cella 2
|-
| Riga 2 cella 1 || Riga 2 cella 2
|}

Colonna 1	Colonna 2
Riga 1 cella 1	Riga 1 cella 2
Riga 2 cella 1	Riga 2 cella 2

Tabelle ordinabili

Aggiungendo in testa alla tabella l'istruzione class="wikitable sortable" si otterrà una tabella le cui colonne sono ordinabili in senso crescente o decrescente cliccando sui pulsanti che vi appariranno.

{| class="wikitable sortable"
! titolo !! colonna1 !! colonna2 
|-
| riga1 || Firenze || 4
|-
| riga2 || Empoli || 4
|-
| riga3 || Domodossola || 1  
|-
| riga4 || Como || 3  
|-
| riga5 || Bologna || 2  
|-
| riga6 || Ancona || 5  
|}

titolo	colonna1	colonna2
riga1	Firenze	4
riga2	Empoli	4
riga3	Domodossola	1
riga4	Como	3
riga5	Bologna	2
riga6	Ancona	5

Se si cliccano due o più colonne, l'ultima cliccata viene impostata come chiave di ordinamento primaria, e le precedenti come secondarie. Nell'esempio, cliccando colonna1 e poi colonna2, si ottiene un ordinamento per colonna2, ma le righe dove questa è costante (le due righe con valore "4") restano ordinate per colonna1.
Se invece si tiene premuto ⇧ Shift mentre si clicca, la colonna cliccata viene impostata come chiave di ordinamento secondaria, mantenendo l'ordinamento primario precedente.

L'ordinamento viene eseguito mediante JavaScript lato client, pertanto funziona solo se il lettore usa un browser con JavaScript abilitato.

Colonne non ordinabili

Se si desidera che una o più colonne della tabella non siano ordinabili bisogna aggiungere class="unsortable" | titolo della colonna nella riga dove si scrivono i titoli.

{| class="wikitable sortable"
! titolo !! colonna1 !! colonna2 !! class="unsortable" | senza ordine
|-
| riga1 || Como || 2 || colonna
|-
| riga2 || Bologna || 1 || non 
|-
| riga3 || Ancona || 3 || ordinabile
|}

titolo	colonna1	colonna2	senza ordine
riga1	Como	2	colonna
riga2	Bologna	1	non
riga3	Ancona	3	ordinabile

È possibile rendere anche una riga non ordinabile, ad esempio un'ultima riga contenente i totali, che deve rimanere ferma; basta che la riga sia impostata come riga di intestazione (con "!") oppure abbia il parametro class="sortbottom".

Tipi di dati

Il sistema di ordinamento riconosce automaticamente il tipo di dati di ogni colonna, e applica una logica di ordinamento diversa, in base al contenuto della prima casella non vuota dopo l'intestazione. Markup e spazi iniziali vengono ignorati. I tipi individuati in automatico sono:

• date: possono essere in vari formati come "gg-mm-aaaa", "gg-mm-aa", e "gg mese aaaa", oppure con altri separatori come "/" e "." (sconsigliati, vedi qui). Non funziona però il simbolo "1º" per il primo del mese, va impostato "1" (vedi capitolo successivo). Non funzionano inoltre le date precedenti al 100 d.C.
• valute: riconosciute se iniziano per €, $, £, o ¥; l'ordine è numerico, ignorando i suddetti simboli e altri caratteri alfabetici.
• numeri: possono essere formati da cifre, virgole, separatori di migliaia, +/- ed E/e (per la notazione scientifica). Per ottenere il corretto separatore delle migliaia, che su it.wiki è uno spazio speciale, usare formatnum.
• testo: in tutti gli altri casi l'ordine è semplicemente alfabetico, come indicato in Aiuto:Ordine alfabetico; le lettere vengono considerate tutte come minuscole.

Numero	Testo	Data	Valuta
1 345	EEE	02-02-2004	€ 5,00
22	ddd	13.apr.2005	€ 30
-3	CCC	17 agosto 2006	€ 6,50
0,44	bbb	1/Gen/2005	€ 14,20
0,44E+8	AAA	05/12/2006	€ 7,15

Se il riconoscimento automatico non bastasse, il tipo di dato di ogni colonna si può anche indicare esplicitamente. All'intestazione della colonna si può aggiungere il parametro data-sort-type="..." con uno dei seguenti valori:

• text (testo)
• number (numeri)
• date (date)
• time (orari, con ":" come separatore tra ore minuti e secondi opzionali)
• isoDate (date in formato ISO, ovvero aaaa-mm-gg)
• currency (valute)
• IPAddress (indirizzi IP)
• url (indirizzi URL)

Ad esempio:

{| class="wikitable sortable"
! data-sort-type="date" | Data
! data-sort-type="time" | Ora
...

Come impostare manualmente l'ordine

Laddove necessario, si può impostare manualmente l'ordine voluto (ciò è particolarmente utile con le colonne che contengono nomi e cognomi di persone, che verrebbero ordinate seguendo l'ordine alfabetico dei nomi e non dei cognomi). Per impostare una chiave di ordinamento diversa dal contenuto visibile, a ciascuna casella si può aggiungere il parametro data-sort-value="..." in questo modo:

{| class="wikitable sortable"
! Nome
|-
| data-sort-value="Rossi Mario" | Mario Rossi
|-
| data-sort-value="Bianchi Lucia" | Lucia Bianchi
|-
| data-sort-value="Verdi Anna" | Anna Verdi
|}

Nome
Mario Rossi
Lucia Bianchi
Anna Verdi

Un altro metodo, sconsigliato ma ancora molto usato perché in passato era l'unico, è inserire del testo invisibile direttamente nella casella, in questo modo:

| <span style="display:none">Rossi Mario</span> Mario Rossi

Esistono anche vari template appositi, vedi Template:Sort e i template ad esso correlati, la cui funzione è quella di ordinare le colonne ordinabili in questo modo, senza utilizzare direttamente l'HTML.

Pagine correlate

• Aiuto:Colori

Altri progetti

• (EN) pagina di MediaWiki sulla sintassi delle tabelle.
• (EN) pagina di Meta sulla sintassi delle tabelle.

Mi sembra di aver capito, ma...

Se non riesci ad afferrare qualche concetto o non capisci il perché di tale procedura, ci metti cinque secondi a chiederlo e avere risposta. Se pensi invece di avere una proposta, piccola o grande che sia, siamo tutti pronti ad ascoltarti.

---

L'elenco di tutte le pagine riguardanti Wikivoyage si trova nella pagina Aiuto:Aiuto.