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 il template {{col|larghezza}}...{{/col}} personalizzando la larghezza della colonna con un numero intero da 1 a 6. Le colonne vivono in una "riga".

Per definire una "riga" si usa il template {{row}}...{{/row}}. 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}}
{{col|3|violet}}B{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col

BTemplate:Col/col

Template:Col/row

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 multi-colonna

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|1|violet}}A{{/col}}
{{col|1|brown }}B{{/col}}
{{col|1|red   }}C{{/col}}
{{col|1|aqua  }}D{{/col}}
{{col|1|green }}E{{/col}}
{{/row}}

Risultato:

Altro esempio base

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|2|violet}}A{{/col}}
{{col|1|brown }}B{{/col}}
{{col|1|red   }}C{{/col}}
{{col|2|aqua  }}D{{/col}}
{{/row}}

Risultato:

Utilizzo multi-riga

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|6|violet}}A{{/col}}
{{/row}}
{{row}}
{{col|3|brown }}B{{/col}}
{{col|3|red   }}C{{/col}}
{{/row}}
{{row}}
{{col|2|aqua  }}D{{/col}}
{{col|2|green }}E{{/col}}
{{col|2|violet}}F{{/col}}
{{/row}}

Risultato:

Utilizzi innestati

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|6|violet}}
A

{{row}}
{{col|3|brown }}B{{/col}}
{{col|3|red   }}C{{/col}}
{{/row}}

D
{{/col}}
{{col|6|brown}}
E

{{row}}
{{col|3|aqua }}F{{/col}}
{{col|3|green}}G{{/col}}
{{/row}}

H
{{/col}}
{{/row}}

A

E

H Template:Col/col Template:Col/row

Non documentati

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|6|violet}}A{{/col}}
{{col|6|brown }}B{{/col}}
{{col|6|red   }}C{{/col}}
{{col|6|aqua  }}D{{/col}}
{{col|6|green }}E{{/col}}
{{col|1|violet}}F{{/col}}
{{col|1|brown }}G{{/col}}
{{col|1|red   }}H{{/col}}
{{col|1|aqua  }}I{{/col}}
{{col|1|green }}L{{/col}}
{{/row}}

Risultato: