|?|Formattazione nelle tabelle||
||##Passo fisso##||//Corsivo//||**Grassetto**||__Sottolineato__||
||''Evidenziato''||++Sbarrato++||(x:2)**//Corsivo e grassetto//**||
Puoi utilizzare qualsiasi formattazione di base per il testo all'interno delle tabelle.
Ecco degli esempi di formattazione del testo nelle celle:
Formattazione nelle tabelle
| Passo fisso | Corsivo | Grassetto | Sottolineato |
| Evidenziato | Sbarrato | Corsivo e grassetto |
|?|Utilizzare le azioni nelle tabelle||
||Questo wiki contiene {{countpages}} pagine||
||{{image url="images/wikka_logo.jpg" class="center" alt="a w" title="w image"}}||
||{{color c="red" text="Testo colorato"}}||
Semplicemente le azioni possono essere inserite all'interno delle celle:
Utilizzare le azioni nelle tabelle
| Questo wiki contiene 2166 pagine |
 |
| Testo colorato |
|?|Aggiungere collegamenti nelle tabelle||
||Camelcase||SandBox||
||Camelcase //bloccato//||""SandBox bloccato""||
||//Forzati//||[[HomePage Pagina principale]]||
||//Interwiki//||Wikipedia:Wikka||
||//Interwiki forzati//||[[Wikipedia:Wikka Articolo di Wikipedia su Wikka]]||
||//Esterni//||http://www.w3.org ||
||//Esterni forzati//||[[http://www.w3.org W3C]]||
||Nelle immagini||{{image url="images/wizard.gif" alt="wizard" title="Visualizza l'indice delle pagine di questo wiki" link="PageIndex"}}||
Tutte le opzioni per creare collegamenti possono essere utilizzate nelle celle delle tabelle:
|?|Incorporare HTML nelle tabelle||
||Qualcosa in alto, apice||x""a<sup>2+1</sup>""||
||Qualcosa in basso, pedice||x""a<sub>2k</sub>""||
||Acronimo...||""<acronym title="What You See Is What You Get">WYSIWYG</acronym>""||
Puoi incorporare codice HTML nelle tabelle:
Incorporare HTML nelle tabelle
| Qualcosa in alto, apice | xa2+1 |
| Qualcosa in basso, pedice | xa2k |
| Acronimo... | WYSIWYG |
||{opzioni di stile}Contenuto dell'elemento||
Le opzioni di stile CSS possono essere aggiunte a qualsiasi elemento racchiudendole tra parentesi graffe giusto prima del contenuto dell'elemento.
||{background-color:red; color:white}Ciao mondo!||
Per esempio, per colorare la cella di rosso e il testo di bianco puoi fare:
|?|Aggiungere più stile||
||{font-size:190%; text-align:right}Per favore scalami!||
||{font-size:170%; text-align:right}Per favore scalami!||
||{font-size:150%; text-align:right}Per favore scalami!||
||{font-size:130%; text-align:right}Per favore scalami!||
||{font-size:110%; text-align:right}Per favore scalami!||
||{font-size:90%; text-align:right}Per favore scalami!||
||{font-size:70%; text-align:right}Per favore scalami!||
Puoi sperimentare con la dimensione e l'allineamento del testo:
Aggiungere più stile
| Per favore scalami! |
| Per favore scalami! |
| Per favore scalami! |
| Per favore scalami! |
| Per favore scalami! |
| Per favore scalami! |
| Per favore scalami! |
|?|{border:1px dotted red; color:red}Lo stile va ovunque...||
|=|{color:#000; font-size:150%; font-style:italic; font-family:Georgia, Hoefler Text, Georgia, serif; font-weight:normal; line-height:150%}Emphemeral Quibus|=|
||Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor auctor pede.||
Lo stile può essere applicato anche alle intestazioni e alle etichette:
Lo stile va ovunque...
| Emphemeral Quibus |
|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor auctor pede. |
|?|Attento alla priorità||
||(x:2;y:2){background-color:pink}2x2||(x:2){background-color:lightblue}2x1||(y:2){background-color:lightyellow}1x2||
||(y:2){background-color:lightyellow}1x2||{background-color:#333;color:white}1x1||
||{background-color:lightblue}1x1||{background-color:#333;color:white}1x1||(x:2){background-color:pink}2x1||
Osserva che i parametri di stile devono seguire sempre i parametri dell'elemento:
Attento alla priorità
| 2x2 | 2x1 | 1x2 |
| 1x2 | 1x1 |
| 1x1 | 1x1 | 2x1 |
A qualsiasi elemento puoi applicare le classi di stile esistenti nel tuo foglio di stile utilizzando il parametro
(c:classe).
Osserva che le dichiarazioni di stile specificate con i tag sovrascrivono gli attributi di classe.
|?|Utilizzare selettori di classe||
||(c:highlight)Questa cella utilizza la classe **.highlight**||
||(c:smaller)Questa cella utilizza la classe **.smaller**||
||(c:smaller){font-size:150%}Questa cella utilizza la classe **.smaller** sovrascritta da impostazioni di stile personalizzate||
L'esempio seguente applica alla tabella due selettori di classe definiti nel foglio di stile.
La terza riga mostra come sovrascrivere un selettore di classe con attributi di stile personalizzati:
Utilizzare selettori di classe
| Questa cella utilizza la classe .highlight |
| Questa cella utilizza la classe .smaller |
| Questa cella utilizza la classe .smaller sovrascritta da impostazioni di stile personalizzate |
|!|{border:3px solid blue; background-color: black; color: white; width: 300px; text-align: center}||
||Cella 1||
||Cella 2||
||Cella 3||
Attributi per tutta la tabella possono essere aggiunti all'inizio della tabella con l'elemento:
|!| ||, che viene utilizzato come un contenitore di attributi.
Per esempio...:
|!|(i:tabella)||
|?|Utilizzo di id per riferirsi agli elementi di una tabella||
||(i:cella_1)Questa cella può essere raggiunta con l'id **cella_1**||
||(i:cella_2)Questa cella può essere raggiunta con l'id **cella_2**||
Gli attributi
id si utilizzano per poter fare riferimento a elementi unici nella pagina e fornire ancore per lo stile o i collegamenti.
Puoi specificare un
id per qualsiasi elemento nella tabella utilizzando il parametro
(i:id).
Per esempio, il codice seguente crea una tabella con id
tabella contenente due celle con id
cella_1 e
cella_2:
Utilizzo di id per riferirsi agli elementi di una tabella
| Questa cella può essere raggiunta con l'id cella_1 |
| Questa cella può essere raggiunta con l'id cella_2 |
