Differenze tra le versioni di "Template:Col"
(→Non documentati: +spiegazione) |
(→Esempi: add example) |
||
Riga 31: | Riga 31: | ||
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. | 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: | ||
+ | |||
+ | <pre> | ||
+ | {{row}} | ||
+ | {{col|3|violet}}A{{/col}} | ||
+ | {{/row}} | ||
+ | </pre> | ||
+ | |||
+ | Risultato: | ||
+ | |||
+ | {{row}} | ||
+ | {{col|3|violet}}A{{/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 base multi-colonna === |
Versione delle 12:40, 20 mar 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:
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:
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|brown }}B{{/col}} {{col|1|red }}C{{/col}} {{col|1|aqua }}D{{/col}} {{col|1|green }}E{{/col}} {{col|1|violet}}F{{/col}} {{/row}}
Risultato:
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|brown }}B{{/col}} {{col|1|red }}C{{/col}} {{col|2|aqua }}D{{/col}} {{/row}}
Risultato:
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|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:
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|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
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|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:
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.