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
[modifica]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
[modifica]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
[modifica]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
[modifica]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)
[modifica]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
[modifica]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
[modifica]Esempio semplice
[modifica]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
[modifica]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
[modifica]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
[modifica]{| 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 |
|
ancora la tabella madre |
Liste innestate in una cella
[modifica]{| 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 |
|
ancora la tabella madre |
Descrizione e righe con più celle
[modifica]| 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 |}
{| | 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
[modifica]{| 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
[modifica]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
[modifica]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
[modifica]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
[modifica]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
[modifica]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
[modifica]Altri progetti
[modifica]- (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. |