Aiuto:Formattazione avanzata: differenze tra le versioni
Vai alla navigazione
Vai alla ricerca
→Tabelle
(→Errori) |
MFH (rosica | curriculum) |
||
Riga 97:
=Tabelle=
* Riferimento: '''[http://meta.wikimedia.org/wiki/Help:Table Tabelle]'''
Ogni tabella inizia con <nowiki>{|</nowiki> e finisce con <nowiki>|}</nowiki>. Al suo interno hai la possibilità di inserire una classe ({{tt|class}}) e delle impostazioni [[CSS]] ({{tt|style}}). Quello che non devi inserire invece sono i parametri {{tt|border}}, {{tt|cellpadding}}, {{tt|cellspacing}}, {{tt|width}}, {{tt|height}}, {{tt|align}} e {{tt|valign}}, se non vuoi che [[Utente:MFH|un admin incazzato]] ti banni a tempo indeterminato.
Vediamo alcuni esempi:
==Tabella a singola entrata==
{| class="stdTable" style="margin: 0.5em auto;"
!
!
!
|-
|| Silvio
|| [[Berlusconi]]
|| Psiconano
|-
|| George W.
|| Bush
|| Esportatore di [[democrazia]]
|}
Il codice è questo:
<pre><nowiki>
{| class="stdTable" style="margin: 0.5em auto;"
!
!
!
|-
|| Silvio
|| [[Berlusconi]]
|| Psiconano
|-
|| George W.
|| Bush
|| Esportatore di [[democrazia]]
|}
</nowiki></pre>
* La classe inserita ({{tt|stdTable}}) indica che la tabella verrà visualizzata con tutti i bordi delle celle e il bordo di contorno. Questa classe è probabilmente la più utile per delle tabelle standard, ma ce ne sono altre che puoi trovare in giro per il sito.
* Nella proprietà {{tt|style}}, il parametro {{tt|margin}} indica che c'è un margine di mezza riga sopra e sotto la tabella e un margine automatico a destra e a sinistra. Questo significa sostanzialmente che la tabella viene allineata al centro, per cui non c'è bisogno di scrivere {{tt|1=align="center"}}. È possibile mettere quante colonne si desiderano (tenendo conto dei limiti di larghezza delle pagine), ma bisogna ricordarsi di riempire correttamente anche le righe successive, altrimenti il risultato fa schifo.
* Se vuoi vedere le celle attaccate assieme invece che separate da un bordino bianco, scrivi subito dopo la proprietà {{tt|margin}}, rimanendo dentro le virgolette di {{tt|style}}: {{tt|border-collapse: collapse;}}.
* Le celle iniziali hanno un punto esclamativo all'inizio invece che una sbarretta verticale. Questo significa che sono delle celle che contengono un titolo (per gli esperti di [[HTML]], riconducono ai tag {{tt|<nowiki><th></nowiki>}}). Non è obbligatorio metterle, in alcune tabelle non servono titoli per le colonne.
* Le indicazioni di larghezza delle celle servono solo nella prima riga, le celle nelle righe successive saranno larghe esattamente quanto la prima cella della loro colonna.
* I caratteri {{tt|{{!}}-}} indicano l'inizio di una nuova riga. [[È]] possibile specificare un parametro {{tt|style}} dopo questi caratteri, che verrà applicato a tutta la riga successiva.
* Ogni riga inizia con i caratteri {{tt|{{!}}{{!}}}}. Come forse avrai già intuito guardando la prima riga, è possibile inserire un parametro {{tt|style}} fra le due sbarrette, che verrà applicato alla singola cella.
==Tabella a doppia entrata==
{| class="stdTable" style="margin: 0.5em auto 0.5em 0;"
|style="width: 60px;"|
!style="width: 200px;"|Nome
!style="width: 200px;"|Cognome
!style="width: 200px;"|Professione
|-
!| Idiota 1
|| Silvio
|| [[Berlusconi]]
|| Psiconano
|-
!| Idiota 2
|| George W.
|| Bush
|| Esportatore di [[democrazia]]
|}
<nowiki>
{| class="stdTable"</nowiki> {{Colore|red|2='''style="margin: 0.5em auto 0.5em 0;"'''}}
{{Colore|red|2='''{{!}}style="width: 60px;"{{!}}'''}}
!style="width: 200px;"|Nome
!style="width: 200px;"|Cognome
!style="width: 200px;"|Professione
|-
{{Colore|red|'''!{{!}} Idiota 1'''}}
|| Silvio
|| <nowiki>[[Berlusconi]]</nowiki>
|| Psiconano
|-
{{Colore|red|'''!{{!}} Idiota 2'''}}
|| George W.
|| Bush
|| Esportatore di <nowiki>[[democrazia]]</nowiki>
|}
Il codice è il medesimo, solamente che devi creare una colonna in più, che conterrà i titoli delle righe. Sì, anche le righe possono avere i titoli.
* Ho spostato la tabella a sinistra della pagina modificando la proprietà {{tt|margin}}: i valori inseriti indicano rispettivamente il margine superiore, destro, inferiore e sinistro (puoi ricordarti facilmente dell'ordine pensando a come si muovono le lancette di un orologio). Se ometti il valore del margine sinistro vale quello del margine destro, se ometti anche quello del margine inferiore vale quello del margine superiore (come nell'esempio precedente), infine se ometti anche il margine destro, tutti e quattro i margini hanno il valore del margine superiore. In questo caso ho impostato il margine sinistro a 0, in modo da evitare di dover scrivere {{tt|1=align="left"}}.
* Ho inserito una colonna in più dal titolo vuoto e dalla larghezza di 60px, ho allargato la colonna "Nome"
* Ho dato i titoli alle 2 righe
Per colore, allineamento testo e altri trucchi assolutamente inutili, consulta
===Fondere celle===
{| class="stdTable" style="margin: 0.5em auto;"
|style="width: 60px;"|
!style="width: 150px;"|Nome
!style="width: 150px;"|Cognome
!style="width: 200px;"|Professione
|-
!rowspan="2"| Idioti
|colspan="2" style="text-align: center;"| Silvio [[Berlusconi]]
|| Psiconano
|-
|| George W.
|| Bush
|| Esportatore di [[democrazia]]
|}
<nowiki>{| class="stdTable" style="margin: 0.5em auto;"
|style="width: 60px;"|
!style="width: 150px;"|Nome
!style="width: 150px;"|Cognome
!style="width: 200px;"|Professione
|-</nowiki>
!{{Colore|red|2='''rowspan="2"'''}}| Idioti
|{{Colore|red|2='''colspan="2" style="text-align: center;"'''}}| Silvio <nowiki>[[Berlusconi]]</nowiki>
|| Psiconano
|-
|| George W.
|| Bush
|| Esportatore di <nowiki>[[democrazia]]</nowiki>
|}
* La proprietà {{tt|rowspan}} indica che la cella si estende su più righe, due in questo esempio. Ricorda quindi che nelle righe successive devi inserire una cella in meno.
* La proprietà {{tt|colspan}} indica che la cella si estende su più colonne, due in questo esempio. Anche in questo caso devi ricordarti di inserire meno celle sulla riga.
=Pagine di stile (CSS)=
| |||