Le Tabelle

Le Tabelle Nate per incolonnare e tabulare dati sono state per anni usate anche per impaginare tutti i vari elementi che compongono una pagina web.

Oggi l’impaginazione è lasciata ai box formati da elementi <div> che hanno di fatto restituito alle tabelle il loro compito originale, ma se volete vedere una struttura gestita solo da tabelle, potete vedere questo mio sito mirror: http://www.weblink.altervista.org 

Ci sono elementi ed attributi ad uso esclusivo dei soli browser IE, alcuni li ho volutamente trascurati oltre che per la loro esclusiva anche perchè personalmente li ritengo inutili.
Chi sono per poter giudicare cosa sia utile e cosa non lo sia?

Nessuno, non sono nessuno… ma se pensate che potevano esservi utili potete sempre ricredervi col tempo. 🙂

<table>…</table>

L’elemento <table> definisce una tabella e necessita di almeno altri due elementi <tr> e <td>descritti più avanti e che servono per definire righe e colonne. Questo tag necessita del relativo tag di chiusura </table>

Si inseriscono lasciando uno spazio vuoto fra la scritta table e la sua chiusura  >  Gli attributi possono essere più di uno e specificati uno di seguito all’altro.

align

L’attributo align consente di specificare l’allineamento della tabella rispetto al documento, con le seguenti possibilità: center, left e right rispettivamente per: centrato, a sinistra, a destra.

E’ possibile applicarlo oltre che all’elemento <table> anche ai singoli elementi che costituiscono la struttura della tabella stessa, quali: <td> e <th> descritti più avanti.

background

L’attributo background permette di avere un’immagine come sfondo della tabella, è possibile applicarlo oltre che all’elemento <table> anche agli elementi che costituiscono la struttura della tabella stessa quali: <td> e <th> descritti più avanti.
Si possono utilizzare come immagini di sfondo i vari tipi di file grafici consentiti dal web: gif, jpg, png.

Attributo proprietario di alcuni browser non riconosciuto dal W3C ma approvato se inserito in un CSS

bgcolor

L’attributo bgcolor permette di avere un colore in tinta unita come sfondo della tabella, è possibile applicarlo oltre che all’elemento <table> anche agli elementi che costituiscono la struttura della tabella stessa quali: <td> e <th> descritti più avanti.
Il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali. A questo proposito su questa pagina è possibile vedere 140 colori di base e relativo codice esadecimale.

border

L’attributo border permette di avere un bordo perimetrale che contorna tutte le celle facenti parte della tabella; è possibile impostarne anche lo spessore del bordo. Alcuni browser in mancanza di questo attributo lasciano un piccolo spazio pur non facendo vedere alcun bordo, per recuperare quello spazio è necessario dichiarare border impostandolo a zero.

bordercolor

L’attributo bordercolor permette di selezionare il colore del bordo, questo attributo supportato solo dai browser IE per funzionare deve necessariamente avere impostato anche l’attributo border. Il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali. A questo proposito su questa pagina è possibile vedere 140 colori di base con relativo codice esadecimale.

Attributo proprietario di alcuni browser non riconosciuto dal W3C ma approvato se inserito in un CSS.

bordercolordark

L’attributo bordercolordark permette di selezionare il colore più scuro su un bordo (l’opposto di bordercolorlight); creando un effetto di luce. Questo attributo supportato soltanto da IE per funzionare deve necessariamente avere impostato anche l’attributo border.

bordercolorlight

L’attributo bordercolorlight permette di selezionare il colore più chiaro su un bordo (l’opposto di bordercolordark); creando un effetto di luce. Questo attributo supportato soltanto da IE per funzionare deve necessariamente avere impostato anche l’attributo border.

cellpadding

L’attributo cellpadding specifica la quantità di spazio vuoto da lasciare tra i bordi delle celle della tabella e il dato vero e proprio in esse contenuto, il valore per default è 2 , quindi per tabelle più compresse si dovrà impostare cellpadding uguale a zero.

cellspacing

