Homepage -> Guida HTML

Le tabelle vengono inserite con la seguente sequenza di tag html:

Questa sarebbe un esempio di una tabella costituita da una sola cella; quest'ultima è rappresentata dalla porzione di codice <TD>...</TD>. Solo il tag TD può quindi contenere il testo da voi scritto e notate come sia il TD e sia il TR debbano essere chiusi.
Un esempio di una tabella 2x2 è invece il seguente:

Se volete visualizzare il bordo di una cella vuota, dovete mettere dentro alla cella in questione uno spazio, poichè altrimenti non si vedrebbe nulla.

Di default, una tabella appena inserita viene posizionata in alto a sinistra; vedremo più avanti come sia possibile cambiare la sua posizione.

Formattazione del testo di una tabella

Se inserisco una tabella in un paragrafo giustificato, vedi esempio, il testo in essa contenuto non rispecchia tale caratteristica di allineamento. Stessa cosa per il Tag FONT ( esempio ). Per applicare, quindi, le caratteristiche di formattazione del testo anche a quello contenuto nella tabella, bisogna applicare al testo di ogni TD della tabella gli stessi stili e colori di formattazione del paragrafo esterno alla tabella stessa.

Attributi di una Tabella

Ci sono poi Attributi che riguardano la formattazione della cella:

Gli attributi HEIGHT e WIDTH possono essere applicati sia al TABLE e sia ai TR e TD; il valore "n" può essere scritto sia in % ( ="25%" ) e sia in pixel ( =10 ), solo che il primo deve essere per forza messo tra gli apici, mentre il secondo non obbligatoriamente. In genere si fissa una dimensione in % nel TABLE e poi le dimensioni delle varie celle ( altezze righe nei vari TR, mentre la larghezza delle celle basta fissarla per una riga sola poichè le altre si adatteranno alle stesse dimensioni ). Se non si danno dimensioni alle celle, esse si adatteranno al testo in esse contenuto. Gli altri sono invece attributi del tag TABLE.
Molto importante è evidenziare che gli attributi e valori del TD prevalgono su quelli del TR ed entrambi prevalgono su quelli del Tag TABLE.

Ecco degli esempi sui tag appena visti e sulla possibilità di annidare tabelle dentro altre tabelle:

Tale esempio viene poi interpretato così. Notate come con questa disposizione degli attributi HEIGHT e WIDTH, la sottotabella alla prima riga della tabella madre abbia una altezza pari al 50% ed una larghezza pari a quella della madre; ciò spiega perchè la sottotabella non riempia completamente la cella madre ma solo metà in altezza. Inoltre si danno dimensioni anche alle righe ed alle colonne della tabella madre e figlia, rispettivamente.
Questa è invece una variante:

Quest'altro esempio mostra l'uso del CELLSPACING aggiunto al Tag TABLE ( codice ).
Quest'altro, invece, l'uso del CELLPADDING, usando come valore 100 ( codice ).

Altri attributi importanti sono il COLSPAN ed il ROWSPAN che servono rispettivamente per unire celle orizzontalmente e verticalmente. Ecco un esempio dell'uso del COLSPAN, di codice:

