Aiuto:Tabelle: differenze tra le versioni

Versione delle 17:03, 26 giu 2018

Versione attuale delle 00:14, 2 ott 2025

(17 versioni intermedie di 11 utenti non mostrate)

Riga 1:

{{TOC Aiuto|right}}

In questa pagina viene spiegata la sintassi per inserire una '''tabella''' in [[Wikipedia]], usando il [[Aiuto:MarkupWikitesto|markup wiki]].

Esistono alcuni [[Aiuto:Strumenti#Tabelle|strumenti]] per generare automaticamente delle tabelle. Per una guida completa sulle tabelle (in inglese), vedi [[mmw:Help:TableTables/it]].

Notare che i [[WP:TS|template sinottici]] e i [[WP:TN|template di navigazione]] sono casi particolari di tabelle con proprie classi e metodi di creazione, per i quali si rimanda alle relative pagine.

Riga 175:

|-

| Riga 2, cella 1 || Riga 2, cella 2 || Riga 2, cella 3

|}

===Colonne con più righe===

In alcune tabelle può essere opportuno presentare colonne cui corrispondono più righe. Di seguito un esempio:

<pre>

{| class="wikitable" style="text-align:right"

|-

!colspan="2"|Singolare !!colspan="2"|Plurale

|-

| ''aqua'', -''ae'' || 'l'acqua' || ''aquae'', -''ārum'' || 'le terme'

|-

| ''copĭa'', -''ae'' || 'l'abbondanza' || ''copĭae'', -''ārum'' || 'le truppe'

|}

</pre>

Il risultato è il seguente:

{| class="wikitable" style="text-align:right"

|-

!colspan="2"|Singolare !!colspan="2"|Plurale

|-

| ''aqua'', -''ae'' || 'l'acqua' || ''aquae'', -''ārum'' || 'le terme'

|-

| ''copĭa'', -''ae'' || 'l'abbondanza' || ''copĭae'', -''ārum'' || 'le truppe'

|}

=== Inserire wikitesto in una cella ===

All'interno delle tabelle è possibile formattare il testo usando la normale [[Aiuto:Wikitesto|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 <code>&lt;br &nbsp;/&gt;</code>:

<pre>

{| class="wikitable"

Riga 242 ⟶ 265:

=== Uso di ! e | ===

Quando si scrive il testo contenuto in una tabella, bisogna fare attenzione ai caratteri <code>!</code> e <code>|</code>, perché è probabile che vengano interpretati erroneamente come elementi di markup: sappiamo infatti che <code>!</code> e <code>|</code> segnano l'inizio di una nuova cella, e inoltre <code>|</code> serve anche per assegnare gli attributi a una cella (vedi la sezione [[Aiuto:Tabelle#Attributi|Attributi]] più avanti; per farsene un'idea, gli attributi permettono per esempio di cambiare il colore del testo, e la loro sintassi è <code>| ''attributi'' | Testo della cella</code>). Quando ciò accade, l'aspetto della tabella è ben diverso da quello che ci si aspettava. Per esempio, scrivendo

<pre>

{| class="wikitable"

Riga 252 ⟶ 275:

| Il simbolo "|" è 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, <code>Il simbolo "</code>) e il contenuto della cella (il testo a destra della barra, <code>" è una barra verticale</code>); com'è intuitivo, però, gli attributi sono stati definiti in modo errato (occorre rispettare una precisa sintassi), perciò il software li ignora e mostra il testo della cella senza alcuna formattazione.

Esistono metodi differenti per risolvere questo genere di problemi. Il primo consiste nell'utilizzo dei tag <code>&lt;nowiki&gt;Testo&lt;/nowiki&gt;</code>: il testo racchiuso fra essi non viene interpretato dal software, il che è perfetto per l'esempio precedente:

Riga 264 ⟶ 287:

| Il simbolo "<nowiki>|</nowiki>" è una barra verticale || Ok

|}

In alternativa, al posto della barra verticale è possibile utilizzare l'entità HTML <code>&amp;#124;</code>:, mentre il comando <code><nowiki>{{!}}</nowiki></code> in questo caso non funziona.

