Help:Tabelle

Nota: Quando modifichi questa pagina, acconsenti a pubblicare il tuo contributo con licenza CC0. Vedi le pagine di aiuto sul dominio pubblico per maggiori informazioni.

Tabelle reindirizza qui; per informazioni in merito alla struttura tabelle del database, vedi Manual:Database layout .

Nelle pagine wiki possono essere create tabelle. Come regola generale, è preferibile evitare di usare le tabelle a meno che non se ne abbia veramente bisogno. Il markup delle tabelle spesso complica la modifica delle pagine.

Sommario del markup delle tabelle nel codice wiki

{|	inizio tabella, richiesto
|+	titolo della tabella, opzionale; solo tra inizio tabella e riga tabella
|-	riga tabella, opzionale per la prima riga - il software wiki assume la prima riga
!	cella intestazione, opzionale. Celle intestazioni consecutive possono essere inserite sulla stessa riga separate da un doppio punto esclamativo (!!) oppure iniziare una nuova riga, ciascuno con il suo punto esclamativo !.
|	cella dato tabella, opzionale, Celle dato tabella consecutive possono essere inserite separate da una doppia barra verticale (||) oppure iniziare una nuova riga, ciascuna con la sua barra verticale (|).
|}	fine tabella, richiesto

• Tutti i simboli sopra devono iniziare su una nuova linea eccetto il doppio || e !! per aggiungere opzionalmente celle consecutive ad una linea. Comunque gli spazi bianchi all'inizio di una linea sono ignorati.
• Attributi HTML. Tutti i simboli, eccetto il fine tabella, supportano gli attributi HTML. Gli attributi devono essere sulla stessa linea del simbolo. Separa gli attributi con uno spazio.
  • Celle e titolo (| oppure ||, ! oppure !!, e |+) includono contenuti. Separa qualsiasi attributo dal contenuto con una barra verticale (|). Il contenuto della cella può continuare sulla stessa linea o sulla linea successiva.
  • Simboli di tabella e di riga ({| e |-) non includono direttamente i contenuti. Non aggiungere la barra verticale (|) dopo gli attributi opzionali. Se si aggiunge erroneamente una barra verticale dopo gli attributi per il segno di tabella o il segno di riga, il parser cancellerà la barra e l'attributo finale, se toccava la pipe errata!

Il contenuto può (a) continuare nel suo proprio simbolo di cella sulla stessa linea dopo qualsiasi attributo HTML opzionale, o (b) nelle linee sotto il simbolo della cella. Il contenuto che utilizza "wiki markup" che necessita inziare in una nuova linea, come elenchi, intestazioni o tavole annidate, deve trovarsi nella sua linea nuova.

• Carattere barra come contenuto Per inserire il carattere (|) in una tabella, utilizzare la scorciatoia <nowiki>|</nowiki>.

Tabella semplice

Creare una tabella con l'editor della barra strumenti

Nell'editor wikitext, posizionare il cursore nel punto in cui si desidera inserire una tabella. Poi, nella barra degli strumenti, premere "$1", quindi scegliere il pulsante $2. Then, in the toolbar, press “Avanzate”, then choose Tabella button. Si apre una finestra di dialogo.

Dalla finestra di dialogo si può scegliere se abilitare una riga di intestazione della tabella, se stilizzare la tabella con un bordo e se rendere la tabella ordinabile. Viene visualizzata un'anteprima di esempio. È possibile impostare il numero di righe e colonne necessarie. Infine, premere il tasto “Inserisci”.

Per impostazione predefinita, viene generato il seguente codice:

Codice wiki:

{| class="wikitable" style="margin:auto"
|+ Testo della didascalia
|-
! Testo del titolo !! Testo del titolo !! Testo del titolo
|-
| Testo della cella || Testo della cella || Testo della cella
|-
| Testo della cella || Testo della cella || Testo della cella
|-
| Testo della cella || Testo della cella || Testo della cella
|}

Risultato:

Testo della didascalia

Testo del titolo	Testo del titolo	Testo del titolo
Testo della cella	Testo della cella	Testo della cella
Testo della cella	Testo della cella	Testo della cella
Testo della cella	Testo della cella	Testo della cella

Sintassi minimale

La tabella che segue è priva di bordi e di una buona spaziatura ma mostra la struttura di una tabella nel più semplice markup wiki.

Digiti	Ottieni
{| |Arancia |Mela |- |Pane |Torta |- |Burro |Gelato |}	Arancia Mela Pane Torta Burro Gelato

Le celle nella stessa riga possono essere elencate su una linea separate dal || (doppia barra verticale). Se il testo nella cella deve contenere un'interruzione di linea, utilizzare invece ‎<br />.

Digiti	Ottieni
{| |Arancia||Mela||altro |- |Pane||Torta||altro |- |Burro||Gelato<br/>artigianale||altro<br/>ancora |}	Arancia Mela altro Pane Torta altro Burro Gelato altro ancora

Gli spazi extra all'interno delle celle nel markup del wiki, come nel markup del wiki qui sotto, non influiscono sulla resa effettiva della tabella.

Digiti	Ottieni
{| | Arancia || Mela || altro |- | Pane || Torta || altro |- | Burro || Gelato || altro ancora |}	Arancia Mela altro Pane Torta altro Burro Gelato altro ancora

È possibile inserire testi più lunghi o sintassi wiki più complesse anche all'interno delle celle della tabella:

Digiti

Ottieni

{| |Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | * Lorem ipsum dolor sit amet * consetetur sadipscing elitr * sed diam nonumy eirmod tempor invidunt |}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt

Intestazioni di tabella

Le intestazioni di tavola possono essere creati utilizzando il punto esclamativo ! al posto della barra verticale |". Per impostazione predefinita, le intestazioni sono in grassetto e centrate.

Digiti	Ottieni
{| ! style="text-align:left;"| Elemento ! quantità ! costo |- |Arancia |10 |7.00 |- |Pane |4 |3.00 |- |Burro |1 |5.00 |- !totale | |15.00 |}	Elemento quantità costo Arancia 10 7.00 Pane 4 3.00 Burro 1 5.00 Totale 15.00

Quando si utilizzano gli attributi, come nell'intestazione 'Elemento', si utilizza una barra verticale "|" per la separazione. Non il punto esclamativo '!'.

Titolo

Un titolo tabella può essere aggiunto in cima a qualsiasi tabella come di seguito.

Digiti	Ottieni
{| |+Cibi complementari |- |Arancia |Mela |- |Pane |Torta |- |Burro |Gelato |}	Cibi complementari Arancia Mela Pane Torta Burro Gelato

class="wikitable"

Lo stile di base (sfondo grigio chiaro, bordi, padding e allineamento a sinistra) può essere ottenuto aggiungendo class="wikitable".

Digiti	Ottieni
{| class="wikitable" |+Cibi complementari |- |Arancia |Mela |- |Pane |Torta |- |Burro |Gelato |}	Cibi complementari Arancia Mela Pane Torta Burro Gelato

Combinazione HTML di celle in colonna e fila

È possibile utilizzare attributi HTML colspan and rowspan sulle celle per layout avanzati.

Digiti	Ottieni
{| class="wikitable" !colspan="6"|Lista della spesa |- |rowspan="2"|Pane & Burro |Torta |Panini |Dolce di pasta sfoglia |colspan="2"|Croissant |- |Formaggio |colspan="2"|Gelato |Burro |Yogurt |}	Lista della spesa Pane & Burro Dolce Panini Dolce di pasta sfoglia Croissant Formaggio Gelato Burro Yogurt

Note about large tables (noresize class)

The use of the wrapping div.noresize will ensure your table is optimized for mobile and is extremely important for large tables e.g. tables with more than 4 columns or large columns. Failure to use this element will cause your content to overlap UI elements e.g. the Vector 2022 sidebar or to break mobile display. This will cause the table to have a horizontal scroll bar when the table is too big for the content.

Shopping List
Areallyreallyreallyreallylongstringwillcauseyourtableto	Pie	Buns	Danish	Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
	Cheese	Ice cream		Butter	Yogurt

Con attributi HTML

È possibile aggiungere attributi HTML alle tabelle. Per una fonte autorevole sugli attributi HTML, vedere the W3C's HTML Specification page on tables.

Attributi nelle tabelle

Posizionare gli attributi dopo l'etichetta di inizio tabella ({|) applica gli attributi all'intera tabella.

Digiti	Ottieni
{| class="wikitable" style="text-align: center; color: green;" |Arancia |Mela |12,333.00 |- |Pane |Torta |500.00 |- |Burro |Gelato |1.00 |}	Arancia Mela 12,333.00 Pane Dolce 500.00 Burro Gelato 1.00

Attributi per celle

È possibile inserire attributi su celle singole. Ad esempio, i numeri allineati a destra potrebbero facilitare la lettura.

Digiti	Ottieni
{| class="wikitable" | Arancia | Mela | style="text-align:right;" | 12,333.00 |- | Pane | Torta | style="text-align:right;" | 500.00 |- | Burro | Gelato | style="text-align:right;" | 1.00 |}	Arancia Mela 12,333.00 Pane Torta 500.00 Burro Gelato 1.00

È anche possibile usare gli attributi per una singola cella. Notare che le celle sono separate da ||, e in ogni cella l'attributo(i) e valore sono separati da |.

Digiti	Ottieni
{| class="wikitable" | Arancia || Mela || style="text-align:right;" | 12,333.00 |- | Pane || Torta || style="text-align:right;" | 500.00 |- | Burro || Gelato || style="text-align:right;" | 1.00 |}	Arancia Mela 12,333.00 Pane Torta 500.00 Burro Gelato 1.00

Attributi per riga

È anche possibile inserire attributi su righe singole.

Digiti	Ottieni
{| class="wikitable" | Arancia | Mela | style="text-align:right;"| 12,333.00 |- | Pane | Torta | style="text-align:right;"| 500.00 |- style="font-style: italic; color: green;" | Burro | Gelato | style="text-align:right;"| 1.00 |}	Arancia Mela 12,333.00 Pane Dolce 500.00 Burro Gelato 1.00

Attributi su titoli e intestazioni

Si possono aggiungere attributi al titolo e alle intestazioni come di seguito.

Digiti	Ottieni
{| class="wikitable" |+ style="caption-side:bottom; color:#e76700;"|''Integratore'' |- ! style="color:green" | Frutta ! style="color:red" | Grassi |- |Arancia |Burro |- |Pera |Torta |- |Mela |Gelato |}	Integratori Frutta Grassi Arancia Burro Pera Torta Mela Gelato

Spessore bordo

Se "border-width:" ha un solo numero, applica tale valore ai quatto lati:

Digiti	Ottieni
{|style="border-style: solid; border-width: 20px" | Ciao |}	Ciao

Se "border-width:" ha più di un numero, i quattro numeri sono per top, right, bottom, left (RICORDA l'ordine orario ↑→↓←):

Digiti	Ottieni
{|style="border-style: solid; border-width: 10px 20px 100px 0" | Ciao |}	Ciao

Quando ci sono meno di 4 valori :

• tre valori, cioè top, right, bottom: allora il valore predefinito di left è quello di right (secondo valore). La larghezza è quindi la stessa a sinistra e a destra.
• due valori, cioè top, right: allora il valore predefinito di bottom è quello di top (primo valore) e a left viene assegnato per default il valore di right (secondo valore). La larghezza in alto è quindi la stessa di quella in basso; la larghezza a sinistra è la stessa di quella a destra.
• un valore, cioè top: allora il valore predefinito di right è quello di top e lo stesso vale per bottom e left. La quarta larghezza è la stessa e crea un bordo regolare. Questa è una scorciatoia di scrittura.

Un altro metodo per definire la larghezza dei quattro lati di una cella è utilizzare"border-left", "border-right", "border-top" e "border-bottom":

Digiti	Ottieni
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" | Ciao |}	Ciao

Gli attributi HTML (come in "width=", "border=", "cellspacing=", "cellpadding=") non hanno bisogno di unità di misura. (si assume il pixel come unità). Non sono necessari nemmeno con HTML 5.

"Cellpadding" serve a impostare lo spazio tra il bordo e il contenuto della cella.

Le proprietà degli stili CSS (che annullano gli attributi HTML) richiedono un'unità di misura specifica (se il valore non è zero) come px per indicare pixel.

Con attributi HTML e CSS

È possibile aggiungere attributi CSS alle tabelle, con o senza HTML.

Digiti	Ottieni
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10" |Arancia |Mela |- |Pane |Torta |- |Burro |Gelato |}	Arancia Mela Pane Torta Burro Gelato

Spaziatura interna

It represents the internal margin between the contents and the border of the cell.

Digiti	Ottieni
{|class=wikitable | style="padding: 10px" | Esempio di style="padding:10px" |- | style="padding: 50px" | Esempio di style="padding:50px"<br/><br/>Specificare il padding su '''OGNI CELLA''' |- | style="padding:100px" | Esempio di style="padding:100px" |}	Esempio di style="padding:10px" Esempio di style="padding:50px" Specificare il padding su OGNI CELLA Esempio di style="padding:100px"

Larghezza colonna

La larghezza colonna può essere aggiunta come di seguito.

Digiti:

{| class="wikitable" style="width: 85%;"
| colspan="2" | Questa larghezza colonna è l'85% della larghezza schermo
|-
| style="width: 30%"| '''Questa colonna è il 30% calcolato sull'85% della larghezza dello schermo'''
| style="width: 70%"| '''Questa colonna è il 70% calcolato sull'85% della larghezza dello schermo'''
|}

Ottieni

Questa larghezza colonna è l'85% della larghezza schermo
Questa colonna è il 30% calcolato sull'85% della larghezza dello schermo	Questa colonna è il 70% calcolato sull'85% della larghezza dello schermo

Accessibilità delle celle di intestazione

Le celle di intestazione della tabella non specificano esplicitamente a quali celle dati della tabella si applicano (quelle alla loro destra sulla stessa riga o quelle sotto di loro sulla stessa colonna). Quando la tabella è resa in un ambiente visivo 2D, questo è solitamente facile da dedurre.

Tuttavia, quando le tabelle vengono rese su supporti non visivi, è possibile aiutare il browser a determinare quale cella dell'intestazione della tabella si applica alla descrizione di qualsiasi cella selezionata (per poterne ripetere il contenuto ad ausili all'accessibilità) utilizzando un attributo scope="row" o scope="col" sulle celle intestazione della tabella. Nella maggior parte dei casi, con tabelle semplici, si utilizzerà scope="col" per tutte le celle di intestazione della prima riga e scope="row" per la prima cella delle righe successive:

Digiti	Ottieni
{| class="wikitable" |- ! scope="col"| Elemento ! scope="col"| Quantità ! scope="col"| Prezzo |- ! scope="row"| Pane | 0.3 kg | $0.65 |- ! scope="row"| Burro | 0.125 kg | $1.25 |- ! scope="row" colspan="2"| Totale | $1.90 |}	Elemento Quantità Prezzo Pane 0.3 kg $0.65 Burro 0.125 kg $1.25 Totale $1.90

Allineamento

Allineamento tabella

L'allineamento della tabella è ottenuta tramite il CSS. L'allineamento della tabella è controllata dai margini. Un margine fisso su un lato renderà la tabella allineata a quel lato, se sul lato opposto il margine è definito come auto. Per avere una tabella centrata, si devono impostare entrambi i margini su auto

Per esempio, una tabella allineata a destra:

Digiti	Ottieni
{| class="wikitable" style="margin-left: auto; margin-right: 0px;" | Arancia | Mela |- | Pane | Torta |- | Burro | Gelato |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.	Arancia Mela Pane Torta Burro Gelato Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

E una tabella centrata:

Digiti	Ottieni
{| class="wikitable" style="margin: auto;" | Arancia | Mela |- | Pane | Torta |- | Burro | Gelato |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.	Arancia Mela Pane Dolce Burro Gelato Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tabella fluttuante intorno al testo

Se si allinea una tabella a destra o a sinistra della pagina, il testo che viene dopo la tabella inizia alla fine della stessa, lasciando uno spazio vuoto intorno alla tabella. È possibile fare in modo che il testo venga avvolto dalla tabella, facendo in modo che la tabella fluttui attorno al testo invece di allinearlo. Questo può essere ottenuto utilizzando l'attributo CSS float, che può specificare se la tabella fluttua a destra o a sinistra. Quando si utilizza float, i margini non controllano l'allineamento della tabella e possono essere usati per specificare il margine tra la tabella e il testo circostante.

Digiti

Ottieni

{| class="wikitable" style="float:right; margin-left: 10px;" | Arancia | Mela |- | Pane | Torta |- | Burro | Gelato |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Arancia Mela Pane Torta Burro Gelato Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Allineamento dei contenuti della cella

L'allineamento del contenuto di una cella può essere controllato con 2 differenti proprietà del CSS: text-align e vertical-align. text-align può essere specificato per la tabella, riga o cella singola, mentre vertical-align può essere specificate solo per righe o celle singole.

Digiti

Ottieni

{| class="wikitable" |- style="vertical-align:top;" | style="height:100px; width:100px; text-align:left;" | A | style="height:100px; width:100px; text-align:center;" | B | style="height:100px; width:100px; text-align:right;" | C |- style="vertical-align:middle;" | style="height:100px; width:100px; text-align:left;" | D | style="height:100px; width:100px; text-align:center;" | E | style="height:100px; width:100px; text-align:right;" | F |- style="vertical-align:bottom;" | style="height:100px; width:100px; text-align:left;" | G | style="height:100px; width:100px; text-align:center;" | H | style="height:100px; width:100px; text-align:right;" | I |}

A B C D E F G H I

Avvertenze

Numeri negativi

I numeri negativi possono interrompere la tabella. Se vuoi iniziare la cella con un numero negativo (|-6), devi lasciare uno spazio (| -6) o usare la doppia linea (||-6) per una corretta visualizzazione.

CSS rispetto ad attributi

I bordi delle tabelle specificati tramite i CSS anziché l'attributo border vengono restituiti in modo errato in un piccolo sottoinsieme di browser di testo.

Attributi comuni per colonne, gruppi di colonna e gruppi di riga

La sintassi di MediaWiki per le tabelle non offre attualmente alcun supporto per specificare attributi comuni per le colonne (con l'elemento HTML ‎<col />), gruppi colonna (elemento HTML ‎<colgroup>‎</colgroup>) e gruppi riga (elementi HTML ‎<thead>‎</thead>, ‎<tbody>‎</tbody> and ‎<tfoot>‎</tfoot>). Questi elementi HTML standard non sono accettati nemmeno nella loro sintassi HTML o XHTML.

Tutte le righe e le celle (intestazione o dati) della tabella sono rese all'interno di un singolo gruppo implicito di righe (elemento HTML ‎<tbody>‎</tbody>) senza attributi o stili.

Tabelle e il Visual Editor (VE)

Vedi anche: Aiuto:VisualEditor/Guida utente

Vedere Phab: T108245: "Fully support basic table editing in the visual editor". Vedere l'elenco dei compiti. I compiti completati sono barrati. Può essere difficile capire dal linguaggio tecnico che cosa è stato migliorato esattamente o quali funzioni sono state aggiunte. Si prega di aggiungere informazioni esplicative qui sotto.

Spostare o cancellare colonne e righe

Fare clic su una intestazione di colonna o di riga. Quindi fare clic sulla freccia. Dal menu popup fare clic su "Sposta" o "Cancella".

Inserire una riga o una colonna vuota

Dallo stesso menu popup è possibile fare clic su "Inserisci".

Copiare una tabella da una pagina web a Visual Editor

È possibile copiare e incollare una tabella da una pagina web direttamente in Visual Editor (VE). Per farlo in modo sicuro, utilizzare una sandbox e verificare che la tabella sia codificata correttamente in modalità sorgente wikitesto e visualizzata correttamente in Visual Editor e in modalità anteprima.

Strumenti utili

• Excel2Wiki permette di copiare un foglio di stile da Excel, Apache OpenOffice, LibreOffice o Gnumeric per convertirlo in una tabella wikicode.

Vedi anche

• Sorting rows of a table
• w:Help:Tables

• Uno strumento visuale che aiuta a generare tabelle