Differenze tra le versioni di "Template:Col"

Da Wikimedia Italia.
Jump to navigation Jump to search
(→‎Esempi: add example)
Riga 57: Riga 57:
 
{{row}}
 
{{row}}
 
{{col|1|violet}}A{{/col}}
 
{{col|1|violet}}A{{/col}}
−
{{col|1|brown }}B{{/col}}
+
{{col|1|yellow }}B{{/col}}
 
{{col|1|red  }}C{{/col}}
 
{{col|1|red  }}C{{/col}}
−
{{col|1|aqua }}D{{/col}}
+
{{col|1|blue }}D{{/col}}
 
{{col|1|green }}E{{/col}}
 
{{col|1|green }}E{{/col}}
 
{{col|1|violet}}F{{/col}}
 
{{col|1|violet}}F{{/col}}
Riga 69: Riga 69:
 
{{row}}
 
{{row}}
 
{{col|1|violet}}A{{/col}}
 
{{col|1|violet}}A{{/col}}
−
{{col|1|brown }}B{{/col}}
+
{{col|1|yellow }}B{{/col}}
 
{{col|1|red  }}C{{/col}}
 
{{col|1|red  }}C{{/col}}
−
{{col|1|aqua }}D{{/col}}
+
{{col|1|blue }}D{{/col}}
 
{{col|1|green }}E{{/col}}
 
{{col|1|green }}E{{/col}}
 
{{col|1|violet}}F{{/col}}
 
{{col|1|violet}}F{{/col}}
Riga 85: Riga 85:
 
{{row}}
 
{{row}}
 
{{col|2|violet}}A{{/col}}
 
{{col|2|violet}}A{{/col}}
−
{{col|1|brown }}B{{/col}}
+
{{col|1|yellow }}B{{/col}}
 
{{col|1|red  }}C{{/col}}
 
{{col|1|red  }}C{{/col}}
−
{{col|2|aqua }}D{{/col}}
+
{{col|2|blue }}D{{/col}}
 
{{/row}}
 
{{/row}}
 
</pre>
 
</pre>
Riga 95: Riga 95:
 
{{row}}
 
{{row}}
 
{{col|2|violet}}A{{/col}}
 
{{col|2|violet}}A{{/col}}
−
{{col|1|brown }}B{{/col}}
+
{{col|1|yellow }}B{{/col}}
 
{{col|1|red  }}C{{/col}}
 
{{col|1|red  }}C{{/col}}
−
{{col|2|aqua }}D{{/col}}
+
{{col|2|blue }}D{{/col}}
 
{{/row}}
 
{{/row}}
  
Riga 111: Riga 111:
 
{{/row}}
 
{{/row}}
 
{{row}}
 
{{row}}
−
{{col|3|brown }}B{{/col}}
+
{{col|3|yellow }}B{{/col}}
 
{{col|3|red  }}C{{/col}}
 
{{col|3|red  }}C{{/col}}
 
{{/row}}
 
{{/row}}
 
{{row}}
 
{{row}}
−
{{col|2|aqua }}D{{/col}}
+
{{col|2|blue }}D{{/col}}
 
{{col|2|green }}E{{/col}}
 
{{col|2|green }}E{{/col}}
 
{{col|2|violet}}F{{/col}}
 
{{col|2|violet}}F{{/col}}
Riga 126: Riga 126:
 
{{/row}}
 
{{/row}}
 
{{row}}
 
{{row}}
−
{{col|3|brown }}B{{/col}}
+
{{col|3|yellow }}B{{/col}}
 
{{col|3|red  }}C{{/col}}
 
{{col|3|red  }}C{{/col}}
 
{{/row}}
 
{{/row}}
 
{{row}}
 
{{row}}
−
{{col|2|aqua }}D{{/col}}
+
{{col|2|blue }}D{{/col}}
 
{{col|2|green }}E{{/col}}
 
{{col|2|green }}E{{/col}}
 
{{col|2|violet}}F{{/col}}
 
{{col|2|violet}}F{{/col}}
Riga 152: Riga 152:
  
 
{{row}}
 
{{row}}
−
{{col|3|brown }}B{{/col}}
+
{{col|3|yellow }}B{{/col}}
 
{{col|3|red  }}C{{/col}}
 
{{col|3|red  }}C{{/col}}
 
{{/row}}
 
{{/row}}
Riga 158: Riga 158:
 
D
 
D
 
{{/col}}
 
{{/col}}
−
{{col|6|brown}}
+
{{col|6|yellow}}
 
E
 
E
  
 
{{row}}
 
{{row}}
−
{{col|3|aqua }}F{{/col}}
+
{{col|3|blue }}F{{/col}}
 
{{col|3|green}}G{{/col}}
 
{{col|3|green}}G{{/col}}
 
{{/row}}
 
{{/row}}
Riga 176: Riga 176:
  
 
{{row}}
 
{{row}}
−
{{col|3|brown }}B{{/col}}
+
{{col|3|yellow }}B{{/col}}
 
{{col|3|red  }}C{{/col}}
 
{{col|3|red  }}C{{/col}}
 
{{/row}}
 
{{/row}}
Riga 182: Riga 182:
 
