Tabella

Diavolo Powa

Posted on 9/2/2011, 17:04

User deleted

Come e dove creare la tabella
Per generare una tabella, con grafica uguale alla skin in uso, basta accedere al pannello amministrativo, sotto la voce Gestione codice HTML > Generatore di tabelle con grafica uguale a quella del forum. (si trova in alto, prima dei box, è il terzo link)
Basta specificare il numero di righe e quello delle colonne desiderate, se desiderate o meno lo spazio per i sottotitoli per le colonne e il tipo di allineamento del testo e questo tool crea il codice HTML della tabella da inserire nel box desiderato di Gestione codice HTML.

Come modificare la tabella
Il codice fornito dal generatore presenta essenzialmente tre parti: la parte blu e la parte verde devono essere sempre presenti, integralmente, la parte rossa invece è quella relativa ai contenuti della nostra tabella, varia quindi a seconda dei parametri impostati.

TITOLO

COLONNA1

Il titolo
Per dare un titolo alla vostra tabella basta modificare la parola TITOLO a metà della parte blu, se non intendete dare un titolo alla tabella è consigliato inserire al fine di evitare possibili errori di visualizzazione.
Se volete cambiare colore o stile del titolo, siccome stiamo lavorando in html, è indicato guardare l'apposita voce nel wiki.

I contenuti
Per inserire i contenuti nella tabella bisogna modificare la parola COLONNA ? (dove ? indica il numero della colonna) sostituendola con il testo da noi scelto.

ATTENZIONE!: in HTML le righe vengono indicate con il tag <tr> e le colonne con quello <td>, è bene ricordarsi che <tr> include sempre <td> e che l'ultimo tag aperto deve obbligatoriamente essere chiuso per primo, poi a scalare tutti gli altri.
Cosa vuol dire chiudere un tag? Significa riscrivere il tag apponendo uno slash ( / ) dopo la parentesi angolare di apertura ( < )
Per cui in base a quanto sopra detto la dicitura corretta è solamente questa: <tr> <td> .. </td> </tr>

Ovviamente all'interno della riga possono essere incluse più colonne, ripetendo i tag <td> .. </td> dopo l'ultima colonna.
Esempio: <tr> <td> colonna 1 </td> <td> colonna 2 </td> </tr>

Cosa analoga nel caso la tabella presenti più righe, infatti dopo il tag di chiusura: </tr> possiamo trovare altri 'blocchi' che indicano le righe.
Esempio:
<tr> <td> colonna 1 riga 1 </td> <td> colonna 2 riga 1 </td> </tr>
<tr> <td> colonna 1 riga 2 </td> <td> colonna 2 riga 2 </td> </tr>

ATTENZIONE!: per far sì che una colonna si estenda su più colonne non basta inserire un solo <td> .. </td> bisogna aggiungere al suo interno l'attributo colspan.
Tale attributo presenta questa dicitura: <td colspan="?" > .. </td> dove ? va sostituito con il numero di colonne che intendiamo far apparire in una sola riga.
Esempio 1:

Codice:

COLSPAN SU INTERA COLONNA

COLONNA UNICA
COLONNA1	COLONNA2

Esempio 2:

COLSPAN SU UNA PARTE

COLONNA2		COLONNA3
COLONNA1	COLONNA2	COLONNA3

Nel caso in cui, invece, vogliamo unire più righe l'attributo da usare è rowspan che funziona in maniera similare al precedente, si inserisce sempre all'interno della colonna, ma in questo caso si elimina la colonna 'in più' nella riga sottostante.
Esempio 1:

Codice:

TITOLO

COLONNA1	COLONNA2	COLONNA3
COLONNA1	COLONNA2
COLONNA UNICA

Esempio 2:

Codice:

TITOLO

COLONNA SINISTRA	COLONNA CENTRALE 1	COLONNA DESTRA
	COLONNA CENTRALE 2

I sottotitoli
I sottotitoli inseriti dal generatore appaiono solo sopra alla prima fila di colonne, qualsiasi sia il numero inserito.
Nel caso sia necessario aggiungere dei sottotitoli anche nelle colonne sottostanti in codice da usare è il seguente e va inserito prima del blocco della riga:
<tr>
<td class="title">SOTTOTITOLO COLONNA 1</td>
</tr>

ATTENZIONE!: ricordatevi di inserire tante colonne del sottotitolo, quante sono le colonne della tabella, se volete estendere un sottotitolo su più colonne usate l'attributo colspan.

Esempio 1:

Codice:

TITOLO

SOTTOTITOLO COLONNA 1	SOTTOTITOLO COLONNA 2	SOTTOTITOLO COLONNA 3
COLONNA1	COLONNA2	COLONNA3
SOTTOTITOLO COLONNA 1	SOTTOTITOLO COLONNA 2	SOTTOTITOLO COLONNA 3
COLONNA1	COLONNA2	COLONNA3

Esempio 2:

Codice:

TITOLO

SOTTOTITOLO COLONNA UNICA
COLONNA UNICA
SOTTOTITOLO COLONNA 1	SOTTOTITOLO COLONNA 2	SOTTOTITOLO COLONNA 3
COLONNA1	COLONNA2	COLONNA3

Definire l'altezza o la larghezza delle celle
Basta inserire i parametri: height="??" (per l'altezza) e width="??" (per la larghezza) all'interno della colonna, al posto di ?? potete inserire sia misure in pixel che in percentuale. Visto che la community fa uso di template fluidi è consigliato usare i valori in percentuale per le larghezze, ricordate però che la somma dei valori deve restituire 100%.
Esempio:
<tr title="RIGA1">
<td class="ww" width="25%">COLONNA1</td>
<td class="aa" width="50%">COLONNA2</td>
<td class="ww" width="25%">COLONNA3</td>
</tr>

Codice:

TITOLO

COLONNA1

COLONNA2

COLONNA3

Inserire uno sfondo personalizzato
Per inserire uno sfondo personalizzato nella vostra tabella, dovete prendere il tag table prima di <tr tilte="RIGA1"> che si presenta così:
All'interno dell'attributo style, inserita la proprietà: ;background-image:url(http://..); dove al posto di http://.. va inserito l'url della vostra immagine.
Inoltre dovete togliere class="aa" e class="ww" dalle colonne della vostra tabella, ottenendo una cosa di questo tipo:

Codice:
<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0">

COLONNA1
	<table class="mback" width="100%" cellpadding="0" cellspacing="0">
	TITOLO

COLONNA1
SOTTOTITOLO COLONNA 1	SOTTOTITOLO COLONNA 2
COLONNA1	COLONNA2

Inserire una scrollbar
Per inserire una scrollbar dentro a una cella, basta inserire subito dopo <td class="??"> (dove al posto di ?? potete trovare aa o ww) questo codice:

TUTTI I CONTENUTI DELLA CELLA QUI

Se volete variare l'altezza, basta aumentare o diminuire il valore: 100px.

0 replies since 9/2/2011, 17:04 74 views