From IF Italia - Il Wiki della Interactive Fiction Italiana

PmWikiMan: Tabelle

Introduzione alle tabelle

PmWiki accetta due tipi di markup per creare tabelle. Il markup descritto in questa pagina serve a creare tabelle con molte celle di piccole dimensioni; le direttive per tabelle, invece, sono utili per tabelle di grandi dimensioni.

Per creare una tabella si usano due barre verticali: ||. Le linee che iniziano con questo markup indicano righe di una tabella; all’interno di tali linee, le due barre verticali sono utilizzate per delimitare le celle. Negli esempi che seguono è aggiunto un bordo per mostrare meglio l’effetto (di default non viene disegnato nessun bordo).

Tabella base
|| border=1
|| cella 1 || cella 2 || cella 3 ||
|| cella 1 || cella 2 || cella 3 ||
cella 1cella 2cella 3
cella 1cella 2cella 3

È possibile creare celle di intestazione, inserendo ! come primo carattere nel testo della cella. Esiste un solo livello di intestazione per tabelle, quindi non ha senso usare !!, !!! ecc.

Intestazione tabella
|| border=1
||! cella 1 ||! cella 2 ||! cella 3 ||
|| cella 1  ||  cella 2 ||  cella 3 ||
cella 1cella 2cella 3
cella 1cella 2cella 3

Una tabella può avere una didascalia, indicata così: ||!didascalia!||. Le didascalie devono essere inserite prima delle righe della tabella.

Didascalie tabelle
|| border=1
||! Una tabella speciale !||
||! cella 1 ||! cella 2 ||! cella 3 ||
|| cella 1  ||  cella 2 ||  cella 3 ||
Una tabella speciale
cella 1cella 2cella 3
cella 1cella 2cella 3

Formattazione del contenuto

Il contenuto delle celle può essere allineato a sinistra, al centro o a destra.

Allineamento celle
|| border=1 width=100%
||!cella 1      ||! cella 2  ||!       cella 3||
||sinistra || centro || destra||
cella 1cella 2cella 3
sinistracentrodestra
Allineamento di default
|| border=1 width=100%
||!default||!sinistra ||
||default||sinistra ||
defaultsinistra
defaultsinistra

Si noti che l’allineamento di default è diverso per le celle di intestazione.

Per far sì che una cella comprenda più colonne, farla seguire da celle vuote. (Attualmente non è possibile che una cella comprenda più righe).

Colonne multiple
|| border=1 width=100%
|| |||| colonna destra ||
|| || colonna centrale ||||
|| colonna sinistra ||||||
|| colonna sinistra || colonna centrale || colonna destra ||
 colonna destra
 colonna centrale
colonna sinistra
colonna sinistracolonna centralecolonna destra

Attributi delle tabelle

Una linea che inizi per || e non sia chiusa da altre || imposta gli attributi per tutte le tabelle che seguono. Questi attributi possono controllare la dimensione e la posizione della tabella, i bordi, il colore di sfondo e la spaziatura tra le celle. (Di fatto, questi sono solo attributi HTML standard che vengono inseriti nel tag <table>).

L’attributo width= imposta la larghezza di una tabella, che può essere specificata con un valore percentuale, una dimensione assoluta oppure *.

Larghezza tabella
|| border=1 width=100% 
|| cella 1 || cella 2 || cella 3 ||
|| c1 || cellacellacellacella2 || cella 3 ||
cella 1cella 2cella 3
c1cellacellacellacella2cella 3

L’attributo border= definisce la dimensione dei bordi di una tabella.

Tabella con bordi
|| border=10 width=70%
||!cella 1      ||! cella 2  ||!      
cella 3||
||sinistra || centro || destra||
cella 1cella 2cella 3
sinistracentrodestra
Tabella senza bordi
|| border=0 width=70%
||!cella 1      ||! cella 2  ||!      
cella 3||
||sinistra || centro || destra||
cella 1cella 2cella 3
sinistracentrodestra

Gli attributi align=center, align=left e align=right allineano la tabella rispettivamente al centro, a sinistra e a destra. Si noti che align=left e align=right creano una tabella flottante, tale che il testo le scorra intorno.

Allineamento tabella: centro
|| border=1 align=center width=70%
||!cella 1      ||! cella 2  ||!      
cella 3||
||sinistra || centro || destra||
Si noti come il testo non scorra intorno
a una tabella allineata al centro.
cella 1cella 2cella 3
sinistracentrodestra

