TecInf_1: Approfondimento sulle tabelle

Approfondimento sulle tabelle

La larghezza di una tabella

La dimensione orizzontale di una tabella è pari alla somma della larghezza delle celle più gli eventuali bordi. La larghezza delle celle dipende solitamente dalla lunghezza dei dati che contengono. Tuttavia, anche se non sempre consigliato, la dimensione orizzontale di una tabella può essere regolata tramite l'attributo WIDTH (larghezza) nella tag <TABLE>. Il valore numerico in pixel di questo attributo va in genere assegnato dopo qualche tentativo di prova. Ecco un esempio:

<TABLE BORDER=1 WIDTH=700>
<CAPTION><I>Stelle</I></CAPTION>
<TR><TH>Nome comune</TH><TH>Denominazione</TH><TH>Costellazione</TH></TR>
<TR><TD>Sirio</TD><TD>Alfa Canis Majoris</TD><TD>Cane Maggiore</TD></TR>
<TR><TD>Canopo</TD><TD>Alfa Carinae</TD><TD>Carena</TD></TR>
<TR><TD>Vega</TD><TD>Alfa Lyrae</TD><TD>Lira</TD></TR>
<TR><TD>Polluce</TD><TD>Beta Geminorum</TD><TD>Gemelli</TD></TR>
</TABLE>

Il browser visualizza nel sottostante modo la tabella corrispondente:

*Stelle*
Nome comune	Denominazione	Costellazione
Sirio	Alfa Canis Majoris	Cane Maggiore
Canopo	Alfa Carinae	Carena
Vega	Alfa Lyrae	Lira
Polluce	Beta Geminorum	Gemelli

Come si può notare, il browser cerca sempre di costruire colonne di ampiezza uguale, ammesso che la larghezza assegnata con WIDTH lo permetta. Ovviamente se il valore numerico dell'attributo è troppo piccolo, il browser allargherà la tabella al valore minimo sufficiente a contenere tutte le colonne.

Importante! Una tabella di larghezza maggiore migliora la leggibilità dei dati, ma bisogna stare attenti a non esagerare, altrimenti buona parte del lato destro della tabella potrebbe finire fuori schermo, costringendo l'utente a fare uso della barra di scorrimento orizzontale del proprio browser. Questo è tanto più vero quanto più è bassa la risoluzione dello schermo dell'utente: a 640x480 pixel una tabella larga come quella dell'esempio appena visto non riesce sicuramente a stare tutta nello schermo. D'altra parte per tabelle effettivamente larghe e con numerose colonne spesso non c'è altra soluzione.

Le dimensioni di una cella

Anche le dimensioni di una cella possono essere variate. Per farlo bisogna usare gli attributi WIDTH (larghezza) e HEIGHT (altezza) nella tag d'entrata della cella corrispondente, come avviene nel seguente esempio:

<TABLE BORDER=1>
<CAPTION><I>Stelle</I></CAPTION>
<TR><TH WIDTH=200 HEIGHT=100>Nome comune</TH><TH>Denominazione</TH><TH>Costellazione</TH></TR>
<TR><TD>Sirio</TD><TD>Alfa Canis Majoris</TD><TD>Cane Maggiore</TD></TR>
<TR><TD>Canopo</TD><TD>Alfa Carinae</TD><TD>Carena</TD></TR>
<TR><TD>Vega</TD><TD>Alfa Lyrae</TD><TD>Lira</TD></TR>
<TR><TD>Polluce</TD><TD>Beta Geminorum</TD><TD>Gemelli</TD></TR>
</TABLE>

Una variazione d'altezza di una cella si riflette ovviamente su tutte le celle della medesima riga, mentre una variazione di larghezza di una cella si riflette allo stesso modo su tutte le celle della medesima colonna. Ecco in effetti come il browser mostra la tabella dell'esempio:

*Stelle*
Nome comune	Denominazione	Costellazione
Sirio	Alfa Canis Majoris	Cane Maggiore
Canopo	Alfa Carinae	Carena
Vega	Alfa Lyrae	Lira
Polluce	Beta Geminorum	Gemelli

Importante! I browser MS Internet Explorer e Netscape Navigator interpretano sempre correttamente gli attributi WIDTH e HEIGHT nelle tag <TD> e <TH>, purtroppo lo stesso non accade in Opera v3.21 (versione italiana), che pare abbia problemi nel visualizzare correttamente la tabella. Se adoperate questo browser potete accorgervene proprio dalla tabella sovrastante: la prima riga - con questo programma - appare di altezza standard e non di 100 pixel. Trattandosi di un browser abbastanza giovane, c'è comunque da ritenere che questo difetto verrà sicuramente corretto in una futura versione.

L'allineamento verticale nelle celle

Quando abbiamo a che fare con celle di grande altezza che contengono dati corti, questi ultimi possono essere piazzati verticalmente in vari modi: vicino al bordo superiore, in mezzo alla cella o adiacenti al bordo inferiore. Per regolare la disposizione verticale dei dati si deve utilizzare l'attributo VALIGN nella tag d'entrata della riga oppure in quella della cella. Tale attributo ammette i valori BOTTOM (basso), MIDDLE (centro) e TOP (alto). Vediamo l'abituale esempio:

<TABLE BORDER=1>
<CAPTION><I>Stelle</I></CAPTION>
<TR VALIGN=TOP><TH WIDTH=200 HEIGHT=100>Nome comune</TH><TH VALIGN=BOTTOM>Denominazione</TH><TH VALIGN=MIDDLE>Costellazione</TH></TR>
<TR><TD>Sirio</TD><TD>Alfa Canis Majoris</TD><TD>Cane Maggiore</TD></TR>
<TR><TD>Canopo</TD><TD>Alfa Carinae</TD><TD>Carena</TD></TR>
<TR><TD>Vega</TD><TD>Alfa Lyrae</TD><TD>Lira</TD></TR>
<TR><TD>Polluce</TD><TD>Beta Geminorum</TD><TD>Gemelli</TD></TR>
</TABLE>

Con tali istruzioni HTML il browser visualizza la seguente tabella:

*Stelle*
Nome comune	Denominazione	Costellazione
Sirio	Alfa Canis Majoris	Cane Maggiore
Canopo	Alfa Carinae	Carena
Vega	Alfa Lyrae	Lira
Polluce	Beta Geminorum	Gemelli

Anche qui, come già visto per il caso dei colori delle celle, il valore dell'attributo di cella ha la preminenza su quello di riga. In altri termini nella prima riga della tabella si è definito un allineamento verticale in alto, che viene rispettato dalla prima cella di tale riga. La seconda e la terza cella della medesima riga invece non rispettano questo allineamento perché per esse l'allineamento verticale è stato definito rispettivamente in basso ed in mezzo.

Importante! Come nel paragrafo precedente, anche per l'allineamento verticale il browser Opera v3.21 (versione italiana) ha problemi, proprio perché spesso non dimensiona correttamente l'altezza delle celle.

Le spaziature nelle celle

Sappiamo che l'attributo BORDER nella tag <TABLE> serve a regolare lo spessore del bordo di una tabella, ma come si fa a regolare quello della griglia? L'attributo che permette di farlo è CELLSPACING, sempre nella tag <TABLE>. Ecco un esempio pratico:

<TABLE BORDER=4 CELLSPACING=8>
<CAPTION><I>Stelle</I></CAPTION>
<TR VALIGN=TOP><TH WIDTH=200 HEIGHT=100>Nome comune</TH><TH VALIGN=BOTTOM>Denominazione</TH><TH VALIGN=MIDDLE>Costellazione</TH></TR>
<TR><TD>Sirio</TD><TD>Alfa Canis Majoris</TD><TD>Cane Maggiore</TD></TR>
<TR><TD>Canopo</TD><TD>Alfa Carinae</TD><TD>Carena</TD></TR>
<TR><TD>Vega</TD><TD>Alfa Lyrae</TD><TD>Lira</TD></TR>
<TR><TD>Polluce</TD><TD>Beta Geminorum</TD><TD>Gemelli</TD></TR>
</TABLE>

