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" si usa questa sintassi:

{{col|larghezza|Testo semplice visualizzato}}

Oppure:

{{col|larghezza|content = Testo avanzato visualizzato}}

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

Esempi

Esempio base a due colonne

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|3|violet|A}}
{{col|3|violet|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|violet|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|violet|A}}
{{col|1|yellow|B}}
{{col|1|red   |C}}
{{col|1|blue  |D}}
{{col|1|green |E}}
{{col|1|violet|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|violet|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|violet|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|violet|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|violet|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}}
{{col|3|green}}G{{/col}}
{{row end}}

H
}}
{{row end}}

A

B

C

D

E

FTemplate:Col/col

GTemplate:Col/col

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.

Non documentati

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|6|violet|A}}
{{col|6|yellow|B}}
{{col|6|red   |C}}
{{col|6|blue  |D}}
{{col|6|green |E}}
{{col|1|violet|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).