Template:Col

Il template {{col}} permette di disporre i contenuti in una griglia, assegnandoli in determinate colonne.

Rispetto ad una tabella tradizionale, questo sistema viene solitamente adottato nel web design per poter creare vari layout creativi e adattabili sia per desktop che mobile.

Funzionamento generale

Per definire una "colonna" che contenga del semplice testo, puoi usare questa sintassi:

{{row}}
{{col|larghezza|colore|Testo semplice visualizzato}}
{{row end}}

Oppure per definire una colonna che potrebbe contenere qualche carattere speciale (come l'uguale):

{{row}}
{{col|larghezza|colore|content = Testo avanzato visualizzato}}
{{row end}}

Puoi personalizzare la larghezza della colonna con un numero intero da 1 a 6. Le colonne vivono in una "riga".

Per definire una di queste "righe", si usa il template {{row}}...{{row end}}. Una riga può contenere varie colonne per un massimo di 6 slot (ad esempio: una colonna da 6, oppure sei piccole colonne da 1, etc.).

Importante

La versione con "Testo semplice" non è raccomandata per testi lunghi o strutture complesse.

Notare che i colori sono al momento limitati a questi:

transparent primary medium-primary light-primary white black dark-grey medium-grey light-grey extra-light-grey

red blue green pink orange yellow purple teal aqua beige turquoise

light-red light-blue light-green light-pink light-orange light-yellow light-purple light-teal light-aqua light-beige light-turquoise

Esempi

Esempio base a due colonne

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|3|purple|A}}
{{col|3|yellow|B}}
{{row end}}

Risultato:

A

B

Nell'esempio in alto è stata creata una riga, che contiene due colonne, entrambi larghe 3 slot. Si ricorda che la riga supporta massimo 6 slot.

Esempio base a una colonna

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|3|purple|A}}
{{row end}}

Risultato:

A

Nell'esempio in alto è stata creata una riga, che contiene una colonna, larga 3 slot. Si ricorda che la riga supporta massimo 6 slot.

Esempio base multi-colonna

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|1|purple|A}}
{{col|1|yellow|B}}
{{col|1|red   |C}}
{{col|1|blue  |D}}
{{col|1|green |E}}
{{col|1|purple|F}}
{{row end}}

Risultato:

A

B

C

D

E

F

Nell'esempio in alto è stata creata una riga, che contiene sei colonne, tutte larghe 1 slot. Si ricorda che la riga supporta massimo 6 slot.

Altro esempio base

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|2|purple|A}}
{{col|1|yellow|B}}
{{col|1|red   |C}}
{{col|2|blue  |D}}
{{row end}}

Risultato:

A

B

C

D

Nell'esempio in alto è stata creata una riga, che contiene due colonne laterali da 2 slot, e due colonne centrali da 1 slot. Si ricorda che la riga supporta massimo 6 slot.

Utilizzo multi-riga

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|6|purple|A}}
{{row end}}
{{row}}
{{col|3|yellow|B}}
{{col|3|red   |C}}
{{row end}}
{{row}}
{{col|2|blue  |D}}
{{col|2|green |E}}
{{col|2|purple|F}}
{{row end}}

Risultato:

A

B

C

D

E

F

Nell'esempio in alto sono state create tre righe:

• la prima riga ha una sola colonna da 6 slot (totale slot: 6)
• la seconda riga ha due colonne da 3 slot (totale slot: 6)
• la terza riga ha tre colonne da 2 slot (totale slot: 6)

Si ricorda che la riga supporta massimo 6 slot.

Utilizzi innestati

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|6|purple|content=
A

{{row}}
{{col|3|yellow|B}}
{{col|3|red   |C}}
{{row end}}

D
}}
{{col|6|yellow|content=
E

{{row}}
{{col|3|blue |F}}
{{col|3|green|G}}
{{row end}}

H
}}
{{row end}}

A

B

C

D

E

F

G

H

Nell'esempio in alto è stata creata una sola riga genitore che contiene direttamente solo due colonne. Al loro interno, queste due colonne contengono a loro volta del desto libero, un'altra riga con due colonne, e altro testo libero.

Nota: il testo libero non ha senso direttamente dentro ad una riga. Nell'esempio in alto infatti, ogni testo è direttamente inserito in una colonna.

Esempio di utilizzo base nel wikitesto con l'uso del parametro nopadding=, a sinistra con sfondo viola e a destra con sfondo trasparente:

{{row}}
{{col|6|purple|nopadding=1|content=
A

{{row}}
{{col|3|yellow|B}}
{{col|3|red   |C}}
{{row end}}

D
}}
{{col|6|transparent|nopadding=1|content=
E

{{row}}
{{col|3|blue |F}}
{{col|3|green|G}}
{{row end}}

H
}}
{{row end}}

A

B

C

D

E

F

G

H

Utilizzi con immagini

Per le immagini c'è un template dedicato chiamato {{Col immagine}} che si invita ad approfondire, ma in breve si usa così:

{{row}}
{{col         |3|purple|content=Lorem ipsum}}
{{col immagine|2|Mountains of Wadi Shawka denoised.jpg}}
{{col         |1|blue  |content=Lorem ipsum}}
{{row end}}

Risultato:

Lorem ipsum

Lorem ipsum

Non documentati

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|6|purple|A}}
{{col|6|yellow|B}}
{{col|6|red   |C}}
{{col|6|blue  |D}}
{{col|6|green |E}}
{{col|1|purple|F}}
{{col|1|yellow|G}}
{{col|1|red   |H}}
{{col|1|blue  |I}}
{{col|1|green |L}}
{{row end}}

Risultato:

A

B

C

D

E

F

G

H

I

L

Nell'esempio soprastante è stata creata una sola riga che contiene diverse colonne. Le colonne sono troppe, occupano circa 35 slot mentre si ricorda che ogni riga dovrebbe avere massimo 6 slot.

Si raccomanda di non fare affidamento su questo comportamento perché potrebbe avere risultati imprevisti in futuro.

Risoluzione dei problemi

Il template non funziona correttamente

Verifica di aver rispettato tutte le regole di questo manuale. Analizza attentamente gli esempi e confrontali con il tuo codice.

Non ho sbagliato nulla ma il template non funziona correttamente

Prova ad utilizzare la versione avanzata, non quella semplice (quindi specificando il parametro content nella colonna).

Template correlati

• {{row}}
• {{Row-empty}}
• {{row end}}
• {{col immagine}} - per inserire un box contenente solo un'immagine