che il browser mostra in questo modo:

*Stelle*
Nome comune	Denominazione	Costellazione
Sirio	Alfa Canis Majoris	Cane Maggiore
Canopo	Alfa Carinae	Carena
Vega	Alfa Lyrae	Lira
Polluce	Beta Geminorum	Gemelli

Il valore numerico di CELLSPACING rappresenta lo spessore della griglia espresso in pixel.

E se volessimo inserire dello spazio vuoto attorno ai dati contenuti nelle celle, al fine di staccarli dal bordo? Per ottenere questo effetto si può usare nella tag <TABLE> l'attributo CELLPADDING. Vediamo l'effetto ricavato nella tabella precedente:

<TABLE BORDER=4 CELLSPACING=8 CELLPADDING=10>
<CAPTION><I>Stelle</I></CAPTION>
<TR VALIGN=TOP><TH WIDTH=200 HEIGHT=100>Nome comune</TH><TH VALIGN=BOTTOM>Denominazione</TH><TH VALIGN=MIDDLE>Costellazione</TH></TR>
<TR><TD>Sirio</TD><TD>Alfa Canis Majoris</TD><TD>Cane Maggiore</TD></TR>
<TR><TD>Canopo</TD><TD>Alfa Carinae</TD><TD>Carena</TD></TR>
<TR><TD>Vega</TD><TD>Alfa Lyrae</TD><TD>Lira</TD></TR>
<TR><TD>Polluce</TD><TD>Beta Geminorum</TD><TD>Gemelli</TD></TR>
</TABLE>

Il browser visualizza così il testo sorgente:

*Stelle*
Nome comune	Denominazione	Costellazione
Sirio	Alfa Canis Majoris	Cane Maggiore
Canopo	Alfa Carinae	Carena
Vega	Alfa Lyrae	Lira
Polluce	Beta Geminorum	Gemelli

Anche qui il valore numerico dell'attributo rappresenta lo spessore in pixel dello spazio vuoto che circonda la voce della cella.

Importante! Per inserire dello spazio vuoto prima e dopo i dati contenuti nelle celle, al fine di staccarli dai bordi sinistro e destro, si può anche usare il carattere spazio ( ).

Le metacelle

Data una tabella, diciamo che una cella è una metacella se la sua larghezza comprende più di una colonna o se la sua altezza comprende più di una riga, potendo i due casi sussistere anche contemporaneamente. Per capirci meglio, ecco un esempio di tabella che ha tre metacelle:

Anfibi	Rana
Anfibi	Salamandra
Pesci	Merluzzo
	Trota
	Salmone
Scimmie	Babbuino
	Gorilla
	Orango
	Scimpanzè

La cella "Anfibi" è una metacella perché al suo fianco ha più di una cella (per la precisione 2), quindi la sua altezza comprende più di una riga (ne comprende naturalmente 2). Lo stesso vale per le altre due celle d'intestazione. Nell'esempio è stata adottata una colorazione differente proprio per sottolineare il rapporto che c'è fra celle e metacelle.
A questo punto dovrebbe essere abbastanza facile capire il codice sorgente che ha generato la tabella dell'esempio:

<CENTER>
<TABLE BORDER=1>
<TR BGCOLOR=#FFFF00><TH ROWSPAN=2>Anfibi</TH><TD>Rana</TD></TR>
 <TR BGCOLOR=#FFFF00><TD>Salamandra</TD></TR>