L’attributo cellspacing specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati della tabella, il valore per default è 2, per tabelle più compresse si dovrà impostare cellspacing uguale a zero.

Il browser IE non supporta la proprietà border-spacing che regola lo spazio fra i bordi delle celle e fra il bordo delle celle e quello della tabella. Per eliminare questo spazio esiste la proprietà border-collapse che accetta due valori: separate e collapse, rispettivamente per separare o unire le celle.

frame

L’attributo frame permette di scegliere quale tipo di visualizzazione assegnare al bordo. Questo attributo per funzionare deve avere impostato anche l’attributo border. I valori possibili sono:

void = rimuove tutti i bordi esterni
above = visualizza solo i bordi esterni in cima alla tabella
below = visualizza solo i bordi esterni in fondo alla tabella
hsides = visualizza solo i bordi orizzontali in cima e in fondo alla tabella
lhs = visualizza i bordi esterni solo al margine sinistro della tabella
rhs = visualizza i bordi esterni solo al margine destro della tabella
vsides = visualizza i bordi esterni ai due margini destro e sinistro della tabella
box = visualizza un riquadro attorno alla tabella (tutti i margini)
border = visualizza un riquadro attorno alla tabella (come box)

height

L’attributo height permette di specificare l’altezza della tabella, può essere in pixel o in percentuale rispetto all’altezza della finestra del browser. Questo attributo è supportato soltanto dai browser IE e non riconosciuto dal W3C. Diventa un attributo valido se applicato ai singoli elementi che costituiscono la struttura della tabella stessa quali: <td> e <th>.

summary

L’attributo summary permette di specificare un titolo, una didascalia, a differenza di <caption> questa non sarà visibile graficamente serve soprattutto a quei browser non grafici che fanno uso di programmi vocali o con sistema Braille.

width

L’attributo width permette di specificare la larghezza della tabella, può essere espressa in pixel o in percentuale della larghezza della finestra del browser. E’ possibile applicarlo oltre che all’elemento <table> anche agli elementi che costituiscono la struttura della tabella stessa, quali: <td> e <th> descritti più avanti.

<caption>…</caption>

L’elemento <caption> serve per inserire la didascalia della tabella, deve trovarsi all’interno della tabella subito dopo table e non all’interno di righe <tr> o di celle <td>. Questo tag necessita del relativo tag di chiusura </caption>

align di caption

L’attributo align imposta la posizione della didascalia rispetto alla tabella. Gli attributi possibili sono top, bottom, left e right. rispettivamente per: sopra, sotto, sinistra e destra.

valign

L’attributo valign permette di impostare l’allineamento verticale del testo all’interno delle singole celle della tabella, i valori assegnabili sono: middle, top, baseline, bottom.

align

L’attributo align permette di impostare l’allineamento orizzontale del testo all’interno delle singole celle della tabella, i valori assegnabili sono: left, right, center, char, justify

height

L’attributo height permette di impostare il valore di altezza della cella, può essere espresso in pixel o in percentuale dell’altezza della tabella. Più celle affiancate avranno tutte l’altezza max impostata in una delle celle della stessa riga.

width

L’attributo width permette di impostare il valore di larghezza della cella, può essere espresso in pixel o in percentuale della larghezza della tabella. Più celle incolonnate avranno tutte la larghezza max specificata in una delle celle della stessa colonna.

<tr>…</tr>

Questa coppia di elementi <tr>…</tr> inseriti all’interno di <table> definiscono l’inizio di una riga della tabella, significa che il numero di righe di una tabella è pari al numero di elementi <tr> in essa contenuti. Supporta molti degli attributi di <table> e di <td>. A differenza di <td> non contiene dati al suo interno in quanto serve solo per creare la struttura, non hanno quindi ragione di esistere attributi come bgcolor o background che se occorrono potranno essere definiti nel tag <td> inserito all’interno di <tr> stesso. Questo tag necessita del relativo tag di chiusura </tr>

<th>…</th>

