Aiuto:Tabelle

Tabella semplice

{|
| cella1 || cella2 || cella3
|-
| cella4 || cella5 || cella6
|}

restituisce:

cella1	cella2	cella3
cella4	cella5	cella6

Tabella con didascalia

{|
|+ Didascalia
|-
| cella1 || cella2 || cella3
|-
| cella4 || cella5 || cella6
|}

restituisce:

Didascalia

cella1	cella2	cella3
cella4	cella5	cella6

Tabella con bordo

{| border="1"
|-
|Cella 1 Cella 1 Cella 1 Cella 1
|-
|align="right" |Cella 2 (a destra)
|-
|}

restituisce:

Cella 1 Cella 1 Cella 1 Cella 1

Cella 2 (a destra)

Tabella con intestazione di colonna

{|
|+ Didascalia
! Intestazione 1 !! Intestazione 2 !! Intestazione 3
|-
|Cella 1 || Cella 2 || Cella 3
|-
|Cella A
|Cella B
|Cella C
|}

restituisce:

Didascalia

Intestazione 1	Intestazione 2	Intestazione 3
Cella 1	Cella 2	Cella 3
Cella A	Cella B	Cella C

Tabella con intestazione di colonna e di riga

{| border="1"
|+ Didascalia
! Intestazione colonna 1 !! Intestazione colonna 2 !! Intestazione colonna 3
|-
! Intestazione riga 1
| Cell 1 || Cell 2
|-
! Intestazione riga 2
|Cell 3
|Cell 4
|}

restituisce:

Didascalia

Intestazione colonna 1	Intestazione colonna 2	Intestazione colonna 3
Intestazione riga 1	Cell 1	Cell 2
Intestazione riga 2	Cell 3	Cell 4

Ricapitolando

Sia questo codice

{| 
| A 
| B
|- 
| C
| D
|}

che questo

{| 
| A || B
|- 
| C || D 
|}

ottengono questo

A	B
C	D

Aggiungiamo il colore

Aggiungiamo colore per singola cella:

{| 
| style="background:red; color:white" | cella 1 || cella 2
| cella 3 || style="background:red; color:white;" | cella 4
|}

restituisce:

cella 1

cella 2

cella 3

cella 4

Il colore può essere definito per l'intera tabella o l'intera riga:

{| style="background:yellow; color:green"
|- 
| abc || def || ghi
|-
| jkl || mno || pqr
|-
| stu || vwx || yz
|}

restituisce:

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

Particolari celle possono essere personalizzate così:

{| style="background:yellow; color:green"
|- 
| abc || def || ghi
|- style="background:red; color:white"
| jkl || mno || pqr
|-
| stu || style="background:silver" | vwx || yz
|}

restituisce:

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

Ancora un esempio in cui tutto il testo deve essere bianco:

{| style="color:white"
|-
| bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2 || bgcolor="green"|cell3
|}

restituisce:

cell1

cell2

cell3

Larghezza e altezza

Definiamo una tabella di larghezza 75% dell'area disponibile e 200px di altezza; una riga deve essere alta 100px; una colonna deve essere larga 200px:

{| style="width:75%; height:200px;" border="1"
|- 
| abc || def || ghi
|- style="height:100px" 
| jkl || style="width:200px" |mno || pqr
|-
| stu || vwx || yz
|}

restituisce:

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

Un altro esempio in cui si definiscono le colonne:

{| border="1" cellpadding="2"
! width="50"  | Name
! width="225" | Effect
! width="225" | Games Found In
|-
|Poké Ball || Regular Poké Ball || All Versions
|-
|Great Ball || Better than a Poké Ball || All Versions
|}

restituisce:

Name	Effect	Games Found In
Poké Ball	Regular Poké Ball	All Versions
Great Ball	Better than a Poké Ball	All Versions

Allineamento verticale

{| border="1" cellpadding="2"
|- valign="top"
| width="10%"| '''Row heading'''
| width="70%"| Lorem ipsum...
| width="20%"|A shorter piece of text.
|- valign="top"
| '''Row heading'''
| Lorem ipsum... 
| A shorter piece of text.
|}

restituisce:

Row heading	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	A shorter piece of text.
Row heading	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	A shorter piece of text.

Tabella fluttuante a destra

Codice tabella:

{| align="right" border="1"
| Col 1, row 1 
|rowspan="2"| Col 2, row 1 (and 2) 
| Col 3, row 1 
|- 
| Col 1, row 2 
| Col 3, row 2 
|}

Questo paragrafo si trova prima della tabella. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...

Col 1, row 1	Col 2, row 1 (and 2)	Col 3, row 1
Col 1, row 2		Col 3, row 2

Note the floating table to the right.

Questo paragrafo si trova dopo della tabella. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...

Unione di celle e colonne

{| border="1" cellpadding="5" cellspacing="0"
|-
| Colonna 1 || Colonna 2 || Colonna 3
|-
| rowspan="2"| A
| colspan="2" align="center"| B
|-
| C <!-- La colonna 1 è occupata dalla cella A -->
| D 
|-
| E
| rowspan="2" colspan="2" align="center"| F
|- 
| G <!-- Le colonne 2+3 sono occupate dalla cella F -->
|- 
| colspan="3" align="center"| H
|}

restituisce:

Colonna 1	Colonna 2	Colonna 3
A	B
	C	D
E	F
G
H

Centrare una tabella

{| border="1" style="margin: 1em auto 1em auto"
|+ '''Cells left-aligned, table centered'''
! Duis || aute || irure
|-
| dolor  || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}

restituisce:

Celle allineate a sinistra, tabella centrata

Duis	aute	irure
dolor	in reprehenderit	in voluptate velit
esse cillum dolore	eu fugiat nulla	pariatur.

Ordinare valori

{| class="sortable" border="1"
|+Sortable table
|-
! Alphabetic !! Numeric !! Date !! class="unsortable" | Unsortable
|-
| d || 2 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}

restituisce:

Sortable table

Alphabetic	Numeric	Date	Unsortable
d	2	2008-11-24	This
b	8	2004-03-01	column
a	6	1979-07-23	cannot
c	4	1492-12-08	be
e	0	1601-08-13	sorted.

Tabelle con stile "prettytable" o "wikitable"

Per avere un aspetto migliore, sono stati aggiunti gli stessi stili in uso su Wikipedia per formattare le tabelle. Gli stili sono due:

• prettytable
• wikitable

Per utilizzarli è necessario inserire la classe ad inizio tabella in questo modo:

{| class="wikitable"

oppure

{| class="prettytable"

Ecco un esempio di tabella formatta con questi stili:

Tabella con stile wikitable o prettytable

Duis	aute	irure
dolor	in reprehenderit	in voluptate velit
esse cillum dolore	eu fugiat nulla	pariatur.

Per approfondire

Tabelle in MediaWiki