Le Tabelle: la loro struttura.

Abbiamo visto nella lezione precedente come creare un layout usando dei box posizionati nella pagina. Prima di questa possibilità erano le tabelle il solo strumento ad essere usato in html per impaginare gli oggetti, praticamente venivano private del loro bordo e sfruttando la sola versatile struttura venivano adoperate per impaginare. Così facendo si era quasi perduto lo scopo originale per il quale erano state inventate che era quello di presentare dati ben ordinati e tabulati, questo scopo è stato riscoperto e ritrovato con Xhtml.

Vediamo come si definiscono: <table> e relativo elemento (tag) di chiusura </table> questo elemento di definizione da solo servirebbe a poco, una tabella è infatti formata da celle disposte su righe e colonne che per essere create necessitano di altri elementi, almeno due: <tr> e <td> che si trovano annidati all'interno di <table> e che servono rispettivamente per suddividere la tabella in righe e/o in colonne, entrambi hanno e richiedono il relativo elemento di chiusura </tr> e </td>.

Intere tabelle possono essere contenute a loro volta all'interno di celle di altre tabelle, da qui la definizione di "tabelle nidificate" una specie di scatole cinesi: una dentro l'altra per dare vita a tabelle piuttosto complesse.

Iniziamo con la struttura più semplice: una sola cella. Negli esempi faremo uso dell'attributo opzionale border che ne evidenzia il contorno perimetrale, lo useremo anche per le celle alle quali assegneremo un colore di sfondo che ci consentirà di vedere e capire meglio quanto andremo ad illustrare. Potremo assegnare l'attributo border direttamente all'elemento table ma trattandosi di html con style lo assegneremo invece tramite un foglio di style sul quale imposteremo anche il tipo di bordo, il suo spessore ed il colore. Questo il codice CSS:

Questo il codice html:

Questo il risultato a video:

Da notare che per <table> il bordo è definito da 2 pixel mentre per <td> da un solo pixel, questa scelta dipende soltanto dal gusto personale l'importante è sapere che i CSS permettono anche questo. Si noti inoltre che ogni elemento che riguarda la tabella necessita del relativo elemento (tag) di chiusura dove <tr> decreta l'inizio di una nuova riga, mentre <td> è la cella vera e propria, analogamente </tr> decreta la fine di una nuova riga, mentre </td> la fine della cella. Dovendo creare adesso una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elementi <td> all'interno di un <tr>

Questo il risultato :

Con la stessa logica è possibile aggiungere tutte le righe e le celle che ci servono, quindi:

Questo il risultato :

Oltre a <tr> e <td> che sono gli elementi base di una tabella esiste anche <th> che definisce il contenuto della intestazione di una tabella; per essere adoperato necessita dell'elemento <thead> (in cima) o <tfoot> (in fondo), praticamente la tabella viene suddivisa in due parti principali, proprio come succede con la pagina web dove c'è un head (testa) ed un body (corpo) anche in una tabella è possibile avere un <thead> ed un <tbody> se dovesse servire avere l'intestazione a fine tabella invece che al suo inizio sarà sufficiente adoperare <tfoot> (piede) al posto di <tbody> (testa). Potrà sembrare complicato ma vi assicuro che è di una semplicità unica, un paio di esempi chiariranno tutto e meglio:

Ricordatevi che facendo uso di <thead> o di <tfoot> sarà necessario usare anche <tbody>.
Questo il risultato :

La scritta in grassetto è una caratteristica dell'elemento <th> mentre inserendo <tfoot> al posto di <thead>:

Si avrà questo il risultato :

Per avere una didascalia si adopera l'elemento <caption> con relativo elemento di chiusura </caption> che deve essere inserito immediatamente sotto l'elemento <table>. Serve per descrivere la natura della tabella, descrizione che risulterà essere esterna alla tabella stessa pur facendone parte integrante. E' possibile inserire anche summary come attributo dell'elemento table e sarà letto soltanto da quei dispositivi non visuali quali per esempio sintesi vocale e Braille.

Questo il risultato:

Come meccanismo direi che è abbastanza semplice data la sua logica e di conseguenza di facile comprensione. Una tabella avrà sempre una forma regolare quadrata o rettangolare che sia, è possibile fondere le celle fra di loro sia in modo orizzontale che verticale (righe e colonne) per dare vita a tabelle irregolari, per farlo si adoperano gli attributi: rowspan e colspan che servono rispettivamente per occupare più di una sola cella in senso orizzontale e più di una sola cella in senso verticale, come tali sono applicabili al solo elemento cella <td>.

Vediamo un esempio: supponendo di dover occupare con una sola cella più colonne della tabella regolare adopereremo l'attributo colspan specificando il numero di colonne da occupare che nel nostro caso potrà essere al massimo 2. (ovvio, la nostra tabella in questo caso è formata da 2 sole colonne):

Questo il risultato:

Allo stesso identico modo usando l'attributo rowspan si potranno occupare più righe della tabella regolare, anche in questo caso il valore di rowspan potrà essere al massimo 2 (ovvio, la nostra tabella anche in questo caso è formata da 2 sole  righe):

Questo il risultato :

Combinando i vari attributi è possibile ottenere strutture ottimali, dipende da come vogliamo impaginare i nostri dati.

Nella prossima lezione vedremo altri attributi che è possibile usare con le tabelle.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.