Si noti come il testo non scorra intorno a una tabella allineata al centro.

Allineamento tabella: sinistra
|| border=1 align=left width=70%
||!cella 1      ||! cella 2  ||!      
cella 3||
||sinistra || centro || destra||
Si noti come il testo scorra intorno a
una tabella allineata a sinistra.
cella 1cella 2cella 3
sinistracentrodestra

Si noti come il testo scorra intorno a una tabella allineata a sinistra.

Allineamento tabella: destra
|| border=1 align=right width=70%
||!cella 1      ||! cella 2  ||!      
cella 3||
||sinistra || centro || destra||
Si noti come il testo scorra intorno a
una tabella allineata a destra.
cella 1cella 2cella 3
sinistracentrodestra

Si noti come il testo scorra intorno a una tabella allineata a destra.

Nota: per far sì che una tabella sia allineata a sinistra, senza essere “flottante”, bisogna usare attributi CSS, come

||style="margin-left:0px;"

L’attributo bgcolor= imposta il colore di sfondo per una tabella.

|| border=1 align=center bgcolor=yellow
width=70%
||!cella 1    ||! cella 2 ||!     cella
3||
||sinistra || centro  || destra||
cella 1cella 2cella 3
sinistracentrodestra

Altri esempi

Una tabella più complessa
%define=sp padding-right:1em font-weight:bold%
|| border=1
|| [++Calendario eventi++] ||||||||||
|| '''Maggio 2005''' || '''Giugno 2005''' || '''Luglio 2005''' || '''Agosto
2005''' || '''Settembre 2005''' ||
||%sp%'''10'''%%6:30 - 8:30 Grande riunione\\\
%sp%'''17'''%%7:00 - 8:30 Riunione più grande\\\
%sp%'''24'''%%7:00 - 8:30 Riunione grandissima|| || || || ||
|| '''Ottobre 2005''' || '''Novembre 2005''' || '''Dicembre 2005''' ||
'''Gennaio 2006''' || '''Febbraio 2006''' ||
|| || || || || ||
Calendario eventi
Maggio 2005Giugno 2005Luglio 2005Agosto 2005Settembre 2005
106:30 - 8:30 Grande riunione

177:00 - 8:30 Riunione più grande

247:00 - 8:30 Riunione grandissima
    
Ottobre 2005Novembre 2005Dicembre 2005Gennaio 2006Febbraio 2006
     

Q Come faccio a creare una tabella semplice?

Le tabelle si creano con due barre verticali: ||. Le linee che iniziano con questo markup indicano righe della tabella; all’interno di queste linee, altre doppie barre verticali delimitano le celle. Negli esempi che seguono è aggiunto un bordo, che di default non verrebbe mostrato..

Tabella semplice
|| border=1 rules=rows frame=hsides
|| cella 1 || cella 2 || cella 3 ||
|| cella 1 || cella 2 || cella 3 ||
cella 1cella 2cella 3
cella 1cella 2cella 3

Q Come faccio a inserire intestazioni?

Le celle di intestazione si creano inserendo un ! come primo carattere. Si noti che !!, !!! ecc. non funzionano.

Intestazioni tabelle
|| border=1 rules=cols frame=vsides
||! cella 1 ||! cella 2 ||! cella 3 ||
|| cella 1  ||  cella 2 ||  cella 3 ||
cella 1cella 2cella 3
cella 1cella 2cella 3

Q Come faccio a creare una tabella più complessa?

Vedi direttive per tabelle.

Q Le mie tabelle vengono centrate di default. Se provo a usare ‘||align=left’ esse non si allineano come vorrei.

Probabilmente stai usando Firefox. Usa ||style=“margin-left:0px;”.

Q Come faccio a specificare la larghezza delle colonne?

Al momento non c’è un modo per farlo con il markup di base. Sono necessarie le direttive per tabelle.

Q Come faccio per mostrare due barre verticali “||” all’interno di una cella?

Usa &#124;&#124; per mostrare || come caratteri speciali.

Retrieved from http://ifitalia.oldgamesitalia.net/pmwiki/pmwiki.php?n=PmWikiMan.Tablesit
Page last modified on March 06, 2010 at 02:19