Essendo una tabella 3 x 2, in ogni riga ci saranno due celle; solo la prima però ne contiene effettivamente due. Nella seconda riga si può Notate, grazie all'aiuto del bordo della tabella, che vi è una cella sola proprio per l'uso del COLSPAN ( non c'è quindi bisogno di inserire il secondo TD ), mentre nella terza c'è un solo TD ma non essendoci un COLSPAN = 2, il bordo destro della cella termina in corrispondenza del bordo destro della prima cella della prima riga.
Quindi il COLSPAN = "n" va inserito nel Tag TD della cella che deve occupare lospazio di n celle adiacenti.
In quest'altro esempio, oltre all'uso del COLSPAN, viene usato anche l'attributo ROWSPAN="n":

Questa è una tabella 5 x 4 in cui nella prima riga e nell'ultima viene usato il COLSPAN ( = 3 e = 4 rispettivamente ), mentre nella seconda riga viene usato il ROWSPAN = 2 sia per la prima cella e sia per la terza e quarta. Importante è osservare come nella terza riga venga messa solo una cella, quella contenente la lettera "e". Questo sarebbe ciò che sarebbe visualizzato se non si inserisse un solo TD, ma quattro ( di cui tre vuoti ).

E' importante evidenziare che la tabella è un oggetto statico per cui è difficile fissare una diversa larghezza di due celle appartenenti alla stessa colonna.

La Tabella è un ottimo strumento di formattazione della pagina, ma è come detto, difficile impostare una diversa larghezza delle celle appartenenti alla stessa riga; inoltre, usando una stessa tabella, è difficile scrivere testi lunghi all'interno di una cella, proprio come mostra questo esempio. Per questo in genere si usano tabelle annidate dentro ad altre tabelle. Quest'ultimo esempio ha il seguente codice:

Dire che la sotto-tabella ha una altezza ed una larghezza del 100% significa che essa occuperà tutto lo spazio della cella che la contiene, in quanto tali percentuali sono relative proprio alle dimensioni della cella della tabella madre.
In genere una home page di un sito è strutturata in modo tale da contenere nella parte alta della pagina il logo, poi al di sotto di esso una riga riservata ai vari link, ed in fondo il footer, riservando la rimanente parte ai menù e al contenuto della pagina:

Se volessi disporre meglio li testo all'interno della tabella madre dovrei usare delle sottotabelle e giocare poi sulle dimensioni delle celle:

Altri importanti attributi sono:

I valori del VALIGN sono TOP, CENTER, BOTTOM e sono attributi del TD, ma non funziona per allineare le sottotabelle; mentre i valori di ALIGN sono gli stessi di quelli visti nel capitolo della formattazione del testo e possono essere usati anche per gestire le sottotabelle. Per la semplice tabella ( senza attributi ):

ecco l'effetto del VALIGN e dell'ALIGN. Notate come l'effetto dell'allineamento centrato può essere ottenuto anche usando il Tag <CENTER>; inoltre se non si dispone di alcun allineamento, il testo è inserito come mostra la tabella sopra raffigurata e cioè al centro sinistra della cella.
I valori del BORDER devono essere messi in pixel.
Gli attributi BGCOLOR , BACKGROUND e BORDERCOLOR possono essere applicati sia al Tag TABLE e sia ai vari TD.
I valori dell'attributo FRAME sono:

Ecco degli esempi: fig1 ( codice ), fig2 ( codice ), fig3 ( codice ), Tabelle_esempi.doc

Intestazione, Corpo e Footer di una Tabella

E' possibile distinguere queste tre parti di una tabella: una intestazione o titolo, un corpo centrale ed un footer o conclusione della tabella; i tag html riservati a tali funzioni sono i seguenti.

Un esempio di tabella con intestazione è mostrato qui (vedi il codice).

Creare gruppi di righe

Come è possibile suddividere le righe di una tabella in gruppi ordinati, allo stesso modo è possibile raggruppare gli stili delle colonne. Il tag da usare è il <COLGROUP> e serve per fornire indicazioni su come le colonne debbano essere visualizzate.

Il tag <COLGROUP>, la cui chiusura è facoltativa, va posto subito dopo il tag <CAPTION> e prima di <THEAD>, e consente di impostare un layout unico per le colonne senza avere la necessità di specificare l'allineamento del testo, o il colore di sfondo per ogni singola cella.

Con l'attributo span (da non confondere con il tag <SPAN>) possiamo impostare il numero di colonne che fanno parte del gruppo. Un esempio di tabella con tali gruppi è mostrato qui (vedi il codice).

<COLGROUP> ha l'indubbio vantaggio di poter attribuire in una sola volta la formattazione a un numero elevato di colonne. Ad esempio:

Se si preferisce attribuire più esplicitamente lo stile ad una colonna si può usare il tag <COL> (che non necessita di chiusura) all'interno di <COLGROUP>. In questo caso l'attributo span va riferito a <COL> e non a <COLGROUP>.

Di seguito sono riportati i codici relati al caso in cui si voglia inserire un colore di sfondo ad una tabella oppure una immagine (lo stesso codice sarebbe valido se si volesse colorare una sola cella, solo che dovrebbe essere applicato al TD anzichè al TABLE).

Colore di sfondo

Immagine di sfondo