<TR BGCOLOR=#DDDD00><TH ROWSPAN=3>Pesci</TH><TD>Merluzzo</TD></TR>
 <TR BGCOLOR=#DDDD00><TD>Trota</TD></TR>
 <TR BGCOLOR=#DDDD00><TD>Salmone</TD></TR>
<TR BGCOLOR=#BBBB00><TH ROWSPAN=4>Scimmie</TH><TD>Babbuino</TD></TR>
 <TR BGCOLOR=#BBBB00><TD>Gorilla</TD></TR>
 <TR BGCOLOR=#BBBB00><TD>Orango</TD></TR>
 <TR BGCOLOR=#BBBB00><TD>Scimpanzè</TD></TR>
</TABLE>
</CENTER>

Alcune righe del testo sorgente sono state appositamente scritte con uno spazio di rientro per meglio evidenziare la struttura a metacelle della tabella (i rientri sono ininfluenti per il browser ma sono utili per chi deve leggere il testo sorgente).
Gli attributi che permettono di trasformare una cella in metacella sono ROWSPAN (metacella orizzontale) e COLSPAN (metacella verticale). Essi vanno usati nelle tag <TD> e <TH>. Il valore numerico degli attributi rappresenta rispettivamente il numero di righe e di colonne che affiancano la metacella.

Importante! I browser MS Internet Explorer e Netscape Navigator non hanno difficoltà nella rappresentazione delle tabelle con metacelle, mentre Opera v3.21 (versione italiana) presenta qualche imperfezione nel disegnare i bordi delle celle.

Le tabelle affiancate

Il linguaggio HTML non possiede un'istruzione che consente di visualizzare direttamente due tabelle affiancate. Infatti in condizioni normali le due tabelle vengono mostrate dal browser sempre una sotto l'altra, secondo l'ordine in cui compaiono nel testo sorgente. Come fare allora per risolvere questo problema? Il trucco sta nel costruire una terza tabella senza bordo e senza titolazione, cioè praticamente invisibile. Tale tabella consiste, per esempio, di una sola riga con due celle. La sua funzione è di fare da contenitore per le altre due tabelle, quelle visibili, le quali saranno inserite nelle due celle della tabella invisibile. La distanza fra le celle, e quindi quella fra le due tabelle affiancate, può essere regolata con l'attributo CELLPADDING visto in precedenza.
Vediamo l'esempio concreto:

<CENTER>
<TABLE CELLPADDING=40> <!--- Tabella invisibile che fa da contenitore --->
<TR>

<TD> <!--- Inizio della prima cella invisibile --->

<!--- Prima tabella --->

<TABLE BORDER=1>
<TR><TH>Costellazione</TH><TH>Sigla</TH></TR>
<TR><TD>Acquario</TD><TD>Aqr</TD></TR>
<TR><TD>Ariete</TD><TD>Ari</TD></TR>
<TR><TD>Bilancia</TD><TD>Lib</TD></TR>
<TR><TD>Cancro</TD><TD>Cnc</TD></TR>
<TR><TD>Capricorno</TD><TD>Cap</TD></TR>
<TR><TD>Gemelli</TD><TD>Gem</TD></TR>
</TABLE>

</TD> <!--- Fine della prima cella invisibile --->

<TD> <!--- Inizio della seconda cella invisibile --->

<!--- Seconda tabella --->

<TABLE BORDER=1>
<TR><TH>Costellazione</TH><TH>Sigla</TH></TR>
<TR><TD>Leone</TD><TD>Leo</TD></TR>
<TR><TD>Pesci</TD><TD>Psc</TD></TR>
<TR><TD>Sagittario</TD><TD>Sgr</TD></TR>
<TR><TD>Scorpione</TD><TD>Sco</TD></TR>
<TR><TD>Toro</TD><TD>Tau</TD></TR>
<TR><TD>Vergine</TD><TD>Vir</TD></TR>
</TABLE>

</TD> <!--- Fine della seconda cella invisibile --->

</TR>
</TABLE>
</CENTER>

