Aiuto:Tabelle
Testo tratto da Aiuto:Tabelle su Wikipedia
In questa pagina viene spiegata la sintassi per inserire una tabella, usando il markup wiki.
Indice
Elenco tag e parametri
| {| |} |
Apertura e chiusura della tabella. Inserimento parametri (relativi all'intera tabella): {| parametri (attenzione ad inserire uno spazio prima e a separare con uno spazio i diversi parametri) |
| |- | Nuova riga nella tabella (non viene chiuso alla fine della riga) Inserimento parametri (relativi all'intera riga): |- parametri (spazi come nel caso precedente) |
| a capo e | oppure || |
Nuova cella nella riga (non viene chiuso alla fine della cella). Di seguito va inserito il contenuto della cella. È preferibile il metodo andando a capo ad ogni riga |
| ! (al posto della barra verticale) |
rende la cella un'intestazione (con testo in grassetto) |
| |+ (al posto di |- e seguito dal testo |
fa precedere la riga da un titolo non bordato, ma con le stessa larghezza della tabella |
| Parametri più usati | |
| border=n | spessore della linea di bordo (border=0 equivale a "nessun bordo") |
| cellpadding=n | margine interno delle celle (numero di pixel) |
| align=x | allineamento orizzontale della tabella rispetto allo spazio in cui è contenuta o del contenuto all'interno delle singole celle o delle celle di una riga "x" sta per "left" (a sinistra) "center" (al centro) o "right" (a destra) |
| valign=x | allineamento verticale del contenuto all'interno delle singole celle o delle celle di una riga "x" sta per "top" (in alto) "center" (al centro) o "bottom" (in basso) |
| width=n% width=npx |
larghezza dell'intera tabella o di una cella, espressa in percentuale ("%") (rispetto allo spazio disponibile per la tabella, o rispetto alla larghezza della tabella per una cella) ovvero espressa in numero di pixel ("px") |
| bgcolor="#n" bgcolor="x" |
colore di sfondo dell'intera tabella, o di una riga o di una cella, espresso con #n (dove n sta per numero esadecimale del colore: vedi Aiuto:Colori su Wikipedia), ovvero espresso con il nome in inglese del colore (per alcuni): vedi Aiuto:Tavolozza dei colori su Wikipedia. |
| colspan=n | estensione della cella su n colonne |
| rowspan=n | estensione della cella su n righe |
Tutorial
Definizione di righe e celle
Per prima cosa bisogna segnalare al software che si intende inserire una tabella. Si deve dunque aprire (e alla fine richiudere) la tabella scrivendo degli appositi comandi (tag):
- {| (parentesi graffa aperta e barra verticale) per aprire la tabella
- |} (barra verticale e parentesi graffa chiusa) per chiuderla
Nel linguaggio HTML corrispondono ai comandi <table e </table.
Tutto quanto è contenuto tra questi due tag viene interpretato dal software come parte della tabella e per questo motivo è necessario ricordarsi di chiudere il comando alla fine della tabella: in caso contrario il software interprerà anche tutto il testo successivo come parte della tabella.
L'inizio di ogni riga della tabella viene segnalato con il tag |- (barra verticale e trattino).
In questo caso non è necessario segnalare la fine della riga: la riga si chiude automaticamente all'inizio della riga successiva, ovvero alla chiusura della tabella
Nel linguaggio HTML corrisponde al comando L'inizio di ogni cella nella tabella va segnalato andando a capo e usando il comando | (seguito immediatamente dal contenuto della cella). In alternativa si può usare il comando || (sempre seguito immediatamente dal contenuto della cella), senza andare a capo. Esempio:
- |contenuto cella 1
- |contenuto cella 2
- |contenuto cella 3
oppure:
- |contenuto cella 1||contenuto cella 2||contenuto cella 3
daranno entrambi (all'interno della riga di una tabella):
| contenuto cella 1 | contenuto cella 2 | contenuto cella 3 |
Nel linguaggio HTML corrisponde ai comandi e
| Esempio di tabella a due righe e tre colonne | |||||||
| Cosa si scrive | Cosa si vede | ||||||
{|
| cella 1/1
| cella 1/2
| cella 1/3
|-
| cella 2/1
| cella 2/2
| cella 2/3
|}
|
| ||||||
Definizione di bordi, margini, dimensioni e allineamento
Bordi
Per vedere meglio la forma della tabella se ne possono tracciare i bordi. Lo spessore della linea di bordo può essere scelto a piacere. Si opera assegnando un "parametro" all'intera tabella, ossia inserendo il parametro dopo il comando di apertura (dopo uno spazio). Il comando è "border=n" dove n è il numero di pixel dello spessore della riga.
| Esempio di tabella a due righe e tre colonne con bordo spesso 5 pixel | |||||||
| Cosa si scrive | Cosa si vede | ||||||
{| border=5
| cella 1/1
| cella 1/2
| cella 1/3
|-
| cella 2/1
| cella 2/2
| cella 2/3
|}
|
| ||||||
Margini interni
Il margine tra il bordo delle celle e il testo può anch'esso essere definito, attribuendo alla tabella il parametro "cellpadding" e indicando il numero dei pixel. Da notare che i due parametri sono separati da uno spazio.
| Esempio di tabella a due righe e tre colonne con bordo spesso 1 pixel e margini interni di 20 pixel | |||||||
| Cosa si scrive | Cosa si vede | ||||||
{| border=1 cellpadding=20
| cella 1/1
| cella 1/2
| cella 1/3
|-
| cella 2/1
| cella 2/2
| cella 2/3
|}
|
| ||||||
Larghezza della tabella e delle celle
La larghezza della tabella può essere definita in termini assoluti (numero di pixel), aggiungendo il parametro "width=npx" (per esempio "width=100px" per una tabella larga 100 pixel).
| Esempio di tabella larga 100 pixel |
| Esempio di tabella larga 300 pixel |
La larghezza può anche essere definita in termini relativi (percentuale), rispetto allo spazio disponibile nella pagina. Il parametro si scrive in questo caso "width=n%" (per esempio "width=50%" indica una larghezza pari al 50% dello spazio disponibile). In questo caso le dimensioni della tabella varieranno se si allarga o si restringe la finestra del browser.
| Esempio di tabella larga il 20% dello spazio disponibile |
| Esempio di tabella larga il 50% dello spazio disponibile |
Se non si indica una dimensione prefissata la tabella si dimensionerà automaticamente in base al suo contenuto.
| Esempio di tabella dimensionata automaticamente a seconda del suo contenuto (in questo caso molto lungo) |
| Altro esempio più corto |
Lo stesso faranno le celle all'interno della tabella, cercando di fare una media tra la larghezza dei contenuti delle diverse righe, come in questo esempio di tabella a due righe e due celle per riga.
| cella dimensionata automaticamente e con contenuto molto lungo che dunque sarà più grande | cella corta |
| anche nella seconda riga il contenuto della prima cella è molto lungo, ma meno | altra cella corta |
Le dimensioni possono essere indicate anche per le singole celle, indicando il parametro della larghezza subito dopo la sbarra verticale che segna l'inizio della cella, seguito da un'altra sbarra verticale che lo separa dal contenuto (secondo la formula "|parametro|contenuto"). Anche in questo caso se si inseriscono più parametri devono essere separati da uno spazio ("|parametro1 parametro2|contenuto").
| Esempio di tabella a due righe e tre colonne con le tre colonne larghe rispettivamente il 30%, il 50% e il 20% della larghezza complessiva della tabella | |||||||
| Cosa si scrive | Cosa si vede | ||||||
{| border=1 cellpadding=5
|width=30%|cella 1/1
|width=50%|cella 1/2
|width=20%| ella 1/3
|-
|cella 2/1
|cella 2/2
|cella 2/3
|}
|
| ||||||
| Da notare che la larghezza delle celle è stata fissata solo sulla prima riga: le righe successive presenteranno le celle con la medesima larghezza della prima. | |||||||
Allineamento della tabella
È possibile definire l'allineamento della tabella all'interno della pagina, inserendo il parametro "align" tra quelli relativi all'intera tabella, collocati dopo il tag di apertura "{|" seguito da uno spazio. La tabella potrà essere allineata a sinistra (" {| align=left"), al centro (" {| align=center") o a destra (" {| align=right")
| |
| |
|
Allineamento del testo all'interno delle celle
Lo stesso parametro "align" serve ad indicare l'allineamento del testo all'interno delle celle, attribuendolo alla singola cella (per esempio: "|align=left|contenuto della cella") o all'intera riga (per esempio: "|- align=left").
| Testo all'interno di questa cella allineato a sinistra | Qui al centro | In quest'ultima cella il testo è invece allineato a destra |
| In tutte le celle | di questa riga | il testo è allineato a sinistra |
| Qui | sempre | al centro |
| Ora | sempre | a destra |
Può essere definito allo stesso modo l'allineamento verticale del testo all'interno delle celle, con i parametri "valign=top" (in alto) "valign=center" (al centro) e "valign=bottom", sia per una singola cella, sia per un'intera riga (o anche per l'intera tabella).
| In alto a sinistra | In alto al centro | In alto a destra | |
| Al centro a sinistra | Al centro nei due sensi | Al centro a destra | |
| In basso a sinistra | In basso al centro | In basso a destra |
Colore delle celle, delle righe, o delle tabelle
Le celle dell'intera tabella o di una riga, oppure ciascuna cella singolarmente, possono essere colorate. L'effetto si ottiene con il parametro "bgcolor" (abbreviazione di "background color", ovvero "colore di sfondo"). Il colore può essere definito con il suo codice esadecimale (vedi Aiuto:Colori su Wikipedia), preceduta da un cancelletto ("#"), per esempio "#000000" per il nero, ovvero con la sua denominazione standard in inglese, per esempio "black" per il nero, il medesimo colore citato prima (vedi tavolozza dei colori su Wikipedia).
| Alcuni esempi di colori con l'indicazione del parametro utilizzato | |||||||||
| Tutte | le celle | di questa | riga | sono | colorate | con il | parametro | bgcolor= | "silver" |
| bgcolor= "red" (rosso) | bgcolor= "blue" (blu) | bgcolor= "yellow" (giallo) | bgcolor= "purple" (viola) | bgcolor= "green" (verde) | bgcolor= "orange" (arancione) | bgcolor= "black" (nero) | bgcolor= "white" (bianco) | bgcolor= "grey" (grigio) | bgcolor= "maroon" (marrone) |
| bgcolor= "#000000" | bgcolor= "#FF0000" | bgcolor= "#FFFF00" | bgcolor= "#FFFFFF" | bgcolor= "#00FF00" | bgcolor= "#00FFFF" | bgcolor= "#0000FF" | bgcolor= "#FF00FF" | bgcolor= "#bc8f8f" | bgcolor= "rosybrown" |
Celle che occupano più righe o più colonne
Una cella può anche occupare più righe o più colonne. Si ottiene mettendo alla cella il parametro "colspan" per le colonne e il parametro "rowspan" per le celle e indicando quante celle in larghezza o quante righe in altezza dovrà occupare la cella. Per esempio "colspan=2" indica una cella che occupa lo spazio in larghezza di 2 celle, e "rowspan=3" una cella che occupa 3 righe in altezza.
| Cella 1 della riga 1 | Cella 2 della riga 1 | Cella 3 della riga 1 |
| Cella 1 della riga 2: siccome ha il parametro colspan=2", si estende in larghezza per lo spazio di 2 celle e occupa anche lo spazio della cella 2 della riga 2 | Cella 3 della riga 2: siccome ha il parametro "rowspan=3", si estende in altezza per lo spazio di 3 righe e occupa dunque anche la cella corrispondente nella due righe sottostanti, cioè la cella 3 della riga 3 e la cella 3 della riga 4. | |
| Cella 1 della riga 3 | Cella 2 della riga 3 | |
| Cella 1 della riga 4 | Cella 2 della riga 4 | |
Tabelle ordinabili
Aggiungendo in testa alla tabella l'istruzione class="wikitable sortable" si otterrà una tabella le cui colonne sono ordinabili in senso crescente o decrescente cliccando sui pulsanti che vi appariranno.
{| class="wikitable sortable"
! titolo !! colonna1 !! colonna2
|-
| riga1 || 6 || 4
|-
| riga2 || 5 || 4
|-
| riga3 || 4 || 1
|-
| riga4 || 3 || 3
|-
| riga5 || 2 || 2
|-
| riga6 || 1 || 5
|}
| titolo | colonna1 | colonna2 |
|---|---|---|
| riga1 | 6 | 4 |
| riga2 | 5 | 4 |
| riga3 | 4 | 1 |
| riga4 | 3 | 3 |
| riga5 | 2 | 2 |
| riga6 | 1 | 5 |
