Aiuto:Tabelle

– Sportello 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.

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

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

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

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

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

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

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

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:

Titolo della tabella

Intestazione 1	Intestazione 2	Intestazione 3
Riga 2, cella 1	Riga 2, cella 2	Riga 2, cella 3

Inserire wikitesto in una cella

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 || innestata
|-
| 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 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.
Tabella innestata dentro l'altra. Qui siamo fuori dalla tabella interna e dentro la cella della tabella esterna.	Un elenco puntato misto a un elenco numerato.

Attributi

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:

Titolo della tabella

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

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

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 è:

Titolo

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

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

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

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):

Titolo a sinistra

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

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, assegnando ad essa (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.

Nota: un modo alternativo per posizionare una tabella è assegnare a {| l'attributo style="float:pos;", dove pos va sostituito con left o right. Il problema è che con questo attributo non viene lasciato un margine adeguato tra il testo e la tabella. Ripetendo l'esempio qui sopra, il risultato che si ottiene è questo:

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.

Tabella al centro della pagina

Per centrare una tabella nella pagina occorre assegnarle l'attributo style="margin-left:auto; margin-right:auto;". Con riferimento a quanto spiegato nella precedente sezione, notare che non è possibile far scorrere il testo a sinistra e a destra di una tabella centrata:

Testo prima della tabella (appare sopra di essa).

{| 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
|}

Testo dopo la tabella (appare sotto di essa).

Testo prima della tabella (appare sopra di essa).

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

Testo dopo la tabella (appare sotto di essa).

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 ⇧ 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

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

Venivano usati anche alcuni template appositi (vedi Template:Sort e i template ad esso correlati) oggi obsoleti, la cui funzione era quella di ordinare le colonne ordinabili incapsulando questa tecnica, senza utilizzare direttamente l'HTML.

Tabelle non rettangolari

	Parole in -occo		Parole in -accio
Con la A	Arrocco	Allocco	Addiaccio	Abbraccio
Con la B	Barocco	Blocco	Braccio	Brogliaccio
Con la C	Ciocco	Cocco	Carpaccio	Canovaccio
	Diplococco		Dispaccio

A volte può capitare di dover comporre una tabella in cui è necessario non figurino alcune caselle. Questo risultato essenzialmente si ottiene uniformando il colore dello sfondo delle cellette "da eliminare" a quello dello sfondo su cui giacciono (#FFFFFF o semplicemente "white" quello delle pagine, #F8F9FA quello interno delle tabelle, #FFEEEE quello delle pagine di aiuto), e cancellandone i bordi nello stesso o in altri modi. La tabella qui a fianco contiene un campionario di questi metodi (non tutti sono perfettamente intercambiabili). Il codice della tabella è riportato qui sotto.

Note alle righe evidenziate:

• Il comando border:none deve essere presente negli attributi della tabella per funzionare nelle caselle.
• Parallelamente al border:none, esiste anche il comando background:none, che per funzionare richiede anch'esso di essere già presente fra gli attributi della tabella. Quest'ultimo comando, però, non si limita ad eliminare lo sfondo della sola cella in cui è applicato, ma elimina anche quello di tutte le celle non di intestazione della tabella.
• Il comando bgcolor= non ha effetto sulle celle di intestazione. Al suo posto bisogna usare style="background:".
• La sequenza dei lati a cui si riferiscono i valori di border-width è: superiore, destro, inferiore, sinistro. (da mezzogiorno in senso orario)
• Se condivisi con altre cellette, i lati sinistro e superiore di una cella (in questo esempio: Blocco) non possono essere cancellati/occultati (a meno di non assegnare ai bordi lo spessore di 2px o più). Al loro posto, devono essere cancellati/occultati i lati destro e inferiore delle cellette ad essa adiacenti (Barocco e Allocco).

{| class=wikitable style="border:none; font-size: 95%;"
! style="border:none; background:#FFEEEE;"|
! Parole in -occo
! style="border-top:solid 1px #FFEEEE; background:#FFEEEE;"|
! Parole in -accio
! style="border-style:solid; border-width: 0 0 1px 1px; background:#FFEEEE;"|
|-
! Con la A
| Arrocco || style="border-bottom:0px;"| Allocco || Addiaccio || Abbraccio
|-
! style="border:none; background:#FFEEEE;"| Con la B
| style="border-right:solid 1px #F8F9FA;"| Barocco || style="border:#F8F9FA solid 1px;"| Blocco
| Braccio ||bgcolor=#FFEEEE style="border-right:solid 1px #FFEEEE;"| Brogliaccio
|-
! Con la C
| Ciocco || Cocco || Carpaccio || Canovaccio
|-
| bgcolor=#FFEEEE style="border:#FFEEEE solid 1px; border-right:0px"|
| Diplococco ||bgcolor=#FFEEEE style="border-bottom:solid 1px #FFEEEE;"|  || Dispaccio
| bgcolor=#FFEEEE style="border-right:solid 1px #FFEEEE; border-bottom:solid 1px #FFEEEE;"|
|}

Tabelle nidificate

Le tabelle nidificate sono tabelle costruite all'interno di altre tabelle, e vengono generalmente utilizzate per risolvere problemi di composizione in casi particolarmente complessi, o per disporre i dati e gli oggetti secondo schemi che la sintassi di pagine e tabelle non permetterebbe.

Un paio di esempi di tabelle usate per "impacchettare" e allineare altre tabelle sono disponibili nella sezione immediatamente sottostante (tabelle "semplici" e tabelle "wikitable" all'interno di tabelle "semplici" senza bordi né sfondo).
Per quanto riguarda invece la nidificazione di tabelle all'interno di tabelle "propriamente dette", che è poi l'argomento principale di questa trattazione, occorre dire che è buona norma evitarla per quanto possibile, dal momento che essa può complicarne anche di parecchio i codici, e che la gran parte dei problemi per i quali si sarebbe tentati di farvi ricorso possono in realtà essere risolti con un uso adeguato di comandi quali rowspan e colspan.
Fatte salve queste considerazioni, le tabelle nidificate restano uno dei tanti strumenti a disposizione di chi crea e compila pagine e tabelle, e conoscerne i rudimenti può sempre rivelarsi utile.

Quali tabelle usare

La scelta del tipo di tabella da nidificare è opportuno ricada su una tabella "semplice".
Queste tabelle infatti, a differenza di quelle marcate class=wikitable, sono molto meno "ingombranti" e infinitamente più malleabili (una di esse ad esempio è la barra che divide i due gruppi di tabelle qui sotto), oltre al fatto che di partenza non hanno né sfondo proprio (assumono automaticamente quello su cui "poggiano") né bordi predefiniti, due cose che, se già presenti, sarebbe il più delle volte necessario cancellare o ridefinire, con rese finali quasi mai all'altezza delle aspettative.

Tabelle "semplici" e tabelle "wikitable"

Da nidificare Tabella "semplice" senza bordi di default		Nidificata Tabella "semplice" senza bordi di default

Da nidificare Tabella "wikitable" con bordi di default

Nidificata Tabella "wikitable" con bordi di default

Cell padding e border-collapse

Normalmente, quando a una tabella "semplice" nidificata si aggiungono uno o più bordi interni (per mezzo - in questo caso - del comando style="border-bottom:solid 1px #A2A9B1), questi non raggiungono mai i bordi della cella-contenitore:

Tabella "semplice" nidificata (e colorata)

Per far sì che ciò avvenga, occorre inserire i comandi style="padding:0px" nella riga degli attributi della cella-contenitore (riduce ai minimi termini il "cuscinetto" fra la  Tabella nidificata  e i bordi della cella-contenitore) e style="border-collapse:collapse" nella primissima riga della tabella nidificata (consente ai bordi di fare "quel passetto in più" e agganciarsi):

Tabella "semplice" nidificata (e colorata)

Qui sotto il codice della tabella così modificata, con le righe salienti in evidenza.

{|class=wikitable style="font-size: 95%;"     <!-- Inizio della tabella principale -->
|style="padding:0px"|     <!-- Attributi della cella-contenitore -->
{|bgcolor=#F2E0CE style="border-collapse:collapse"     <!-- Inizio della tabella nidificata -->
|style="border-bottom:solid 1px #A2A9B1| Tabella "semplice"
|-
| nidificata (e colorata)
|}     <!-- Fine della tabella nidificata -->
|}     <!-- Fine della tabella principale -->

Applicando questi comandi i bordi della cella-contenitore vanno naturalmente a "schiacciarsi" sul contenuto della nidificata, ma questo è un inconveniente a cui si potrà ovviare in vari modi. Ultima nota: #A2A9B1 è il colore di default dei bordi delle tabelle di class=wikitable.

Dividere verticalmente una cella (senza bordi interni)

Tempo	+	Atleta	Nazionalità	Evento
Kayak
1'10"11	b	Anna Oddo Alula Nayan	Italia   India	Campionati palindromatici 2002

Esempio pratico

Nel corso di una manifestazione sportiva, un'atleta stabilisce il record del mondo nelle batterie di qualificazione (da cui la b), e un'altra lo pareggia in finale (cosa che non richiede specificazioni). Nella pagina dei record di quello sport andranno inseriti nella stessa riga entrambi i primati, con tutti i dati che li identificano (tempo, atleta, nazionalità, data, evento, eccetera), avendo naturalmente cura di far figurare una volta sola i dati comuni a entrambe le prestazioni.
Fra questi,   e b vanno inseriti nella stessa casella, ed è a questo punto che sorgono i problemi: la grammatica di Wikipedia non permette infatti di attribuire più di un valore di allineamento (verticale o orizzontale che sia) ai vari contenuti di una stessa cella, per cui è impossibile far "galleggiare" la targhetta   a mezza altezza e al contempo collocare la b nella riga superiore.
Una soluzione alla buona può essere quella di far figurare la b (opportunamente inclusa fra i comandi <big> e </big> perché risulti della dimensione normale) come apice della targhetta  , ma se si vogliono le cose fatte bene l'unica soluzione è nidificare, ossia costruire una tabella (senza bordi) all'interno della cella in questione.

Primo passo: creare la tabella da nidificare

La sintassi in questo caso è estremamente semplice (il   nella celletta della b serve a "dare una presa" al comando <br/>).

{|
|{{Recordicona|RM|dim=small}}||''b''<br/>&nbsp;
|}

dà

b

ossia, per averne una percezione più chiara

b

Secondo passo: inserire la tabella nella cella-contenitore

Anche questo è presto fatto: basterà svuotare la cella in cui andrà posizionata e incollare sulla riga immediatamente sottostante al suo contrassegno | il codice della tabella appena creata:

{| class=wikitable style="font-size: 95%;"
! Tempo !! + !! Atleta
|-
|colspan=3; bgcolor=#D0F0F0|'''Kayak'''
|-
|1'10"11
|
{|
|{{Recordicona|RM|dim=small}}||''b''<br/>&nbsp;
|}
|Anna Oddo<br/>Alula Nayan
|}

dà

Tempo	+	Atleta
Kayak
1'10"11	b	Anna Oddo Alula Nayan

Terzo passo: inserire "cell padding" e "border-collapse"

A questo punto il lavoro potrebbe anche considerarsi concluso. Tuttavia, in questo caso, la cella-contenitore così modificata supera di parecchio le dimensioni massime consentite, e per far sì che non stravolga la formattazione della tabella in cui dovrà essere inserita, bisogna applicarvi i già citati comandi style="padding:0px"...

Tempo	+	Atleta
Kayak
1'10"11	b	Anna Oddo Alula Nayan

...e style="border-collapse:collapse" (notare come faccia collassare su se stessi i bordi sia interni che esterni).

Tempo	+	Atleta
Kayak
1'10"11	b	Anna Oddo Alula Nayan

Quarto passo: ultimi aggiustamenti

Eliminati i bordi "illustrativi" rosso e verde...

Tempo	+	Atleta
Kayak
1'10"11	b	Anna Oddo Alula Nayan

...non resta che dare un po' di "respiro" alla celletta così creata, cosa che si può fare principalmente in tre modi:

• Inserendo prima e dopo i vari contenuti degli "spazi insecabili" ( );
• Regolando manualmente, per mezzo del comando width=, la larghezza delle singole cellette;
• Inserendo prima, dopo e/o fra le celle della tabella nidificata altre cellette, vuote, e regolate in larghezza a seconda delle necessità sempre tramite il comando width=. (inserendo semplicemente una celletta vuota, il sistema le assegna automaticamente il valore di width=0, il che corrisponde grossomodo alla sola larghezza dei due bordi - invisibili, se non diversamente specificato - della stessa)

(in aggiunta a ciò, si può anche assegnare al comando padding il valore di 0.5px, che come 0px mantiene al minimo la distanza col "soffitto" e col "pavimento" della cella-contenitore, ma che a differenza di 0px garantisce un po' di "luce" ai lati)

In questo esempio, oltre al padding portato a 0.5px, è stata applicata l'opzione delle cellette vuote regolate in larghezza, ottenendo così una cella per aspetto e dimensioni praticamente identica all'originale, seppur finalmente rispondente alle esigenze di partenza.

Risultato finale

Tempo	+	Atleta
Kayak
1'10"11	b	Anna Oddo Alula Nayan

Controllo

Tempo	+	Atleta
Kayak
1'10"11	b	Anna Oddo Alula Nayan

Codice della nidificata nella tabella "Risultato finale"

|style="padding:0.5px;"|
{|style="border-collapse:collapse;"
|width=1px|  || {{Recordicona|RM|dim=small}} ||  || ''b''<br/>&nbsp; ||width=1px|
|}

Dividere orizzontalmente una cella (senza bordi interni)

Tempo	+	Atleta	Nazionalità	Evento
Kayak
1'00"01		Alula Nayan Anna Oddo Anna Oddo	India   Italia   San Marino	Campionati palindromatici 2010 Campionati palindromatici 2016 IX meeting "ai latI d'Italia"

Esempio pratico

Uno stesso record sportivo (esempio a fianco) è stato prima stabilito e poi pareggiato per due volte, queste ultime dalla stessa atleta (che, per comodità esemplificativa, nell'intervallo fra la prima e la seconda prestazione ha cambiato cittadinanza).
Ora la pulizia stilistica impone anche in questo caso di riportare una sola volta il nome della seconda atleta, posizionato a mezza altezza rispetto alle due righe-nazione corrispondenti, mentre quello della prima atleta deve restare fermo dove si trova. Questo sarebbe il lavoro perfetto per un'interlinea a 1,5 (un <br/> e mezzo), ma dato che su Wikipedia questa funzione non sembra esserci (trad.: io non l'ho trovata), diventa necessario ricorrere alla nidificazione.

Dividere orizzontalmente una cella

La procedura è quella già vista: prima si compone la tabella desiderata, in questo caso su righe successive (tramite |-), poi la si nidifica, dotandola di padding e collapse, e infine ci si dedica agli inevitabili (perlomeno in questo caso) aggiustamenti. A differenza della sezione precedente, a questo proposito sarà possibile agire solo in due modi, anziché tre*:

• Regolando col comando style="height:" l'altezza delle singole cellette;
• Inserendo prima, dopo e/o fra di esse (sempre su righe successive) una o più cellette, vuote, per poi regolare anch'esse in altezza col metodo appena illustrato.

* Fra le opzioni si potrebbe annoverare anche il <br/>, ma essendo questo metodo molto meno preciso e maneggevole dei due elencati, non val la pena includerlo nella lista. Il comando rowspan=2 è invece applicabile solo a patto che, invece di una tabella 1x2, se ne costruisca una 2x3, con le due cellette a cui andrà ad "appoggiarsi" quella su due righe riempite con spazi insecabili   oppure con spazi a larghezza zero ​.

Ecco perciò come si presenta il risultato finale. L'allineamento verticale è stato raggiunto con l'applicazione simultanea dei due metodi esposti, mentre il padding orizzontale è stato garantito dall'aggiunta di spazi   prima dei contenuti testuali e dopo il contenuto testuale di lunghezza maggiore.

Risultato finale

+	Atleta	Nazionalità
Kayak
	Alula Nayan   Anna Oddo	India   Italia   San Marino

Controllo

+	Atleta	Nazionalità
Kayak
	Alula Nayan Anna Oddo Anna Oddo	India   Italia   San Marino

Codice della nidificata nella tabella "Risultato finale"

|style="padding:0.5px;"|
{|style="border-collapse:collapse;"
|style="height:23px;"| Alula Nayan 
|-
|style="height:36px;"| Anna Oddo
|-
|style="height:2px;"|
|}

Due metodi diversi

Sfruttando il fatto che due tabelle "semplici" i cui codici vengono riportati consecutivamente si dispongono l'una al di sotto e a ridosso dell'altra, ecco un altro modo per dividere orizzontalmente una cella: riempirla con due tabelle da una celletta invece che con una tabella da due cellette. Come si può notare dalle tabelle-esempio qui sotto (dotate di padding ma non di collapse), la differenza principale è sostanzialmente una, e salta all'occhio immediatamente. Un'altra differenza, che può forse causare qualche problema in sede di rifinitura, è che applicando a nidificate dotate di bordi e così disposte il comando style="border-collapse:collapse", i bordi "confinanti" delle tue tabelle non andranno a sovrapporsi ma semplicemente ad accostarsi, determinando in quel tratto la comparsa di un bordo doppio (cosa che si risolve eliminando - o, meglio, evitando di creare - il più corto dei due).

Metodo A: 1 tabella da 2 cellette

+	Atleta	Nazionalità
Kayak
	Elisabette Basile Anna Oddo	Gran Bretagna   Italia   San Marino

Metodo B: 2 tabelle da 1 celletta

+	Atleta	Nazionalità
Kayak
	Elisabette Basile Anna Oddo	Gran Bretagna   Italia   San Marino

Dividere verticalmente una cella (con bordi interni)

Nidificata grezza

Cifre dispari	1	3	5	7	9
Cifre pari	2 4 6 8

Nidificata giustificata

Cifre dispari	1	3	5	7	9
Cifre pari	2 4 6 8

Una tabella nidificata con bordi interni si costruisce allo stesso modo di una senza bordi interni: una volta creata la tabella desiderata, questi si inseriscono collocando il comando style="border-right:solid 1px #A2A9B1" e/o analoghi (gli altri sono left, top e bottom) fra gli attributi delle singole cellette.
Fare questo però a volte non basta, come testimonia la tabella "Nidificata grezza" qui a fianco. Bisogna infatti tenere presente che la cella-contenitore e le cellette nidificate appartengono a due tabelle distinte, le quali "non si conoscono né si parlano", se non indirettamente (la cella-contenitore può ad esempio farsi "trascinare" in ampiezza dalla nidificata, ma niente di più*).
Ecco perciò che, per ottenere il risultato voluto, occorre in molti casi applicare alle cellette della nidificata i comandi style="height:" e style="width:", seguiti da un valore in pixel tale per cui la cella-contenitore risulti completamente "riempita" dalla nidificata, come nella tabella "Nidificata giustificata". I valori esatti per entrambi i parametri bisogna purtroppo stabilirli tramite prove ed errori (in questo caso il sistema non accetta valori percentuali), a meno che - come nella tabella "giustificata" qui a fianco - la larghezza della cella-contenitore non sia anch'essa stabilita con la funzione style="width:", nel qual caso basterà assegnare alle cellette nidificate un valore uguale per tutte, e tale per cui, moltiplicato per il numero di cellette coinvolte, dia come risultato una misura superiore alla larghezza totale della cella-contenitore. (nell'esempio qui a fianco: cella-contenitore di 220px, singole cellette di 59px, che moltiplicato per 4 fa 236px, ma sarebbero andati bene anche valori di 60, 94, 327, letteralmente qualsiasi numero, purché uguale per tutte)

* Oltre a questo, la cella-contenitore allinea la tabella nidificata a sinistra e la centra verticalmente, ma ciò non implica un "riconoscimento", dato che si tratta di un'impostazione di default, e perciò applicata a qualsiasi "oggetto".

Dividere orizzontalmente una cella (con bordi interni)

Nidificata giustificata

Cifre dispari	Cifre pari
1	2 4 6 8
3
5
7
9

Nidificata grezza

Cifre dispari	Cifre pari
1	2 4 6 8
3
5
7
9

Anche in questo caso occorre adottare gli accorgimenti della precedente sezione, senza particolari differenze fra questa e quella, tranne che per il fatto che il "giochetto" di attribuire alla cella-contenitore un valore n per poi giustificare le cellette nidificate superandolo con la somma dei loro valori, con le altezze non funziona.

Dividere una cella in quattro cellette (2x2, con bordi interni)

Questa sezione è un po' il "riassunto delle puntate precedenti", dato che racchiude gran parte dei codici già analizzati e consente di costruire tabelle nidificate sviluppate su entrambi i piani dello spazio, volendo anche ben oltre il 2x2 illustrato in questi esempi. I codici di queste quattro tabelle, "depurati" dei colori e dei bordi tratteggiati, sono riportati nella sezione "I quattro metodi".

Quattro metodi diversi

     Cella-contenitore

     Tabella nidificata

     2ª tabella nidificata

     3ª tabella nidificata

     4ª tabella nidificata

Tabella 1.1

Nomi	Nomi composti
Edoardo Filippo Giuseppe Simone Valentino	Gian  Franco  Maria Pier  Francesco   Giorgio  Mario

Tabella 1.2

Nomi	Nomi composti
Edoardo Filippo Giuseppe Simone Valentino	Gian  Franco  Maria Pier  Francesco   Giorgio  Mario

Tabella 1.3

Nomi	Nomi composti
Edoardo Filippo Giuseppe Simone Valentino	Gian Pier  Franco  Maria  Francesco   Giorgio  Mario

Tabella 1.4

Nomi	Nomi composti
Edoardo Filippo Giuseppe Simone Valentino	Gian  Franco  Maria Pier  Francesco   Giorgio  Mario

• Tabella 1.1: il modo più semplice per nidificare una tabella in una cella.
• Tabella 1.2: da usare quando all'interno della cella-contenitore è necessario avere due o più righe che differiscano per il numero di celle in esse contenute.
• Tabella 1.3: stessa cosa della 1.2 ma a proposito delle colonne.
• Tabella 1.4: è l'interpolazione delle due precedenti; consente di ottenere tabelle nidificate con la più ampia libertà di formattazione possibile (ogni "cella singola" può essere trasformata in una tabella a sviluppo verticale e/o orizzontale).

Oltre a tutte le considerazioni che si possono fare a riguardo, è interessante notare come quattro codici (cioè "genotipi") del tutto diversi producano qui quattro tabelle (cioè "fenotipi") del tutto identiche.

I quattro metodi

Cella-contenitore + tabella/e nidificata/e

Tabella 1.1

{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.1
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="border-right:solid 1px #A2A9B1; width:35px" align=center|Gian||&nbsp;Franco<br/>&nbsp;Maria
|-
|style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1;" align=center|Pier||style="border-top:solid 1px #A2A9B1"|&nbsp;Francesco&nbsp;<br/>&nbsp;Giorgio<br/>&nbsp;Mario
|}
|}

Tabella 1.2

{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.2
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px;"|
{|style="border-collapse:collapse;"
|style="border-right:solid 1px #A2A9B1; width:35px" align=center|Gian||&nbsp;Franco<br/>&nbsp;Maria
|}
{|style="border-collapse:collapse;"
|style="border-right:solid 1px #A2A9B1; border-top:solid 1px #A2A9B1; width:35px" align=center|Pier||style="border-top:solid 1px #A2A9B1"|&nbsp;Francesco&nbsp;<br/>&nbsp;Giorgio<br/>&nbsp;Mario
|}
|}

Tabella 1.3

{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.3
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px;"|
{|style="border-collapse:collapse; float:left;"
|style="height:42px; width:35px; border-bottom:solid 1px #A2A9B1;" align=center|Gian
|-
|style="height:63px;" align=center|Pier
|}
{|style="border-collapse:collapse; float:left;"
|style="border-bottom:solid 1px #A2A9B1; border-left:solid 1px #A2A9B1;"|&nbsp;Franco<br/>&nbsp;Maria
|-
|style="border-left:solid 1px #A2A9B1;"|&nbsp;Francesco&nbsp;<br/>&nbsp;Giorgio<br/>&nbsp;Mario
|}
|}

Tabella 1.4

{| class=wikitable style="font-size: 95%;"
|+ Tabella 1.4
! Nomi !! Nomi composti
|-
|Edoardo<br/>Filippo<br/>Giuseppe<br/>Simone<br/>Valentino
|style="padding:0px;"|
{|style="border-collapse:collapse; float:left;"
|style="height:42px; width:35px; border-bottom:solid 1px #A2A9B1;" align=center|Gian
|}
{|style="border-collapse:collapse;"
|style="width:70px; border-bottom:solid 1px #A2A9B1; border-left:solid 1px #A2A9B1;"|&nbsp;Franco<br/>&nbsp;Maria
|}
{|style="border-collapse:collapse; float:left;"
|style="height:63px; width:35px;" align=center|Pier
|}
{|style="border-collapse:collapse;"
|style="border-left:solid 1px #A2A9B1;"|&nbsp;Francesco&nbsp;<br/>&nbsp;Giorgio<br/>&nbsp;Mario
|}
|}

Costruire grafici usando le tabelle nidificate

Alcune dimostrazioni pratiche della duttilità delle tabelle nidificate.

Grafici orizzontali

A proposito della Tabella 3.2 è interessante notare come lo spessore delle barre possa essere modificato non solo per mezzo del comando style="height:", ma anche variando le dimensioni percentuali del testo in esse contenuto (in questo caso un  ).

     Cella-contenitore

     Celle singole nidificate

Tabella 1

Celle nidificate e intestazione a sbalzo per sondaggi al volo
Uva  45%  Mele  85%  Fragole  15%  Arance  65%  Albicocche  25%

Tabella 2

Celle nidificate e intestazione a capitello per grafici a stalattite
Uva Mele Fragole Arance Albicocche

Tabella 3.1

Esito del sondaggio
Sì No Non so		24% 11% 65%
Totale		100%

Tabella 3.2

Esito del sondaggio
Sì No Non so		24% 11% 65%
Totale	Maschi - 52,8%      Femmine - 47,2%	100%

Istogramma verticale

Numero di volte al mese in cui la tal cosa si verifica, su base 30

30 20 10	9 7 18 16 22 27 25 21 11 19 30 14												30 20 10
	Gen	Feb	Mar	Apr	Mag	Giu	Lug	Ago	Set	Ott	Nov	Dic

Note:

• Lo spazio di 2px che separa le colonne, oltre che a migliorare l'estetica, serve a far sì che abbiano tutte la stessa larghezza e lo stesso aspetto, dato che fra le colonne di gennaio e di dicembre e il margine esterno dello "zoccolo" su cui poggiano c'è uno scarto ineliminabile di 1px (si tratta dei bordi della cella-contenitore "cancellati" conferendo loro il colore dello sfondo).
• All'occorrenza anche queste colonne possono essere divise in due o più, per rappresentare magari le variazioni su base annua.
• Volendo, con poche e abbastanza semplici modifiche questo istogramma può diventare un grafico a punti (●), in cui ciascuno di essi può contenere un link alla cosa o alla persona a cui si riferisce (●).

Raccomandazioni

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

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 è:

Titolo

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>

Pagine correlate

• Aiuto:Strumenti#Tabelle
• Elementi HTML
• Aiuto:Markup
• Aiuto:Timeline
• Aiuto:Manuale di stile#Colonne
• Aiuto:Colori
• Categoria:Template per le tabelle