ForumCommunity

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.

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:


Esempio 2:




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:

Esempio 2:


Codice:

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:

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:

Esempio 2:


Codice:

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:


Anteprima:


Codice:

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:


Esempio:


Codice:


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:

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

Voce correlata

• Guida ai principali tag HTML