Nel testo sorgente sono stati inseriti dei commenti per facilitare l'identificazione dei singoli elementi.
Qui sotto vediamo il risultato ottenuto col browser:

Costellazione	Sigla
Acquario	Aqr
Ariete	Ari
Bilancia	Lib
Cancro	Cnc
Capricorno	Cap
Gemelli	Gem

Costellazione	Sigla
Leone	Leo
Pesci	Psc
Sagittario	Sgr
Scorpione	Sco
Toro	Tau
Vergine	Vir

L'utilizzo dell'attributo CELLPADDING ha però un difetto: crea un spazio vuoto non solo fra le due tabelle affiancate, ma anche uno spazio uguale sopra e sotto le due tabelle. Questo fatto certe volte può dare fastidio. Per rimediare conviene strutturare la tabella invisibile in un altro modo, ovvero con tre celle invece di due. La prima e la terza cella conterranno le due tabelle visibili da affiancare, mentre la seconda cella conterrà una sequenza di caratteri spazio ( ) lunga tanto quanto è la distanza che si desidera creare fra le due tabelle affiancate. Provate per esercizio a creare una pagina HTML con due tabelle affiancate e separate con il metodo citato delle tre celle.

Disposizione d'immagini con tabelle

Il trucco visto nel paragrafo precedente torna utile anche per disporre in vari modi due o più immagini in una pagina Web. Infatti è sufficiente creare una tabella invisibile con tante righe e colonne, poi riempire le celle giuste con le immagini in modo che vadano a disporsi nella maniera voluta. Le altre celle vanno riempite con caratteri spazio (o con del testo), in numero sufficiente a creare la distanza desiderata fra le immagini.
Per riempire una cella con un'immagine è sufficiente scrivere la tag del file grafico corrispondente fra le tag d'apertura e chiusura della cella medesima. Per esempio:

<TD><IMG SRC="foto101.jpg" WIDTH=100 HEIGHT=90 ALT="Carica dei 101"></TD>

Questo metodo, per usare una similitudine, è come disporre i pezzi su una scacchiera, dove le caselle sono le celle della tabella invisibile ed i pezzi sono le immagini.

L'effetto cornice

Le tabelle si prestano anche ad un altro utilizzo, probabilmente non previsto originariamente dagli inventori del linguaggio HTML. Sfruttando il bordo di una tabella si è in grado di creare una cornice attorno a una titolazione, come si vede dal sottostante esempio:

<CENTER>
<TABLE BORDER=6>
<TR><TD BGCOLOR=#0000BB><FONT COLOR=#FFFF00 SIZE=9 FACE="Verdana">&nbsp;Pizzeria Primavera&nbsp;</FONT></TD></TR>
</TABLE>
</CENTER>

Il browser lo visualizza così:

Pizzeria Primavera

Notate come è stato adoperato il carattere spazio per staccare la scritta "Pizzeria Primavera" dai bordi sinistro e destro della cornice.

L'effetto cornice si può utilizzare anche con un'immagine:

<CENTER>
<TABLE BORDER=8>
<TR><TD><IMG SRC="kilbey.jpg" WIDTH=132 HEIGHT=132 ALT="Steve Kilbey"></TD></TR>
</TABLE>
</CENTER>

Ecco il risultato:

Si può migliorare l'effetto vicino ai bordi interni della cornice dando alla cella un colore di sfondo simile a quello dell'immagine:

<CENTER>
<TABLE BORDER=8>
<TR><TD BGCOLOR=#000088><IMG SRC="kilbey.jpg" WIDTH=132 HEIGHT=132 ALT="Steve Kilbey"></TD></TR>
</TABLE>
</CENTER>

Con questa modifica al codice sorgente il browser riempirà di colore tutta la parte interna della cornice, nascondendo le imperfezioni vicino al bordo interno:

Last modified: Monday, 16 March 2020, 10:16 AM