Aiuto:Tabelle

Testo tratto da Aiuto:Tabelle su Wikipedia

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

Elenco tag e parametri

{| |}	Apertura e chiusura della tabella. Inserimento parametri (relativi all'intera tabella): {| parametri (attenzione ad inserire uno spazio prima e a separare con uno spazio i diversi parametri)
|-	Nuova riga nella tabella (non viene chiuso alla fine della riga) Inserimento parametri (relativi all'intera riga): |- parametri (spazi come nel caso precedente)
a capo e | oppure ||	Nuova cella nella riga (non viene chiuso alla fine della cella). Di seguito va inserito il contenuto della cella. È preferibile il metodo andando a capo ad ogni riga Inserimento parametri (relativi alla sola cella): |parametri|contenuto della cella
! (al posto della barra verticale)	rende la cella un'intestazione (con testo in grassetto)
|+ (al posto di |- e seguito dal testo	fa precedere la riga da un titolo non bordato, ma con le stessa larghezza della tabella
Parametri più usati
border=n	spessore della linea di bordo (border=0 equivale a "nessun bordo")
cellpadding=n	margine interno delle celle (numero di pixel)
align=x	allineamento orizzontale della tabella rispetto allo spazio in cui è contenuta o del contenuto all'interno delle singole celle o delle celle di una riga "x" sta per "left" (a sinistra) "center" (al centro) o "right" (a destra)
valign=x	allineamento verticale del contenuto all'interno delle singole celle o delle celle di una riga "x" sta per "top" (in alto) "center" (al centro) o "bottom" (in basso)
width=n% width=npx	larghezza dell'intera tabella o di una cella, espressa in percentuale ("%") (rispetto allo spazio disponibile per la tabella, o rispetto alla larghezza della tabella per una cella) ovvero espressa in numero di pixel ("px")
bgcolor="#n" bgcolor="x"	colore di sfondo dell'intera tabella, o di una riga o di una cella, espresso con #n (dove n sta per numero esadecimale del colore: vedi Aiuto:Colori su Wikipedia), ovvero espresso con il nome in inglese del colore (per alcuni): vedi Aiuto:Tavolozza dei colori su Wikipedia.
colspan=n	estensione della cella su n colonne
rowspan=n	estensione della cella su n righe

Tutorial

Definizione di righe e celle

Per prima cosa bisogna segnalare al software che si intende inserire una tabella. Si deve dunque aprire (e alla fine richiudere) la tabella scrivendo degli appositi comandi (tag):

• {| (parentesi graffa aperta e barra verticale) per aprire la tabella
• |} (barra verticale e parentesi graffa chiusa) per chiuderla

Nel linguaggio HTML corrispondono ai comandi <table e </table.

Tutto quanto è contenuto tra questi due tag viene interpretato dal software come parte della tabella e per questo motivo è necessario ricordarsi di chiudere il comando alla fine della tabella: in caso contrario il software interprerà anche tutto il testo successivo come parte della tabella.

L'inizio di ogni riga della tabella viene segnalato con il tag |- (barra verticale e trattino).

In questo caso non è necessario segnalare la fine della riga: la riga si chiude automaticamente all'inizio della riga successiva, ovvero alla chiusura della tabella

Nel linguaggio HTML corrisponde al comando L'inizio di ogni cella nella tabella va segnalato andando a capo e usando il comando | (seguito immediatamente dal contenuto della cella). In alternativa si può usare il comando || (sempre seguito immediatamente dal contenuto della cella), senza andare a capo. Esempio:

|contenuto cella 1

|contenuto cella 2

|contenuto cella 3

oppure:

|contenuto cella 1||contenuto cella 2||contenuto cella 3

daranno entrambi (all'interno della riga di una tabella):

contenuto cella 1

contenuto cella 2

contenuto cella 3

Nel linguaggio HTML corrisponde ai comandi e

Esempio di tabella a due righe e tre colonne
Cosa si scrive	Cosa si vede
{| | cella 1/1 | cella 1/2 | cella 1/3 |- | cella 2/1 | cella 2/2 | cella 2/3 |}	cella 1/1 cella 1/2 cella 1/3 cella 2/1 cella 2/2 cella 2/3

Definizione di bordi, margini, dimensioni e allineamento

Per vedere meglio la forma della tabella se ne possono tracciare i bordi. Lo spessore della linea di bordo può essere scelto a piacere. Si opera assegnando un "parametro" all'intera tabella, ossia inserendo il parametro dopo il comando di apertura (dopo uno spazio). Il comando è "border=n" dove n è il numero di pixel dello spessore della riga.

Esempio di tabella a due righe e tre colonne con bordo spesso 5 pixel
Cosa si scrive	Cosa si vede
{| border=5 | cella 1/1 | cella 1/2 | cella 1/3 |- | cella 2/1 | cella 2/2 | cella 2/3 |}	cella 1/1 cella 1/2 cella 1/3 cella 2/1 cella 2/2 cella 2/3

Il margine tra il bordo delle celle e il testo può anch'esso essere definito, attribuendo alla tabella il parametro "cellpadding" e indicando il numero dei pixel. Da notare che i due parametri sono separati da uno spazio.

Esempio di tabella a due righe e tre colonne con bordo spesso 1 pixel e margini interni di 20 pixel
Cosa si scrive	Cosa si vede
{| border=1 cellpadding=20 | cella 1/1 | cella 1/2 | cella 1/3 |- | cella 2/1 | cella 2/2 | cella 2/3 |}	cella 1/1 cella 1/2 cella 1/3 cella 2/1 cella 2/2 cella 2/3

La larghezza della tabella può essere definita in termini assoluti (numero di pixel), aggiungendo il parametro "width=npx" (per esempio "width=100px" per una tabella larga 100 pixel).

Esempio di tabella larga 100 pixel

Esempio di tabella larga 300 pixel

La larghezza può anche essere definita in termini relativi (percentuale), rispetto allo spazio disponibile nella pagina. Il parametro si scrive in questo caso "width=n%" (per esempio "width=50%" indica una larghezza pari al 50% dello spazio disponibile). In questo caso le dimensioni della tabella varieranno se si allarga o si restringe la finestra del browser.

Esempio di tabella larga il 20% dello spazio disponibile

Esempio di tabella larga il 50% dello spazio disponibile

Se non si indica una dimensione prefissata la tabella si dimensionerà automaticamente in base al suo contenuto.

Esempio di tabella dimensionata automaticamente a seconda del suo contenuto (in questo caso molto lungo)

Altro esempio più corto

Lo stesso faranno le celle all'interno della tabella, cercando di fare una media tra la larghezza dei contenuti delle diverse righe, come in questo esempio di tabella a due righe e due celle per riga.

cella dimensionata automaticamente e con contenuto molto lungo che dunque sarà più grande	cella corta
anche nella seconda riga il contenuto della prima cella è molto lungo, ma meno	altra cella corta

Le dimensioni possono essere indicate anche per le singole celle, indicando il parametro della larghezza subito dopo la sbarra verticale che segna l'inizio della cella, seguito da un'altra sbarra verticale che lo separa dal contenuto (secondo la formula "|parametro|contenuto"). Anche in questo caso se si inseriscono più parametri devono essere separati da uno spazio ("|parametro1 parametro2|contenuto").

Esempio di tabella a due righe e tre colonne con le tre colonne larghe rispettivamente il 30%, il 50% e il 20% della larghezza complessiva della tabella
Cosa si scrive	Cosa si vede
{| border=1 cellpadding=5 |width=30%|cella 1/1 |width=50%|cella 1/2 |width=20%| ella 1/3 |- |cella 2/1 |cella 2/2 |cella 2/3 |}	cella 1/1 cella 1/2 cella 1/3 cella 2/1 cella 2/2 cella 2/3

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 || 6 || 4
|-
| riga2 || 5 || 4
|-
| riga3 || 4 || 1  
|-
| riga4 || 3 || 3  
|-
| riga5 || 2 || 2  
|-
| riga6 || 1 || 5  
|}

titolo	colonna1	colonna2
riga1	6	4
riga2	5	4
riga3	4	1
riga4	3	3
riga5	2	2
riga6	1	5