Aiuto:Tabelle
In questa pagina viene spiegata la sintassi per inserire una tabella in Wikipedia, usando il markup wiki.
Esistono alcuni strumenti per generare automaticamente delle tabelle. Per una guida completa sulle tabelle (in inglese), vedi m:Help:Table.
Notare che i template sinottici e i template di navigazione sono casi particolari di tabelle con proprie classi e metodi di creazione, per i quali si rimanda alle relative pagine.
Nel seguito viene mostrato in dettaglio come costruire una tabella.
Sommario
[modifica | modifica wikitesto]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 (di colore grigio più scuro). 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 |
Comandi di base
[modifica | modifica wikitesto]Per rendere più semplice la spiegazione della sintassi, consideriamo la seguente tabella di esempio:
| Riga 1, cella 1 | Riga 1, cella 2 | Riga 1, cella 3 |
| Riga 2, cella 1 | Riga 2, cella 2 | Riga 2, cella 3 |
e vediamo passo per passo come costruirla.
Creare una tabella standard
[modifica | modifica wikitesto]Per prima cosa, si definisce la tabella usando {| e |} per indicarne l'inizio e la fine. Questi simboli devono stare su linee separate:
{|
|}
Tutto il codice che descrive l'aspetto della tabella (per esempio il numero di righe e colonne) deve essere inserito nelle linee comprese tra i precedenti simboli. Nella maggior parte dei casi, per dare alla tabella un aspetto grafico standard, si aggiunge il seguente testo:
{| class="wikitable"
|}
Per una spiegazione dettagliata del suo significato si rimanda alla sezione Attributi.
Aggiunta di nuove righe
[modifica | modifica wikitesto]Per cominciare una nuova riga, si scrive |- all'inizio di una nuova linea. Per aggiungere una cella nella riga appena definita, si scrive |, sempre in una nuova linea, seguito dal testo che si vuol inserire in tale cella:
{|
|-
| Riga 1, cella 1
|-
| Riga 2, cella 1
|}
Poiché |- è facoltativo per la prima riga, il codice soprastante può essere riscritto così:
{|
| Riga 1, cella 1
|-
| Riga 2, cella 1
|}
Aggiunta di più celle sulla stessa riga
[modifica | modifica wikitesto]Ci sono due modi per aggiungere più celle nella stessa riga: per ciascuna cella da aggiungere alla riga, si scrive || sulla stessa linea in cui si trova la cella precedente, seguito dal testo che deve apparire nella nuova cella, oppure si inizia una nuova linea con |, sempre seguito dal testo da inserire nella cella:
{|
| Riga 1, cella 1 || Riga 1, cella 2 || Riga 1, cella 3
|-
| Riga 2, cella 1
| Riga 2, cella 2
| Riga 2, cella 3
|}
In altre parole, ciascuna cella è definita andando a capo e scrivendo |, oppure rimanendo sulla stessa linea in cui si trova la cella precedente e scrivendo ||. Gli spazi prima e dopo le barre verticali | sono ignorati e possono perciò essere omessi, ma se usati rendono più comprensibile il codice e ne facilitano la modifica.
Aggiunta di celle d'intestazione
[modifica | modifica wikitesto]Supponiamo di voler trasformare le tre celle della prima riga della tabella in celle d'intestazione: per farlo, è sufficiente sostituire le barre verticali | con altrettanti punti esclamativi !. La sintassi è identica: la prima cella d'intestazione si definisce iniziando una nuova linea con un ! seguito dal testo che si vuole inserire in tale cella, mentre le celle d'intestazione successive (che stanno cioè sulla stessa riga) si ottengono scrivendo due !! sulla stessa linea, oppure un solo ! su linee nuove. Pertanto, sia
{|
! Intestazione 1 !! Intestazione 2 !! Intestazione 3
|-
| Riga 2, cella 1 || Riga 2, cella 2 || Riga 2, cella 3
|}
sia
{|
! Intestazione 1
! Intestazione 2
! Intestazione 3
|-
| Riga 2, cella 1 || Riga 2, cella 2 || Riga 2, cella 3
|}
producono lo stesso risultato, ovvero
| Intestazione 1 | Intestazione 2 | Intestazione 3 |
|---|---|---|
| Riga 2, cella 1 | Riga 2, cella 2 | Riga 2, cella 3 |
Si possono aggiungere celle d'intestazione anche all'inizio di ciascuna riga; per esempio, il codice
{| class="wikitable"
! !! Intestazione colonna 2 !! Intestazione colonna 3
|-
! Intestazione riga 2
| Riga 2, cella 2 || Riga 2, cella 3
|-
! Intestazione riga 3
| Riga 3, cella 2 || Riga 3, cella 3
|}
genera
| Intestazione colonna 2 | Intestazione colonna 3 | |
|---|---|---|
| Intestazione riga 2 | Riga 2, cella 2 | Riga 2, cella 3 |
| Intestazione riga 3 | Riga 3, cella 2 | Riga 3, cella 3 |
Attenzione però: se si scrive
{| class="wikitable"
! !! Intestazione colonna 2 !! Intestazione colonna 3
|-
! Intestazione riga 2 || Riga 2, cella 2 || Riga 2, cella 3
|-
! Intestazione riga 3 || Riga 3, cella 2 || Riga 3, cella 3
|}
mischiando cioè sulla stessa linea ! e |, come risultato si ottiene
| Intestazione colonna 2 | Intestazione colonna 3 | |
|---|---|---|
| Intestazione riga 2 | Riga 2, cella 2 | Riga 2, cella 3 |
| Intestazione riga 3 | Riga 3, cella 2 | Riga 3, cella 3 |
che non corrisponde a ciò che si vuole.
Aggiunta di un titolo
[modifica | modifica wikitesto]Per aggiungere un titolo alla tabella, si deve scrivere |+ seguito dal titolo che si vuol dare, ricordando di inserire |+ immediatamente sotto {|:
{| class="wikitable"
|+ Titolo della tabella
! Intestazione 1 !! Intestazione 2 !! Intestazione 3
|-
| Riga 2, cella 1 || Riga 2, cella 2 || Riga 2, cella 3
|}
Il risultato è il seguente:
| Intestazione 1 | Intestazione 2 | Intestazione 3 |
|---|---|---|
| Riga 2, cella 1 | Riga 2, cella 2 | Riga 2, cella 3 |
Inserire wikitesto in una cella
[modifica | modifica wikitesto]All'interno delle tabelle è possibile formattare il testo usando la normale sintassi di Wikipedia, scrivendo per esempio parole in corsivo o aggiungendo wikilink. Per andare a capo all'interno di una cella, è possibile usare il tag <br />:
{| class="wikitable"
| Una cella con un [[Aiuto:Wikilink|wikilink]]. || Una parola in ''corsivo'' nella cella.
|-
| Una cella con<br />del testo scritto<br />su più linee.
| Una cella con un [[Aiuto:Wikilink|wikilink]],<br />una parola in ''corsivo'' e<br />il testo scritto su più linee.
|}
| Una cella con un wikilink. | Una parola in corsivo nella cella. |
| Una cella con del testo scritto su più linee. |
Una cella con un wikilink, una parola in corsivo e il testo scritto su più linee. |
Se in una cella si devono inserire elementi la cui sintassi prevede che comincino all'inizio di una nuova riga, come per esempio gli elenchi puntati e numerati o le tabelle (è infatti possibile inserire una tabella all'interno di un'altra tabella), per visualizzarli correttamente è necessario andare a capo dopo il |:
{| class="wikitable"
| Una cella con
* un elenco
* puntato
al suo interno.
| * Questo asterisco non viene interpretato come elenco puntato perché non inizia su una nuova linea.
# Invece questi cancelletti sono interpretati come elenco numerato
# perché si trovano all'inizio della linea.
|-
|
{| class="wikitable"
| Tabella || nidificata
|-
| dentro || l'altra.
|}
Qui siamo fuori dalla tabella interna<br />e dentro la cella della tabella esterna.
|
* Un elenco
*# puntato misto
*# a un elenco
* numerato.
|}
Una cella con
al suo interno. |
* Questo asterisco non viene interpretato come elenco puntato perché non inizia su una nuova linea.
| ||||
Qui siamo fuori dalla tabella interna |
|
Uso di ! e |
[modifica | modifica wikitesto]Quando si scrive il testo contenuto in una tabella, bisogna fare attenzione ai caratteri ! e |, perché è probabile che vengano interpretati erroneamente come elementi di markup. Per esempio, scrivendo
{| class="wikitable"
| Il simbolo "|" è una barra verticale || Qualcosa non va...
|}
il risultato è
| " è una barra verticale | Qualcosa non va... |
Il motivo di questo comportamento "strano" è che la barra tra virgolette è stata interpretata dal software come separatore tra gli attributi della cella (il testo a sinistra della barra, Il simbolo ") e il contenuto della cella (il testo a destra della barra, " è una barra verticale).
Esistono metodi differenti per risolvere questo genere di problemi. Il primo consiste nell'utilizzo dei tag <nowiki>Testo</nowiki>: il testo racchiuso fra essi non viene interpretato dal software, il che è perfetto per l'esempio precedente:
{| class="wikitable"
| Il simbolo "<nowiki>|</nowiki>" è una barra verticale || Ok
|}
Adesso il risultato è corretto:
| Il simbolo "|" è una barra verticale | Ok |
In alternativa, al posto della barra verticale è possibile utilizzare l'entità HTML |, mentre il comando {{!}} in questo caso non funziona.
Fortunatamente, questo problema non si presenta con i piped wikilink, che pertanto possono essere usati normalmente (sarebbe anzi controproducente ricorrere ai metodi sopra esposti).
Problemi simili si verificano invece quando si devono scrivere due punti esclamativi di seguito in una cella d'intestazione, ma i metodi per risolverli sono gli stessi: racchiudere i punti esclamativi tra i tag <nowiki>, oppure sostituirli con l'entità !:
{| class="wikitable"
|+ [[Fattoriale]] vs semifattoriale
! ''n'' !! ''n''! !! ''n''!!
|-
| 5 || 120 || 15
|}
| n | n! | n!! |
|---|---|---|
| 5 | 120 | 15 |
Attributi
[modifica | modifica wikitesto]Ogni elemento usato per la costruzione delle tabelle ({|, |+, |-, !, !!, | e ||), eccetto |}, può accettare eventuali attributi HTML che ne modificano l'aspetto: per esempio, è possibile cambiare il colore di sfondo di una singola cella o di una riga intera. Gli attributi HTML sono stringhe di testo della forma attributo="valore", dove attributo e valore devono essere sostituiti con nomi validi e riconosciuti. L'uso degli attributi HTML è già stato mostrato negli esempi precedenti, nei quali si è assegnato all'elemento {| l'attributo class="wikitable", che dà alla tabella un aspetto grafico standard. Infatti, se si omettesse tale attributo, scrivendo cioè
{|
|+ Titolo della tabella
! Intestazione 1 !! Intestazione 2 !! Intestazione 3
|-
| Riga 2, cella 1 || Riga 2, cella 2 || Riga 2, cella 3
|}
il risultato sarebbe questo:
| Intestazione 1 | Intestazione 2 | Intestazione 3 |
|---|---|---|
| Riga 2, cella 1 | Riga 2, cella 2 | Riga 2, cella 3 |
Si può notare come adesso la tabella sia trasparente e senza bordi.
Assegnare un attributo a un elemento
[modifica | modifica wikitesto]Nel caso di {| e |-, un attributo si aggiunge semplicemente scrivendolo alla destra di tali simboli:
{| attributo="valore"
|- attributo="valore"
Con |+, !, !!, | e ||, invece, è necessario separare gli attributi dal testo della cella aggiungendo un ulteriore |:
|+ attributo="valore" | Titolo della tabella ! attributo="valore" | Cella d'intestazione !! attributo="valore" | Cella d'intestazione | attributo="valore" | Testo della cella || attributo="valore" | Testo della cella
A ciascun elemento è possibile assegnare anche più attributi separandoli con uno spazio:
| attributo1="valore1" attributo2="valore2" | Testo della cella
L'attributo più utilizzato è style, la cui sintassi è leggermente diversa da quella mostrata finora: style="proprietà:valore;", dove proprietà e valore devono essere sostituiti con nomi validi e riconosciuti. Per esempio, una proprietà spesso usata è color, che serve a impostare il colore del testo, e un valore adeguato potrebbe essere red; pertanto, se a una cella viene assegnato l'attributo style="color:red;", il testo all'interno di tale cella sarà di colore rosso. Si possono usare anche più proprietà contemporaneamente scrivendo style="prop1:valore1; prop2:valore2;" e così via. Per esempio, se oltre a un testo rosso vogliamo anche uno sfondo giallo, scriveremo style="color:red; background-color:yellow;".
Negli esempi seguenti vengono illustrate le proprietà di uso più comune nella costruzione delle tabelle; per elenchi completi si veda Proprietà CSS2 o CSS Reference.
Cambiare il colore del testo e dello sfondo di una cella
[modifica | modifica wikitesto]Per cambiare il colore del testo si usa l'attributo style="color:colore;", mentre con style="background-color:colore;" si imposta il colore dello sfondo. Sono numerosi i valori che può assumere colore: si veda la pagina d'aiuto sui colori.
Esempio:
{| class="wikitable"
|+ style="color:red;" | Titolo
! style="color:green;" | Header 1 !! style="color:blue;" | Header 2 !! Header 3
|-
| Cella 1 || style="background-color:yellow;" | Cella 2 || Cella 3
|-
| Cella 4
| Cella 5
| style="color:orange; background-color:black;" | Cella 6
|- style="background-color:cyan;"
| style="color:white;" | Cella 7 || Cella 8 || Cella 9
|}
Il risultato è:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cella 1 | Cella 2 | Cella 3 |
| Cella 4 | Cella 5 | Cella 6 |
| Cella 7 | Cella 8 | Cella 9 |
Celle estese su più righe e/o colonne
[modifica | modifica wikitesto]Assegnando a una cella (ossia agli elementi |, ||, ! e !!) gli attributi rowspan="n" e/o colspan="n", essa occuperà un numero di righe e/o colonne pari a n (n va sostituito con un numero intero: 2, 3, ...). Poiché in una tabella il numero di colonne deve essere lo stesso su tutte le righe, quando si usano questi attributi alcune celle non devono essere definite, come mostrano gli esempi seguenti:
{| class="wikitable"
! Riga 1, cella 1 !! Riga 1, cella 2 !! Riga 1, cella 3
|-
| colspan="2" | Riga 2, celle 1 e 2 || Riga 2, cella 3
|-
| Riga 3, cella 1 || colspan="2" | Riga 3, celle 2 e 3
|-
| colspan="3" | Riga 4, celle 1, 2 e 3
|}
Questa tabella ha tre colonne, ma nella seconda e nella terza riga sono state definite solo due celle poiché una di esse occupa il posto di due colonne, mentre nella quarta riga è stata definita una sola cella poiché essa occupa da sola il posto di tre colonne:
| Riga 1, cella 1 | Riga 1, cella 2 | Riga 1, cella 3 |
|---|---|---|
| Riga 2, celle 1 e 2 | Riga 2, cella 3 | |
| Riga 3, cella 1 | Riga 3, celle 2 e 3 | |
| Riga 4, celle 1, 2 e 3 | ||
{| class="wikitable"
! Riga 1, cella 1 !! Riga 1, cella 2
|-
| rowspan="2" | Righe 2 e 3, cella 1 || Riga 2, cella 2
|-
| Riga 3, cella 2
|}
Questa tabella ha due colonne, ma nella terza riga è stata definita solo una cella poiché il posto dell'altra è già occupato dalla cella superiore:
| Riga 1, cella 1 | Riga 1, cella 2 |
|---|---|
| Righe 2 e 3, cella 1 | Riga 2, cella 2 |
| Riga 3, cella 2 |
{| class="wikitable"
! Riga 1, cella 1 !! Riga 1, cella 2
|-
| rowspan="2" | Righe 2 e 3, cella 1 || Riga 2, cella 2
|-
| Riga 3, cella 2
|}
Esempi:
|
|
|
|
{| class="wikitable"
! 1A !! 2A !! 3A
|-
| 1B
| 2B
| 3B
|-
| 1C
| 2C
| 3C
|}
{| class="wikitable"
! 1A !! 2A !! 3A
|-
| rowspan="2" | 1B + 1C
| 2B
| 3B
|-
| 2C
| 3C
|}
{| class="wikitable"
! 1A !! 2A !! 3A
|-
| 1B
| rowspan="2" | 2B + 2C
| 3B
|-
| 1C
| 3C
|}
{| class="wikitable"
! 1A !! 2A !! 3A
|-
| 1B
| 2B
| rowspan="2" | 3B + 3C
|-
| 1C
| 2C
|}
Gli attributi rowspan e colspan possono anche essere usati contemporaneamente sulla stessa cella:
{| class="wikitable"
! !! Riga 1, cella 2 !! Riga 1, cella 3 !! Riga 1, cella 4
|-
! Riga 2, cella 1
| colspan="2" rowspan="3" | Righe 2, 3 e 4, celle 2 e 3 || Riga 2, cella 4
|-
! Riga 3, cella 1
| Riga 3, cella 4
|-
! Riga 4, cella 1
| Riga 4, cella 4
|}
Il risultato è:
| Riga 1, cella 2 | Riga 1, cella 3 | Riga 1, cella 4 | |
|---|---|---|---|
| Riga 2, cella 1 | Righe 2, 3 e 4, celle 2 e 3 | Riga 2, cella 4 | |
| Riga 3, cella 1 | Riga 3, cella 4 | ||
| Riga 4, cella 1 | Riga 4, cella 4 | ||
Allineare il testo in una tabella
[modifica | modifica wikitesto]Per impostazione predefinita, il titolo della tabella e il testo delle celle d'intestazione sono allineati al centro, mentre quello delle celle normali è allineato a sinistra. Per allineare diversamente il testo di una cella, si deve assegnare ad essa l'attributo style="text-align:pos;", dove pos va sostituito con left, center, right o justify per posizionare il testo rispettivamente a sinistra, al centro, a destra della cella, o per giustificarlo.
Esempio:
{| class="wikitable" style="width:100%;"
|+ style="text-align:left;" | Titolo a sinistra
! style="text-align:left;" | Testo a sinistra !! Testo al centro (default) !! style="text-align:right;" | Testo a destra
|-
| Testo a sinistra (default) || style="text-align:center;" | Testo al centro || style="text-align:right;" | Testo a destra
|}
Il risultato è (nota: alla tabella di questo esempio è stato assegnato l'attributo style="width:100%;" per farle occupare tutta la larghezza disponibile, al solo scopo di rendere più evidente l'allineamento del testo):
| Testo a sinistra | Testo al centro (default) | Testo a destra |
|---|---|---|
| Testo a sinistra (default) | Testo al centro | Testo a destra |
Il testo in una cella è anche centrato verticalmente; se si vuole che il testo parta dall'alto, si deve aggiungere l'attributo style="vertical-align:top;":
{| class="wikitable"
| Una cella con<br />del testo scritto<br />su molte linee.
| Cella con poco testo.
| style="vertical-align:top;" | Cella con poco testo.
|}
| Una cella con del testo scritto su molte linee. |
Cella con poco testo. | Cella con poco testo. |
Si consideri una tabella in cui alcune celle contengono molto testo e le altre solo poche parole: le celle più estese occupano la maggior parte dello spazio, lasciandone poco per le altre; di conseguenza, il testo in tali celle tende ad andare a capo, il che a volte è un effetto indesiderato (se nell'esempio seguente non lo si vede bene, è sufficiente diminuire la larghezza della finestra del browser):
{| class="wikitable"
| Cella con poco testo.
| Cella con poco testo.
| Cella con molto testo: ''[[lorem ipsum]] dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur''.
|-
| Cella con un pochino più di testo.
| Cella con un pochino più di testo.
| Cella con molto testo: ''lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur''.
|}
| Cella con poco testo. | Cella con poco testo. | Cella con molto testo: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. |
| Cella con un pochino più di testo. | Cella con un pochino più di testo. | Cella con molto testo: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. |
Se si vuole evitare che in una cella il testo vada a capo, si deve aggiungere l'attributo style="white-space:nowrap;"; se tale attributo viene assegnato alla cella più estesa di una colonna, l'effetto si estende a tutte le celle di tale colonna. Nel seguente esempio si può notare che nella prima colonna il testo non va a capo in nessuna cella perché l'attributo è stato assegnato alla cella contenente più testo, mentre nella seconda colonna il testo nella cella in basso continua ad andare a capo (di nuovo, può essere utile osservare il comportamento del testo al variare della larghezza della finestra del browser):
{| class="wikitable"
| Cella con poco testo.
| style="white-space: nowrap;" | Cella con poco testo.
| Cella con molto testo: ''lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur''.
|-
| style="white-space:nowrap;" | Cella con un pochino più di testo.
| Cella con un pochino più di testo.
| Cella con molto testo: ''lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur''.
|}
| Cella con poco testo. | Cella con poco testo. | Cella con molto testo: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. |
| Cella con un pochino più di testo. | Cella con un pochino più di testo. | Cella con molto testo: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. |
Regolare lo scorrimento del testo intorno a una tabella
[modifica | modifica wikitesto]Normalmente, il testo esterno a una tabella (i normali paragrafi della voce) si dispone sopra e sotto di essa (la linea vuota prima e dopo la tabella non è necessaria, ma rende il codice più chiaro):
Testo sopra la tabella.
{| class="wikitable"
| Cella 1 || Cella 2
|-
| Cella 3 || Cella 4
|}
Testo sotto la tabella.
Testo sopra la tabella.
| Cella 1 | Cella 2 |
| Cella 3 | Cella 4 |
Testo sotto la tabella.
Si può però fare in modo che il testo esterno si disponga a fianco della tabella, come si fa tipicamente con le immagini (opportuno solo in casi particolari e con tabelle piccole).
Per farlo si assegna a {| l'attributo class="wikitable floatleft" o class="wikitable floatright". Nel primo caso, la tabella si dispone a sinistra della pagina e il testo alla sua destra; viceversa, nel secondo caso la tabella si dispone a destra e il testo a sinistra. Il testo che si affianca è quello che nel wikitesto si trova sotto la tabella (cioè dopo |}); il testo che precede la tabella (cioè {|) rimane sopra di essa. Una volta superata la tabella, il testo riprenderà di nuovo ad occupare tutta la larghezza della pagina.
Esempio:
Testo che precede la tabella (appare sopra di essa).
{| class="wikitable floatright"
| Cella 1 || Cella 2 || Cella
|-
| Cella 3 || Cella 4 || Cella
|}
Il testo scritto da qui in poi appare affiancato alla tabella. Per vedere l'effetto è necessario scrivere una frase lunga per occupare qualche linea: ''[[lorem ipsum]] dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum''. Tutto il testo precedente appare sopra la seguente tabella:
{| class="wikitable floatleft"
| Cella 1 || Cella 2 || Cella
|-
| Cella 3 || Cella 4 || Cella
|}
mentre il testo scritto da qui in poi appare affiancato alla tabella. Per vedere l'effetto è necessario scrivere una frase lunga per occupare qualche linea: ''lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum''.
Il risultato è il seguente (nota: può essere utile ridimensionare la larghezza della finestra del browser; inoltre il risultato è stato indentato solo per maggior chiarezza):
- Testo che precede la tabella (appare sopra di essa).
| Cella 1 | Cella 2 | Cella |
| Cella 3 | Cella 4 | Cella |
- Il testo scritto da qui in poi appare affiancato alla tabella. Per vedere l'effetto è necessario scrivere una frase lunga per occupare qualche linea: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tutto il testo precedente appare sopra la seguente tabella:
Cella 1 Cella 2 Cella Cella 3 Cella 4 Cella
- mentre il testo scritto da qui in poi appare affiancato alla tabella. Per vedere l'effetto è necessario scrivere una frase lunga per occupare qualche linea: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Un modo alternativo per posizionare una tabella è assegnare a {| l'attributo style="float:left/right;" (selezionando left o right). Il problema è che con questo attributo non viene lasciato un margine adeguato tra il testo e la tabella.
Le tabelle si possono posizionare anche al centro della pagina, con l'attributo style="margin-left:auto; margin-right:auto;", ma in questo caso non è possibile far scorrere il testo a sinistra e a destra della tabella. Generalmente comunque è preferibile lasciare le tabelle allineate a sinistra come da default.
Tabelle ordinabili
[modifica | modifica wikitesto]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 ⇧ Maiusc 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 | modifica wikitesto]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 |
Righe non ordinabili
[modifica | modifica wikitesto]È possibile rendere una riga non ordinabile, ad esempio un'ultima riga contenente i totali, che deve rimanere ferma. Sono sempre immobili tutte le righe impostate come riga di intestazione (con "!") e poste per prime o per ultime. In alternativa una riga, anche non di intestazione, viene mantenuta in fondo se ha l'attributo class="sortbottom" (se la riga non è in fondo, vi andrà non appena l'utente ordina la tabella).
Due righe consecutive possono essere forzate a rimanere vicine durante gli ordinamenti assegnando alla seconda l'attributo class="expand-child". In tal modo la prima riga verrà ordinata normalmente e la seconda la seguirà.
{| class="wikitable sortable"
! titolo 1
|-
! titolo 2
|-
| Bologna
|-
| Ancona
|- class="expand-child"
| seconda riga di Ancona
|-
| Como
|- class="sortbottom"
| piede 1
|-
! piede 2
|}
| titolo 1 |
|---|
| titolo 2 |
| Bologna |
| Ancona |
| seconda riga di Ancona |
| Como |
| piede 1 |
| piede 2 |
Tipi di dati
[modifica | modifica wikitesto]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 | modifica wikitesto]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 |
Raccomandazioni
[modifica | modifica wikitesto]| Nell'inserire immagini e tabelle, tieni conto sia della resa grafica (pensa ai tanti utenti che usano basse risoluzioni video), sia del peso complessivo della pagina (molti utenti hanno infatti sistemi non recentissimi e possono usare connessioni lente). Prova a vedere come appare la pagina anche a bassa risoluzione (ad esempio 800x600 o 1024x768) e non eccedere col peso delle immagini; non impostare le dimensioni delle immagini di tipo thumb se non è strettamente necessario: lascia che abbiano la larghezza di default scelta dall'utente. Verifica poi che la pagina non debba essere scorsa orizzontalmente o che parti di essa non si sovrappongano. Inoltre, assicurati che il contenuto sia sempre accessibile anche quando le immagini non possono essere visualizzate. |
|
Corrispondenza tra wikitesto e codice HTML
[modifica | modifica wikitesto]Per chi conosce il linguaggio HTML, può essere utile fare un confronto tra il wikitesto usato su Wikipedia per la creazione delle tabelle e il relativo codice HTML.
Una tabella è definita da
{| attributi
|}
che in HTML corrisponde a
<table attributi> </table>
Il titolo della tabella, più eventuali attributi, si ottiene con |+ attributi|Titolo che corrisponde a <caption attributi>Titolo</caption>.
Per definire una riga della tabella, insieme agli eventuali attributi, si usa |- attributi, equivalente a <tr attributi>. Il tag si chiude automaticamente all'inizio di una nuova riga o alla chiusura della tabella.
Le celle d'intestazione, compresi gli eventuali attributi, si ottengono scrivendo
! Header 1 ! attributi | Header 2 ! Header 3
oppure
! Header 1 !! attributi | Header 2 !! Header 3
Entrambi le forme equivalgono a
<th>Header 1</th> <th attributi>Header 2</th> <th>Header 3</th>
In modo simile, le celle di una riga, con gli eventuali attributi, si definiscono tramite i comandi
| Cella 1 | attributi | Cella 2 | Cella 3
o equivalentemente così:
| Cella 1 || attributi | Cella 2 || Cella 3
Entrambi i casi corrispondono in HTML a
<td>Cella 1</td> <td attributi>Cella 2</td> <td>Cella 3</td>
Di seguito si riporta un esempio riassuntivo:
{| class="wikitable"
|+ style="color:red;" | Titolo
! Header 1 !! Header 2 !! style="color:green;" | Header 3
|-
| Cella 1 || style="color:blue;" | Cella 2 || Cella 3
|- style="background-color:yellow;"
| style="color:orange;" | Cella 4
| Cella 5
| Cella 6
|}
Il risultato è:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cella 1 | Cella 2 | Cella 3 |
| Cella 4 | Cella 5 | Cella 6 |
e corrisponde in HTML a:
<table class="wikitable">
<caption style="color:red;">Titolo</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th style="color:green;">Header 3</th>
</tr>
<tr>
<td>Cella 1</td>
<td style="color:blue;">Cella 2</td>
<td>Cella 3</td>
</tr>
<tr style="background-color:yellow;">
<td style="color:orange;">Cella 4</td>
<td>Cella 5</td>
<td>Cella 6</td>
</tr>
</table>
Tecniche avanzate
[modifica | modifica wikitesto]Vedi Aiuto:Tabelle/Avanzate per utilizzi molto particolari: tabelle annidate, tabelle non rettangolari, grafici.