Questa coppia di elementi <th>…</th> inseriti all’interno di <table> e di <tr> definisce la cella intestazione della tabella. Praticamente il testo all’interno di questo tag sarà in neretto. Supporta tutti gli attributi di <table> e di <td>. Attenzione all’attributo nowrap, se presente impedisce il ritorno a capo del contenuto della cella forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Necessita di essere racchiuso fra i tags <tr> e </tr> esattamente come <td>. Questo tag necessita del relativo tag di chiusura </th>

<td>…</td>

Questa coppia di elementi <td>…</td> inseriti all’interno di <table> e di <tr> definiscono la cella vera e propria della tabella, <td> supporta tutti gli attributi di <table> quindi non soltanto i vari allineamenti ma è possibile avere anche colori e/o immagini di sfondo diversi e indipendenti tra le singole celle. Attenzione però, a differenza di <table> è possibile adoperare anche l’attributo nowrap, che se presente impedisce il ritorno a capo del contenuto della cella, forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Questo tag è di norma preceduto dal tag <tr> che definisce l’inizio della riga. All’interno di una stessa tabella si dovranno definire lo stesso identico numero di celle per ogni riga, a meno che non si faccia uso dell’attributo colspan visto più avanti. Questo tag necessita del relativo tag di chiusura </td>

Non è difficile, il tutto rigorosamente all’interno dei tags <table> e </table> e di <tr> e </tr>. Ho reso visibile il bordo per meglio capirne il funzionamento, molto spesso invece il bordo viene impostato a zero in modo da non far vedere righe e colonne ed usare la tabella come struttura per impaginare non solo dati ma tutta gli elementi della pagina. Oggi con CSS, XHTML e HTML5 per impaginare si fa uso dei box e non è più necessario ricorrere alle tabelle che ritrovano così il loro impiego naturale per il quale erano state inventate. Vi assicuro però che in molti le usano ancora adesso come tecnica di impaginazione. 

Le tabelle si possono nidificare, cioè è possibile mettere delle intere tabelle all’interno di singole celle di altre tabelle creando strutture sempre più complesse per poterle adattare a qualsiasi tipo di impaginazione ma il rischio di restare ingarbugliati è alto.

Potrebbero persino contenere immagini di sfondo frammentate in singole celle che si ricompongono cella per cella come se si trattasse di un puzzle. Anni indietro questa tecnica era molto diffusa per le immagini di grosse dimensioni che richiedevano tempi lunghi di caricamento per via delle linee analogiche, si evitavano così lunghe attese.

rules

L’attributo rules serve per la visualizzazione dei bordi fra le celle interne quando si fa uso dei tags <thead> <tbody> e <tfoot>, per funzionare deve essere necessariamente impostato anche l’attributo border. i possibili valori sono:

none = rimuove tutti i bordi esterni
groups = visualizza bordi orizzontali fra le sessioni <thead><tbody><tfoot>
rows = visualizza bordi orizzontali tra ciascuna riga
cols = visualizza bordi orizzontali tra ciascuna colonna
all = visualizza tutti i bordi interni

<thead>…</thead>

Questa coppia di elementi <thead>…</thead> inseriti all’interno di <table> servono per definire una sezione che è l’intestazione della tabella. E’ simile all’elemento <head> di html. Si adopera con <tbody> e va dichiarato prima di <tbody> stesso. Utile per tabelle lunghe dove anche in fase di stampa su ogni pagina sarebbe ripetuta l’intestazione. Per evidenziare l’intestazione è possibile fare uso di <th> Questo tag necessita del relativo tag di chiusura </thead>

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>.

<tbody>…</tbody>

Questa coppia di elementi <tbody>…</tbody> inseriti all’interno di <table> servono per specificare la sezione del corpo della tabella, è analogo all’elemento <body> di html ed influenza direttamente la visualizzazione della tabella stessa. Si adopera in presenza di <thead> o <tfoot> descritti sopra e sotto. Questo tag necessita del relativo tag di chiusura </tbody>

<tfoot>…</tfoot>

