PER TABELLE....

I PRIMI RUDIMENTI SULLE TABELLE

Beh...tutti sappiamo come creare una tabella normale.....basta andare in amministrazione--->gestisci codici html--->genera tabella con grafica uguale al forum e,inserendo il numero di colonne e righe,avremo la nostra tabella. Unica pecca è che è una semplicissima tabella...e se vogliamo qualcosa di più originale e complesso?o inserire dei sottotitoli? questo vi verrà spiegato in questo tutorial.
Innanzitutto diciamo che ci sono due parti che devono essere sempre presenti nelle nostre tabelle:la parte di apertura e la parte di chiusura e sono poste rispettivamente all'inizio e alla fine del codice. In mezzo possiamo inserire le varie celle.

Parte di apertura:


Dove c'è scritto "TITOLO" mettiamo appunto il titolo della nostra tabella

Parte di chiusura:


Nel mezzo tra un codice e l'altro vi sarà il codice delle celle,questo è il codice per una sola riga e una sola colonna:



Se vogliamo aggiungere più righe basterà aggiungere un <td class.... per ogni colonna in più che vorrete....se per esempio ne vorremo due il codice sarà:



DUE COSE IMPORTANTI:
1) RICORDATEVI SEMPRE D'INSERIRE LE COLONNE IN PIU' TRA IL TAG <tr> E LA SUA CHIUSURA </tr>
2)ALTERNATE SEMPRE WW E WW(COME HO FATTO IO,questo però servirà solo ad alternare i colori nel caso nel css della skin i colori di .aa e .ww siano diversi)

Una dicitura sbagliata per esempio è la seguente:



Quest'ultimo non funzionerà...

Per avere più righe invece occorrerà aggiungere l'intero codice sopra citato,esempio per due righe:



Per modificare i contenuti delle celle sostituire a "COLONNA1" il contenuto che volete inserire,RICORDATEVI D'INSERIRE IL CONTENUTO SEMPRE TRA IL TAG <td> E LA SUA CHIUSURA </td> ALTRIMENTI VI VERRà UN OBROBRIO.

Passiamo adesso alle modifiche più originali:

I SOTTOTITOLI

Come inserire dei sottotitoli?
Semplice...basta inserire questo codice prima di ogni codice relativo alle righe:



Questo è il codie relativo a una colonna,relativo a due sarà:



Insomma dovrete aggiungere la parte centrale con le stesse modalità dette per le colonne prima,aggiungerete un "SOTTOTITOLO COLONNA" per ogni colonna della riga
Il sottotitolo dovrete scriverlo al posto di "SOTTOTITOLO COLONNA"

Ma abbiamo detto che va inserito prima del codice relativo alle righe,un esempio?eccolo:


Questo ovviamente inserito in mezzo alla parte iniziale e quella conclusiva del codice della tabella

Esempio per due colonne:



IL COLSPAN

Cos'è questo vocabolo strano?non è altro che la funzione con la quale si allunga una cella su più colonne...per esempio:

	COLSPAN SU DUE COLONNE
	CONTENUTO COLONNA UNICA COLONNA1 COLONNA2 COLONNA2

Come otteniamo questo effetto?semplicemente con la funzione colspan che non è niente di complicato...basterà scrivere "colspan="numero di colonne sulla quale allungare una cella"(senza le virgolette) e porlo dopo il "ww" o l'"aa"

Ecco per esempio il codice per la tabella d'esempio(posto solo la parte centrale ma voi ricordate di aggiungere anche la parte iniziale e la finale):



NOTE IMPORTANTI:

Ricordate che quando inserite un colspan questo conta come più colonne a seconda del numero che gli avete dato...se do un colspan="2" quesa colonna vale come due quindi non potrò mettere una sola colonna nella riga successiva ma ne dovrò inserire due.

Giusto:



Sbagliato:



Vedete?la somma dei td class della prima riga deve essere uguale alla somma della seconda e se nella prima riga ho un colspan 2 nella somma non lo dovrò contare come uno ma come due..se ho un colspan 3 lo dovrò contare come 3 e via dicendo.....

Come inserire un sottotitolo a una riga in cui è presente un colspan?

Beh per farlo dovrò dare al codice del sottotitolo un colspan con numero uguale a quello della riga,per esempio:

<td class="title" colspan="2">SOTTOTITOLO COLONNA 1</td>
<td class="title">SOTTOTITOLO COLONNA 2</td>
</tr>

<tr title="RIGA1">
<td class="ww" colspan="2">COLONNA 1</td>
<td class="ww" >COLONNA 2</td>
</tr>

Spero vi sia chiaro^^

Posto altri esempi di colspan con relativo codice sotto spoiler:

	COLSPAN SU INTERA COLONNA
	COLONNA UNICA COLONNA1 COLONNA2

	COLSPAN SU INTERA COLONNA 2
	COLONNA1 COLONNA2 COLONNA2 COLONNA1

ROWSPAN


Cos'è?
Semplicemente l'allungamento di una colonna su più righe...per esempio:

	TITOLO
	COLONNA ALLUNGATA COLONNA CENTRALE 1 COLONNA DESTRA COLONNA CENTRALE 2 COLONNA CENTRALE 2

Il rowspan è molto simile al cospan...per inserirlo dobbiamo scrivere(senza le virgolette) "rowspan="numero" e posizionarlo dopo "ww" o "aa". Esattamente come col colspan c'è un'accortezza da controllare
Quando metto un rowspan devo assicurarmi che la riga sotto abbia un numero di colonne inferiore di uno a quella del rowspan. Ciò continuerà a valere per tante righe quant'è il numero del rowspan. Mi spiego meglio con qualche esempio:

[/CODE]

Qui per esempio ho un rowspan 2 quindi nella prima riga avrò una colonna in più rispetto alla seconda ma torneranno 3 nella terza riga



Qui avevo un rowspan 3 quindi per le due righe successive ho avuto una colonna in meno rispetto alla prima...tutto tornerà normale nella quarta e così via

A questo punto non vi resta che sbizzarrirvi con colspan e rowspan per creare la tabella dei vostri sogni^^

SCROLLBAR

Ecco come inserire la scrollbar ovvero la barra che permettere di scorrere su e giù i contenuti di una cella.
on dovete far altro che inserire dopo <td class="ww"> o <td class="aa">questo codice:



Dove c'è scritto heught potete variare l'altezza della scroll modificando il valore "100"

DEFINIRE L'ALTEZZA O LA LARGHEZZA DI UNA CELLA

Per definire la larghezza di una cella dovete inserire il seguente codice dopo "ww" o "aa" in modo molto simile al colspan e al rowspan:



Un esempio:



Oppure:



Insomma dovete stare attenti solo che la somma delle percentuali sia 100

La stessa cosa per definire l'altezza,basterà sostituire width con height ma seguire le stesse modalità(la somma 100)

Spero che questo tutorial vi sia utile^^ forza correte a sbizzarrirvi nel creare la vostra tabella dei sogni^^

Se avete qualche problema o qualcosa non vi è chiaro o non riuscite o qualsiasi altro problema postate pure nella sezione "codici html e css" ^^

Buon divertimento xdxd

Grazie Victoria!! una domanda non potresti postare un tutorial del codice per le ultime discussioni sul forum??? io sbaglio qualcosa ma non capisco cosa