Il Generatore di tabelle con grafica uguale a quella del forum
Le tabelle sono uno degli elementi fondamentali dell' HTML, le loro applicazioni sono molteplici e sono basiliari per quanto riguarda l'impaginazione di dati di ogni genere, qui su Forumfree / Forumcommunity il tipo di tabella più utilizzato è quello con grafica uguale a quella del forum, così chiamate perchè strutturate in modo da assumere un diverso aspetto adattandosi alle varie skin che possono essere installate nei forum, queste tabelle vengono utilizzate sopratutto (inserendole negli appositi box di gestione codice HTML) come bacheche o newsboard, per contenere i banner degli affiliati, per inserire avvisi e altre comunicazioni importanti che non si vuol far sfuggire all'attenzione degli utenti in modo da garantire loro la massima visibilità (anche se le tabelle sono state ideate per l'utilizzo in Gestione codice HTML possono tranquillamente essere usate anche nei messaggi e nelle firme).
Per la realizzazione di questo tipo specializzato di tabelle, Forumfree / Forumcommunity mette a disposizione degli amministratori dei forum, all'interno del pannello amministrativo, un apposito strumento, che è il Generatore di tabelle con grafica uguale a quella del forum, per accedere a questo strumento noi dobbiamo cliccare sul link Amministrazione che troviamo a sinistra del nome del forum
una volta entrati nel nostro pannello amministrativo, nella colonna a sinistra sezione Amministrazione grafica cliccheremo sul link Gestione codice HTML
in Gestione codice, nella parte alta della pagina, avremo tre righe di link, quello che ci interessa è il link rosso nella terza riga Generatore di tabelle
cliccando sul link si aprirà una finestra pop up contenente il generatore
di cui ora passeremo ad esaminare nel dettaglio caratteristiche e opzioni, la prima cosa che vediamo è questa area di testo
dove apparirà il codice della tabella che avremo generato e che potremo copiare per poi incollarlo ovunque ci serva, subito sotto troviamo questa opzione
che ci permette di inserire nella tabella che andremo a creare, una riga di celle dati specializzata alla funzione di sottotitolo, possiamo scegliere fra tre possibilità, inserire 0 (valore di default) per non avere riga di sottotitolo, inserire 1 per avere una riga con un unico sottotitolo per tutte le colonne della tabella, oppure inserire un numero pari al numero di colonne (numero colonne) che avrà la tabella, in questo modo ogni colonna della tabella avrà il proprio sottotitolo, di seguito, in queste due caselle
inseriremo il numero di righe (casella di sinistra) e di colonne (casella di destra) che dovrà avere la nostra tabella e con questo menù a tendina
stabiliremo quale allineamento dare al materiale che inseriremo nelle celle dati, possiamo scegliere fra tre opzioni, centrato (è l'allineamento di default, ottimo per l'inserimento di immagini e valido praticamente per tutto), a sinistra (utile, ad esempio, se si voglia inserire del testo), a destra, una volta stabiliti tutti i valori desiderati non ci resta che cliccare sul pulsante Genera HTML
e nell'area di testo del generatore apparirà, già pronto per l'uso, il codice della tabella, che potremo copiare e incollare ovunque ci serva, procediamo con un esempio, settiamo il generatore con questi valori, 2 righe, 3 colonne, 3 celle di sottotitolo, allineamento centrato
clicchiamo sul pulsante Genera HTML e nell'area di testo del generatore apparirà il codice della tabella
che potremo inserire, con un semplice copia e incolla, ovunque la si voglia utilizzare (Gestione codice HTMl, messaggi, firme)
TITOLO
SOTTOTITOLO COLONNA 1
SOTTOTITOLO COLONNA 2
SOTTOTITOLO COLONNA 3
COLONNA1
COLONNA2
COLONNA3
COLONNA1
COLONNA2
COLONNA3
come potete vedere, le tabelle sono fornite di un testo esplicativo, in questa parte
HTML
<div class="mtitle">TITOLO</div>
sostituiremo al testo TITOLO il titolo che vogliamo dare alla nostra bacheca (è anche possibile inserire un'immagine), in questa riga troviamo le tre celle di sottotitolo
sostituiremo SOTTOTITOLO COLONNA 1, SOTTOTITOLO COLONNA 2, SOTTOTITOLO COLONNA 3 con i titoli (sottotitoli) che vogliamo dare alle singole colonne, le righe sottostanti (l'esempio è con la prima riga e, ovviamente, vale anche per la seconda)
contengono le celle dati in cui potremo inserire, al posto di COLONNA1, COLONNA2, COLONNA3, il nostro materiale (dati) sia esso costituito da testo, immagini, filmati, banner, eccetra.
Elementi di base sulle tabelle con grafica uguale a quella del forum
In questa sezione della guida tratteremo delle tabelle che si possono realizzare col generatore, e su come si possano personalizzare o modificare per meglio adattarle alle nostre esigenze, per gli esempi utilizzeremo una semplice tabella a due righe e tre colonne con allineamento centrale del contenuto delle celle dati, questa
come potete vedere si tratta di una struttura piuttosto complessa, costituita in realtà da tre tabelle inserite all'interno di una tabella più grande che funge da "contenitore", la definizione due righe e tre colonne si applica non alla tabella principale ma ad una di quelle interne
che è quella dove troviamo le celle dati da noi utilizzabili per l'inserimento del nostro materiale, la tabella principale e le altre due tabelle "contenute", facendo riferimento ai vari selettori presenti nel foglio di stile della skin del nostro forum forniscono invece quasi tutta la parte "con grafica uguale a quella del forum" (aspetto della tabella complessiva identico a quello di una categoria di sezioni, larghezza della tabella complessiva pari a quella delle sezioni del forum, allineamento della tabella centrale rispetto alla pagina del forum, eccetra) adattandosi automaticamente ad eventuali cambiamenti di skin senza necessità di intervento da parte nostra, passiamo ora a descrivere come utilizzare la tabella e come personalizzarla o modificarla, nella prima parte della tabella
la personalizzazione più evidente è l'inserimento di un nostro titolo (il nome che vogliamo dare alla nostra tabella) al posto del testo preinserito TITOLO, ma possiamo anche modificare la tabella con grafica uguale a quella del forum in modo che sia più stretta di quanto previsto dal foglio di stile della skin (la larghezza è stabilita da questa classe class="skin_tbl" che fa riferimento al selettore .skin_tbl del foglio di stile e adatta automaticamente la larghezza delle tabelle a quella del forum) aggiungendo in questo punto
il valore di cellspacing stabilisce la distanza fra le celle dati (il valore dato dal generatore è di 1 pixel), il valore di cellpadding stabilisce lo spazio fra le pareti delle celle dati e il loro contenuto (il valore dato dal generatore è di 4 pixel), l'attributo text-align ci dà l'allineamento del contenuto delle celle dati, può assumere i valori center (centrato), left (a sinistra), right (a destra), l'allineamento delle celle dati viene scelto quando realizziamo la tabella col generatore (tramite il menù a tendina allineamento) ma possiamo anche modificarlo sucessivamente, di seguito potete vedere la tabella di esempio realizzata con allineamento delle celle dati a sinistra (con text-align:left;)
TITOLO
COLONNA1
COLONNA2
COLONNA3
COLONNA1
COLONNA2
COLONNA3
e con allineamento a destra (con text-align:right;)
TITOLO
COLONNA1
COLONNA2
COLONNA3
COLONNA1
COLONNA2
COLONNA3
ora passiamo alla parte interna della tabella, dove le righe (i tag <tr>) e le celle dati (i tag <td>) in esse contenute
formano una griglia in cui noi possiamo inserire il nostro materiale (sostituendo il testo COLONNA1, COLONNA2, COLONNA3) sia esso costituito da testo, immagini, banner, video, elenchi, altre tabelle (praticamente la cella dati di una tabella può contenere qualsiasi altro tag HTML, per i tag HTML più comunemente utilizzati potete consultare la Guida ai tag HTML ) qui di seguito potete vedere un esempio
TITOLO
Testo in grassetto Testo in corsivo Testo sottolineato
come avete visto nell'esempio soprastante le righe e colonne (non avendo dimensioni predefinite) si adattano al materiale che inserite, nel caso vogliate regolare a vostro piacimento la larghezza delle colonne rispetto a quella della tabella basta inserire nelle celle dati della prima riga l'attributo width (larghezza) con un valore espresso in percentuale (esempio width="30%") la larghezza delle colonne è fissa in tutte le righe della tabella, nell'esempio sottostante la prima colonna occupa il 20% della larghezza della tabella, la seconda il 30% e la terza il restante 50%
un'altra "personalizzazione" che possiamo attuare è l'unire due o più celle dati a formare un'unica cella che si estenda su più colonne o su più righe, nel primo caso utilizzeremo l'attributo colspan dandogli come valore il numero di colonne occupato dalla cella, in questo esempio
TITOLO
COLONNA1
COLONNA1
COLONNA2
COLONNA3
la prima riga è costituita da un'unica cella che si estende su tutte e tre le colonne (colspan="3", l'attributo è stato aggiunto alla cella della prima colonna, le altre vanno eliminate)
nel secondo caso (celle dati su più righe) l'attributo da utilizzare è il rowspan dandogli come valore il numero di righe occupato dalla cella, in questo esempio
TITOLO
COLONNA1
COLONNA2
COLONNA3
COLONNA2
le due colonne laterali sono costituite da celle che si estendono su due righe (rowspan="3", l'attributo è stato aggiunto alle celle della prima riga, quelle della seconda vanno eliminate)
class="ww" per le colonne dispari, class="aa" per quelle pari che fa riferimento ai selettori .ww e .aa del foglio di stile della skin del vostro forum, la funzione di queste classi è dare un colore alle celle dati della tabella, in alcune skin i due selettori hanno lo stesso colore, in altre due colori diversi, ovviamente nulla vi impedisce, nel secondo caso, di realizzare comunque tabelle "monocromatiche" sostituendo le class="aa" con altrettante class="ww" o viceversa, anche se la cosa potrebbe avere effetti estetici negativi in caso di cambiamento skin, costringendovi a ripristinare la configurazione originale.
possiamo anche aggiungere alle celle dati della nostra tabella una barra di scorrimento verticale (scrollbar) inserendo questo codice
il risultato sarà questo (dopo ogni tag <br> possiamo inserire una diversa "riga" di testo, l'altezza della scrollbar, espressa in pixel, è determinata da questo attributo, height:60px, su cui si può intervenire per adattare l'altezza della scrollbar all' altezza della riga)
che, oltre a rappresentare un elemento importante nell'aspetto grafico della tabella, ne è anche la chiusura, in questa parte l'unica personalizzazione consigliabile è costituita dai due tag <br> finali, la loro funzione è quella di distanziare la tabella da eventuali codici sottostanti (tagboard, altre tabelle, eccetra, la distanza equivale a quella fra le categorie di sezioni), potete aggiungere altri <br> per aumentare questa distanza, rimuoverne uno per diminuirla oppure entrambi per eliminarla.