Questa coppia di elementi <tfoot>…</tfoot> inseriti all’interno di <table> servono per specificare l’intestazione della tabella ma posizionata nel piede (fondo pagina) della tabella stessa. Si adopera con <tbody> e va dichiarato prima di <tbody> stesso. Utile per tabelle lunghe dove anche in fase di stampa su ogni pagina sarebbe ripetuta l’intestazione a fondo tabella. Per evidenziare l’intestazione è possibile fare uso di <th> Questo tag necessita del relativo tag di chiusura </tfoot>

Lo stesso esempio usato per <thead> ma inserendo <tfoot> al posto di <thead>:

Si avrà questo il risultato :

La scritta in grassetto è una caratteristica dell’elemento <th>.

rowspan e colspan

Gli attributi rowspan e colspan allargano righe e colonne senza alterare la struttura originale. Come già accennato le tabelle, salvo casi particolari, hanno un numero di celle uguale per ogni riga ed un numero di righe uguali per ogni colonna, se ad esempio su una riga abbiamo tre celle si dovranno avere tre celle per ogni altra riga precedente e seguente. Identica cosa per le colonne, se una colonna ha tre celle anche le altre colonne dovranno avere lo stesso numero di celle.

Praticamente il grigliato risulta sempre regolare sia in orizzontale che in verticale. Fortunatamente però è possibile intervenire sulla struttura facendo in modo che una cella sia più larga o più lunga delle altre in modo da occupare lo spazio delle celle che stanno di lato o di sopra o di sotto. In parole povere avremo sempre una forma della struttura rettangolare (o quadrata) ma al suo interno le celle potranno essere accomodate. Se così non fosse sarebbero piuttosto rigide per certi utilizzi.

Vediamo alcuni esempi che chiariranno certamente meglio tutto quanto.

Questo sotto il risultato

Risulta intuitivo che se servisse una tabella con 16 celle si potrebbe disporla su 4 righe ognuna formata da 4 celle, oppure due righe ognuna formata da 8 celle, o anche 8 righe ognuna formata da 2 celle. E perchè non 16 righe ognuna formata da una sola cella? 

Quando però la tabella non è più così regolare, per esempio nel caso servano 7 celle su una sola riga lasciandone 8 nella riga sotto, magari per qualche ragione di estetica o per alloggiare meglio un’intestazione più grande o altro… ecco che si ricorre a rowspam e colspan che servono proprio a questo, a modificare il numero di righe e/o colonne mantenendo la struttura regolare cioè a forma di quadrato o di rettangolo, vediamo un esempio.

Una tabella regolare prevede due <tr> ed otto <td>, per ottenere quattro celle (colonne) per ogni riga.

Adesso al primo <td>, quello della cella 1 riga uno, applichiamo l’attributo rowspan seguito dal valore 2, così facendo la tabella espanderà la colonna cella 1, di due righe (row) prendendo 2 posti, in pratica si fonde con la cella sottostante (la cella 5) che di fatto noi non avremo dichiarato nella seconda riga proprio per lasciare il posto alla cella sopra espansa con rowspan.

Questo il listato con l’esempio pratico:

Vediamo adesso lo stesso esempio ma facendo in modo che la prima cella si espanda in orizzontale, quindi non più rowspan (righe) ma colspan (colonne). Sarà impostata in modo che dovrà essere di dimensioni pari a 4 celle. Tornando al primo <td>, quello della cella 1 riga 1, e richiamando l’attributo colspan seguito dal numero 4; la tabella espanderà la riga 1 cella 1 in modo da prendere altri 3 posti, quindi occuperà il posto delle celle laterali che non andranno inserite.

Questo il listato ed anche l’esempio pratico:

avrei potuto fare anche così:

Dicevo all’inizio di questa sezione che le tabelle possono essere nidificate fra di loro, non ci sono limiti se non quello della propria fantasia e del buon senso. Magari evitate di complicarvi troppo la vita se non ce ne fosse realmente il bisogno. Ecco un altro esempio pratico:

La tabella 2 formata da 4 celle di colore ocra si trova dentro ad una cella della tabella 1 espansa con rowspan 2

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.