D
 
D
 
{{/col}}
 
{{/col}}
−
{{col|6|brown}}
+
{{col|6|yellow}}
 
E
 
E
  
 
{{row}}
 
{{row}}
−
{{col|3|aqua }}F{{/col}}
+
{{col|3|blue }}F{{/col}}
 
{{col|3|green}}G{{/col}}
 
{{col|3|green}}G{{/col}}
 
{{/row}}
 
{{/row}}
Riga 205: Riga 205:
 
{{row}}
 
{{row}}
 
{{col|6|violet}}A{{/col}}
 
{{col|6|violet}}A{{/col}}
−
{{col|6|brown }}B{{/col}}
+
{{col|6|yellow }}B{{/col}}
 
{{col|6|red  }}C{{/col}}
 
{{col|6|red  }}C{{/col}}
−
{{col|6|aqua }}D{{/col}}
+
{{col|6|blue }}D{{/col}}
 
{{col|6|green }}E{{/col}}
 
{{col|6|green }}E{{/col}}
 
{{col|1|violet}}F{{/col}}
 
{{col|1|violet}}F{{/col}}
−
{{col|1|brown }}G{{/col}}
+
{{col|1|yellow }}G{{/col}}
 
{{col|1|red  }}H{{/col}}
 
{{col|1|red  }}H{{/col}}
−
{{col|1|aqua }}I{{/col}}
+
{{col|1|blue }}I{{/col}}
 
{{col|1|green }}L{{/col}}
 
{{col|1|green }}L{{/col}}
 
{{/row}}
 
{{/row}}
Riga 221: Riga 221:
 
{{row}}
 
{{row}}
 
{{col|6|violet}}A{{/col}}
 
{{col|6|violet}}A{{/col}}
−
{{col|6|brown }}B{{/col}}
+
{{col|6|yellow}}B{{/col}}
 
{{col|6|red  }}C{{/col}}
 
{{col|6|red  }}C{{/col}}
−
{{col|6|aqua }}D{{/col}}
+
{{col|6|blue }}D{{/col}}
 
{{col|6|green }}E{{/col}}
 
{{col|6|green }}E{{/col}}
 
{{col|1|violet}}F{{/col}}
 
{{col|1|violet}}F{{/col}}
−
{{col|1|brown }}G{{/col}}
+
{{col|1|yellow }}G{{/col}}
 
{{col|1|red  }}H{{/col}}
 
{{col|1|red  }}H{{/col}}
−
{{col|1|aqua }}I{{/col}}
+
{{col|1|blue }}I{{/col}}
 
{{col|1|green }}L{{/col}}
 
{{col|1|green }}L{{/col}}
 
{{/row}}
 
{{/row}}

Versione delle 12:30, 2 mag 2022

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 a una colonna

Esempio di utilizzo base nel wikitesto: 

{{row}}
{{col|3|violet}}A{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col

Template:Col/row

Nell'esempio in alto è stata creata una riga, che contiene una colonna, largha 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|yellow }}B{{/col}}
{{col|1|red   }}C{{/col}}
{{col|1|blue  }}D{{/col}}
{{col|1|green }}E{{/col}}
{{col|1|violet}}F{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col
BTemplate:Col/col
CTemplate:Col/col
DTemplate:Col/col
ETemplate:Col/col
FTemplate:Col/col

Template:Col/row

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}}
{{col|1|yellow }}B{{/col}}
{{col|1|red   }}C{{/col}}
{{col|2|blue  }}D{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col
BTemplate:Col/col
CTemplate:Col/col
DTemplate:Col/col

Template:Col/row

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{{/col}}
{{/row}}
{{row}}
{{col|3|yellow }}B{{/col}}
{{col|3|red   }}C{{/col}}
{{/row}}
{{row}}
{{col|2|blue  }}D{{/col}}
{{col|2|green }}E{{/col}}
{{col|2|violet}}F{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col

Template:Col/row

BTemplate:Col/col
CTemplate:Col/col

Template:Col/row

DTemplate:Col/col
ETemplate:Col/col
FTemplate:Col/col

Template:Col/row

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}}
A

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

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

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

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

A

BTemplate:Col/col
CTemplate:Col/col

Template:Col/row

D Template:Col/col

E

FTemplate:Col/col
GTemplate:Col/col

Template:Col/row

H Template:Col/col Template:Col/row

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}}
{{col|6|yellow }}B{{/col}}
{{col|6|red   }}C{{/col}}
{{col|6|blue  }}D{{/col}}
{{col|6|green }}E{{/col}}
{{col|1|violet}}F{{/col}}
{{col|1|yellow }}G{{/col}}
{{col|1|red   }}H{{/col}}
{{col|1|blue  }}I{{/col}}
{{col|1|green }}L{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col
BTemplate:Col/col
CTemplate:Col/col
DTemplate:Col/col
ETemplate:Col/col
FTemplate:Col/col
GTemplate:Col/col
HTemplate:Col/col
ITemplate:Col/col
LTemplate:Col/col

Template:Col/row

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.


Estratto da "https://wiki.wikimedia.it/index.php?title=Template:Col&oldid=1213211"