Aiuto:Tabelle

Da Wikipedia, l'enciclopedia libera.
(Reindirizzamento da Aiuto:Come usare le tabelle)
Nuvola apps khelpcenter.pngSportello informazioni

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.

Nel seguito viene mostrato in dettaglio come costruire una tabella.

Sommario[modifica | modifica sorgente]

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 | modifica sorgente]

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 | modifica sorgente]

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 | modifica sorgente]

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 | modifica sorgente]

Un titolo viene creato con il comando

|+ Descrizione

che genera

<caption>Descrizione</caption>

Possono anche essere usati parametri:

|+ parametri|Descrizione

genererà

<caption parametri>Descrizione

Parametri[modifica | modifica sorgente]

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, vedi Aiuto:Stile utente).

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)

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.

Esempi[modifica | modifica sorgente]

Esempio semplice[modifica | modifica sorgente]

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 | modifica sorgente]

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 | modifica sorgente]

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 | modifica sorgente]

{| class="wikitable"
| tabella madre
|
{| style="background-color:#ABCDEF" 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[modifica | modifica sorgente]

{| 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[modifica | modifica sorgente]

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]]
|-
|[[Top-level domain|TLD]]||.AF
|}

Prova di colore su una riga[modifica | modifica sorgente]

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

disegna

cella 1 cella 2
cella 3 cella 4

Test di righe con intestazione e testo[modifica | modifica sorgente]

{| 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"
! &nbsp; !! 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 | modifica sorgente]

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 | modifica sorgente]

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 | modifica sorgente]

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 | modifica sorgente]

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 sorgente]

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.

Raccomandazioni[modifica | modifica sorgente]

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 si sovrappongano. Inoltre assicurati che il contenuto sia sempre accessibile anche in assenza di immagini.
Globo di lettere

Pagine correlate[modifica | modifica sorgente]

Altri progetti[modifica | modifica sorgente]