Fortunatamente, questo problema non si presenta con i [[Aiuto:Wikilink#Piped wikilink|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 <code>&lt;nowiki&gt;</code>, oppure sostituirli con l'entità <code>&amp;#33;</code>:

<pre>

{| class="wikitable"

|+ [[Fattoriale]] vs semifattoriale

| Il simbolo "&amp;#124;" è una barra verticale || Ok

! ''n'' !! ''n''! !! ''n''&amp;#33;&amp;#33;

|-

| 5 || 120 || 15

|}

</pre>

Il risultato è lo stesso:

{| class="wikitable"

|+ [[Fattoriale]] vs semifattoriale

| Il simbolo "&#124;" è una barra verticale || Ok

! ''n'' !! ''n''! !! ''n''&#33;&#33;

|}

|-

Fortunatamente, questo problema non si presenta con i [[Aiuto:Wikilink#Piped wikilink|piped wikilink]], che pertanto possono essere usati normalmente (sarebbe anzi controproducente ricorrere ai metodi sopra esposti):

| 5 || 120 || 15

<pre>

{| class="wikitable"

| Un [[Aiuto:Wikilink|piped wikilink]] || Un [[Aiuto:Wikilink&lt;nowiki&gt;|&lt;/nowiki&gt;piped wikilink]] || Un [[Aiuto:Wikilink&amp;#124;piped wikilink]]

|}

</pre>

{| class="wikitable"

| Un [[Aiuto:Wikilink|piped wikilink]] || Un [[Aiuto:Wikilink<nowiki>|</nowiki>piped wikilink]] || Un [[Aiuto:Wikilink&#124;piped wikilink]]

|}

Riga 365 ⟶ 388:

|}

</pre>

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:

{| class="wikitable"

Riga 375 ⟶ 399:

| colspan="3" | Riga 4, celle 1, 2 e 3

|}

<pre>

{| class="wikitable"

Riga 385 ⟶ 408:

|}

</pre>

Questa tabella ha due colonne, ma nella terza riga è stata definita solo una cella poiché il posto dell'altra è già occupato dalla cella superiore:

{| class="wikitable"

Riga 393 ⟶ 417:

| Riga 3, cella 2

|}

<pre>

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

|}

</pre>

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

|}

|}

<pre>

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

|}

</pre>

Gli attributi <code>rowspan</code> e <code>colspan</code> possono anche essere usati contemporaneamente sulla stessa cella:

Riga 526 ⟶ 659:

Testo sotto la tabella.

Si può però fare in modo che il testo esterno si disponga a fianco della tabella, assegnandocome adsi essafa tipicamente con le immagini (opportuno solo in casi particolari e con tabelle piccole).
Per farlo si assegna a <code>{|</code>) l'attributo <code>class="wikitable floatleft"</code> o <code>class="wikitable floatright"</code>. 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 <code>|}</code>); il testo che precede la tabella (cioè <code>{|</code>) rimane sopra di essa. Una volta superata la tabella, il testo riprenderà di nuovo ad occupare tutta la larghezza della pagina.

Esempio:

Riga 567 ⟶ 701:

: 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: unUn modo alternativo per posizionare una tabella è assegnare a <code>{|</code> l'attributo <code>style="float:''posleft/right'';"</code>, dove <code>''pos''</code> va sostituito con(selezionando <code>left</code> o <code>right</code>). 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:

Le tabelle si possono posizionare anche al centro della pagina, con l'attributo <code>style="margin-left:auto; margin-right:auto;"</code>, 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.

: Testo che precede la tabella (appare sopra di essa).

{| class="wikitable" style="float:right;"

| 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" style="float:left;"

| 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 <code>style="margin-left:auto; margin-right:auto;"</code>. 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:

<pre>

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

</pre>

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

== Tabelle ordinabili ==

Riga 680 ⟶ 772:

|}

===Righe non ordinabili===

È 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 <code>class="sortbottom"</code>.

È 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 <code>class="sortbottom"</code> (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 <code>class="expand-child"</code>. In tal modo la prima riga verrà ordinata normalmente e la seconda la seguirà.

<pre><nowiki>

{| class="wikitable sortable"

! titolo 1

|-

! titolo 2

|-

| Bologna

|-

| Ancona

|- class="expand-child"

| seconda riga di Ancona

|-

| Como

|- class="sortbottom"

| piede 1

|-

! piede 2

|}

</nowiki></pre>

{| class="wikitable sortable"

! titolo 1

|-

! titolo 2

|-

| Bologna

|-

| Ancona

|- class="expand-child"

| seconda riga di Ancona

|-

| Como

|- class="sortbottom"

| piede 1

|-

! piede 2

|}

=== 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. [[Aiuto:MarkupWikitesto|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 [[Aiuto:Manuale_di_stile#Stile_delle_date|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.

Riga 743 ⟶ 876:

| data-sort-value="Verdi Anna" | 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:

| <nowiki><span style="display:none">Rossi Mario</span></nowiki> 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.

== Raccomandazioni ==

Riga 854 ⟶ 983:

== Pagine correlate ==

*[[Aiuto:Strumenti#Tabelle]]

*[[ElementiElemento HTML]]

*[[Aiuto:MarkupWikitesto]]

*[[Aiuto:Timeline]]

*[[Aiuto:Manuale di stile#Colonne]]

Riga 862 ⟶ 991:

*[[:Categoria:Template per le tabelle]]

[[Categoria:Aiuto sulla scrittura delle voci]]

[[Categoria:Scrittura delle voci]]

[[Categoria:Guide tecniche e glossari (aiuto)]]