ELEMENTI DEL LINGUAGGIO HTML |
Le tabelle sono uno degli strument più potenti e flessibili per la composizione delle pagine ipertestuali. Esse cominciano ad essere supportate già dalla versione 1.1 del Netscape Navigator, sulla base delle specificazioni contenute nell'HTML 3.0. Si osservi la seguente tabella:
| PRIMA CASELLA | SECONDA CASELLA |
| TERZA CASELLA | QUARTA CASELLA |
essa è stata realizzata scrivendo queste istruzioni:
Istruzioni |
Significato |
| <CENTER> | |
| <table border> | inizio della tabella, con bordo visibile |
| <tr> | inizio di una riga |
| <td>PRIMA CASELLA</td> | inizio e fine di una casella |
| <td>SECONDA CASELLA</td> | inizio e fine di una casella |
| </tr> | fine di una riga |
| <tr> | inizio di una riga |
| <td>TERZA CASELLA</td> | inizio e fine di una casella |
| <td>QUARTA CASELLA</td> | inizio e fine di una casella |
| </tr> | fine di una riga |
| </table> | fine della tabella |
| </CENTER> |
Come si vede, il TAG che definisce una tabella è <TABLE>, mentre
quello di chiusura è </TABLE>.
La coppia di tags che definiscono una riga é <TR> e </TR>.
Per ogni riga, ogni cella è poi definita dalla coppia <TD> e </TD>.
Una cella può contenere qualunque costrutto HTML: un testo, una immagine, un campo, un
form, ecc.
Il tag <TABLE> ammette i seguenti attributi, tutti facoltativi:
| BORDER=x | definisce lo spessore, in pixel, del bordo che circonda la tabella. | |
| CELLSPACING=x | definisce lo spazio in pixel tra le celle ed il bordo. | |
| CELLPADDING=x | definisce lo spazio in pixel tra il contenuto di una cella ed il bordo della stessa. | |
| WIDTH=x | Specifica la larghezza della tabella in pixel. | |
| WIDTH=x% | Specifica la larghezza della tabella in percentuale di spazio rispetto alla dimensione della finestra. | |
| HEIGHT=x | Specifica l'altezza della tabella in pixel. | |
| HEIGHT=x% | Specifica l'altezza della tabella in percentuale di spazio rispetto alla dimensione della finestra. | |
| ALIGN=left | Allinea la tabella al margine sinistro della finestra, consentendo la visualizzazione di un testo alla sua destra. (ATTENZIONE: parametro riconosciuto solo da Internet Explorer v2.0+ e Netscape) | |
| ALIGN=right | Allinea la tabella al margine destro della finestra, consentendo la visualizzazione di un testo alla sua sinistra. (ATTENZIONE: parametro riconosciuto solo da Internet Explorer v2.0+ e Netscape) | |
| VALIGN=top | Allinea il testo circostante con la parte superiore della tabella. (ATTENZIONE: parametro riconosciuto solo da Internet Explorer v2.0+) | |
| VALIGN=bottom | Allinea il testo circostante con la parte inferiore della tabella. (ATTENZIONE: parametro riconosciuto solo da Internet Explorer v2.0+) |
Per meglio comprendere il significato degli attributi BORDER, CELLSPACING E CELLPADDING si veda la seguente figura:
Ed i seguenti esempi.
<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=5>Ecco una tabella completa con tutti gli attributi. Utilizzatela come riferimento per gli esempi successivi. |
|
<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=0>Notare l'assenza di spazio fra le caselle, che risultano praticamente unite. |
|
<TABLE BORDER=5 CELLPADDING=0 CELLSPACING=5>Notare l'assenza di spazio fra le scritte all'interno delle caselle e il bordo delle stesse. |
|
<TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0>Notare l'assenza di bordo e la distanza fra le scritte. |
|
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=5>Notare l'assenza di bordo e la distanza fra le scritte. |
|
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>Notare l'assenza di bordo e la distanza fra le scritte. |
|
Ulteriore esempio:
più stretta |
più larga |
più stretta |
più larga |
che è stata realizzata con le seguenti istruzioni:
<table border width=100%>
<tr>
<td width=20%> più stretta </td>
<td width=80%> più larga </td>
</tr>
<tr>
<td width=20%> più stretta </td>
<td width=80%> più larga </td>
</tr>
</table>
Ulteriori estensioni, proposte da Netscape, sono le seguenti.
<CAPTION>....</CAPTION> permette di inserire un testo che apparirà come titolo della tabella.
Il tag <TR> può essere dotato dei seguenti attributi:
| ALIGN= | LEFT= il testo nelle celle della riga apparirà giustificato a sinistra
(default); RIGHT= il testo apparità giustificato a destra CENTER= il testo apparità centrato; JUSTIFY= il testo sarà giustificato nel caso in cui sia possibile, altrimenti l'effetto è identico a ALIGN=left; DECIMAL= i paragrafi sono indentati in modo tale che le prime occorrenze del carattere definito dall'attributo DP (per default il punto decimale, su ogni riga siano allineate verticalmente. |
| VALIGN= | TOP= il contenuto di ogni cella della riga appare alla cima di ognuna di esse; MIDDLE= il contenuto di ogni cella appare centrato verticalmente in ognuna di esse (default); BOTTOM= il contenuto di ogni cella appare al fondo di ognuna di esse; BASELINE= è utilizzato per garantire che la prima riga di testo di ogni cella sia sulla stessa linea base. |
L'attributo <DP> specifica il carattere da utilizzare nell'utilizzo dell'attributo ALIGN=DECIMAL.
Il tag <TH> può essere posto dopo il tag <TR> per definire una intestazione (header) di riga.
Ad esempio: <TH>Profitti nel settore alimentare.
I tag <TD> e <TH> ammettono gli stessi attributi di <TR>: ALIGN, VALING e DP ed inoltre:
 | ROWSPAN=numero : indica il numero di righe occupate dalla cella in oggetto (serve per espandere una cella facendo in modo che occupi il posto di due o più celle); |
| COLSPAN=numero : indica il numero di colonne in cui suddividere la cella in oggetto. |
L'intera tabella, o solo ad una riga o solo una cella, può essere dotata di un colore di sfondo, mediante il tag:
BGCOLOR=#RRGGBB
assegnato, rispettivamente, al tag <TABLE>, oppure al tag <TR>, o al tag <TD>. Questo attributo viene riconosciuto da Netscape e da Internet Explorer 2.0 e superiori.
Con Explorer 2.0 e superiori, anche il colore del bordo può essere stabilito mediante uno specifico attributo:
BORDERCOLOR=#RRGGBB
che ammette anche le sottospecificazioni:
BORDERCOLORLIGHT=#RRGGBB e BORDERCOLORDARK=#RRGGBB
Con Explorer 2.0 e superiori lo sfondo di una tabella può essere costituito da una immagine:
<TABLE BACKGROUND="url_immagine"
Come si è visto, gli attributi BGCOLOR, BORDERCOLOR, BORDERCOLORDARK E BORDERCOLORLIGHT possono essere associati ai tags TABLE, TH, TR e TD. In caso di sovrapposizioni il tag che deterrminerà il colore finale sarà, in ordine di importanza: TD, TH, TR e TABLE.
