Manuale di HTML
Le tabelle
Creare una tabella
Le prime versioni di HTML non prevedevano un layout elaborato, ne tantomeno la nozione di tabella. Ora che questo vuoto è stato colmato ci si può domandare come se ne sia potuto fare a meno. Le tabelle sono in assoluto lo strumento di formattazione più usato; esse infatti, non vengono utilizzate solo per visualizzare dati di fogli elettronici e database, ma anche per implementare testo su colonne multiple, o posizionare oggetti in punti particolari della pagina.
Una tabella è definita dal tag contenitore <TABLE>...</TABLE>, all'interno del quale si imposta la tabella riga per riga e poi cella per cella.
All'interno della tabella una riga si specifica mediante il tag contenitore <TR>...</TR> (Table Row); tutto quello che è compreso tra questi tag appartiene alla stessa riga della tabella.
All'interno di una riga vengono poi specificate le celle della tabella, mediante il tag contenitore <TD>...</TD> (Table Data).
Notiamo come all'interno di questi tag abbiamo volutamente lasciato dei puntini .... Questo per indicare che al loro posto va inserito qualcosa; ed infatti non avrebbe senso definire un elemento contenitore quale una tabella o una cella e poi non metterci nulla dentro, tranne in pochi casi, quando si vuole dare una certa impostazione grafica alla tabella o ad un gruppo di tabelle.
Vediamo subito l'esempio di una tabella semplice, ma prima definiamo un attributo del tag <TABLE>, l'attributo BORDER="n" che serve a dare un bordo alla tabella e alle sue celle; se è assente significa che la tabella non ha bordo e si vedrebbero solo i contenuti delle celle, ma non la struttura della tabella. Il numero n sta ad indicare lo spessore del bordo in punti.
La sintassi corretta è <TABLE BORDER="1">.
I tag <TABLE>, <TR> e <TD> riconoscono molti attributi, ma li vedremo immediatamente dopo l'esempio, in modo da non mettere troppa carne al fuoco, su un argomento che può portare una certa difficoltà all'inizio; ciò è dovuto non tanto ad una certa difficoltà intrinseca alla nozione di tabella, quanto alla complessità e alla grande quantità di elementi che ne contraddistinguono le proprietà.
La tabella del nostro esempio è una tabella molto semplice di 5 righe per 4 colonne.
<HTML> <HEAD> <TITLE>Guida di HTML</TITLE> .... </HEAD> <BODY BGCOLOR="#EEDDCC"> <CENTER><H2>Vendite Hardware</H2> <TABLE BORDER="1"> <TR> <TD></TD><TD>2003</TD><TD>2004</TD><TD>2005</TD> </TR> <TR> <TD>Computer</TD><TD>23</TD><TD>41</TD><TD>123</TD> </TR> <TR> <TD>Stampanti</TD><TD>7</TD><TD>31</TD><TD>98</TD> </TR> <TR> <TD>Scanner</TD><TD>-</TD><TD>2</TD><TD>11</TD> </TR> <TR> <TD>Modem</TD><TD>12</TD><TD>24</TD><TD>47</TD> </TR> </TABLE> </CENTER> .... </BODY> </HTML> |
Vendite hardware
|
Da questo esempio vediamo come non ci siano grosse difficoltà nell'uso di tabelle nell'impostazione del testo, e neanche ce ne saranno quando andremo a costruire tabelle più cemplesse con qualche elemento grafico in più. Quello che occorre sempre tenere a mente è che HTML interpreta le tabelle leggendone prima una riga e poi l'altra, ed è così che dovremo cercare di costruire una tabella, curandone l'impostazione una riga dopo l'altra.
Il tag <TABLE> riconosce gli attributi ALIGN, WIDHT, HEIGHT, BORDER, CELLSPACING e CELLPADDING.
L'attributo BORDER lo abbiamo già visto. L'attributo ALIGN serve per allineare la tabella con il bordo sinistro o destro della finestra oppure mettere la tabella al centro della pagina; i valori che può assumere sono infatti "left", "right" e "center". Gli attributi WIDTH e HEIGHT servono per impostare le dimensioni della tabella, in punti o in percentuale della intera finestra. Porre WIDTH="100%" vuol dire far occupare alla tabella tutto lo spazio a sua disposizione in senso orizzontale. L'attributo CELLSPACING="n" consente di specificare la distanza tra i bordi di due celle adiacenti o tra una cella ed il bordo esterno; l'impostazione di default assegna a tale attributo il valore 2. L'attributo CELLPADDING="n" consente di impostare la distanza tra il testo ed il bordo della cella circostante; se non impostato assume il valore 1.
Il tag <TR> è il più semplice e riconosce gli attributi ALIGN e VALIGN. Il primo serve, all'interno di tutte le celle della riga, per allineare il testo a sinistra, destra o al centro ("left", "right" e "center"); il valore predefinito è "left" e questo attributo può essere annullato reimpostando l'allineamento cella per cella. L'attributo VALIGN serve per allineare il testo in senso verticale, se c'è lo spazio; i valori possibili sono "top", "middle" e "bottom" e allineano il testo in alto, al centro e in basso dentro ciascuna cella della riga; naturalmente anche questo attributo può essere annullato reimpostando l'allineamento cella per cella.
Il tag <TD> riconosce gli attributi ALIGN, VALIGN, WIDTH, HEIGHT, ROWSPAN, COLSPAN, BGCOLOR e NOWRAP; i primi due hanno lo stesso significato che in <TR> e servono per allineare il contenuto della cella in senso orizzontale e verticale; WIDTH e HEIGHT impostano le dimensioni della cella, rispettivamente la larghezza e l'altezza, entrambi assumono valori espressi sia in numero di punti che in percentuali dello spazio a loro disposizione. ROWSPAN="x" e COLSPAN="y" permettono di unire due o più celle, e specificano di quanto la cella deve essere espansa; indicare COLSPAN="3" vuol dire che la cella in questione deve occupare lo spazio di 3 colonne; descriveremo questi due attributi nel prossimo capitolo, "LAVORARE CON LE CELLE". L'attributo BGCOLOR, come si può ben immaginare permette di impostare il colore di fondo della cella, espresso in notazione esadecimale "#RRGGBB" o mediante il nome del colore. Infine, molto interessante, è l'attributo NOWRAP che forza il contenuto della cella a rimanere visualizzato sulla stessa riga, senza ritorno a capo; volendo andare a capo si utilizzaranno i tag <BR> e <P>.
Vediamo ora alcuni miglioramenti che possiamo apportare alla nostra tabella.
Il tag <CAPTION>, posto all'interno della dichiarazione della tabella, permette di inserire una intestazione o una didascalia alla tabella. Esso accetta l'attributo ALIGN con i valori "top" e "bottom", con il quale è possibile mettere il titolo sopra o sotto alla tabella.
Infine nel visualizzare le colonne è possibile dar loro una intestazione, mediante il tag <TH> (TABLE Heading) al posto dei tag <TD>. Inoltre aumenteremo le dimensioni della tabella mediante gli attributi WIDTH e HEIGHT posti dentro il tag <TABLE>; questi attributi ammettono come valore una percentuale della finestra a loro disposizione oppure il numero di punti che si vuole come dimensione per la tabella.
Applichiamo queste modifiche alla tabella dell'esempio precedente.
<HTML> <HEAD> <TITLE>Guida di HTML</TITLE> .... </HEAD> <BODY BGCOLOR="#BBFFBB"> <CENTER><H2>Vendite Hardware</H2> <TABLE BORDER="1" WIDTH="90%" HEIGHT="160"> <CAPTION ALIGN="top">Negli anni 2003-2005</CAPTION> <TR> <TH></TH><TH>2003</TH><TH>2004</TH><TH>2005</TH> </TR> <TR> <TD>Computer</TD><TD>23</TD><TD>41</TD><TD>123</TD> </TR> <TR> <TD>Stampanti</TD><TD>7</TD><TD>31</TD><TD>98</TD> </TR> <TR> <TD>Scanner</TD><TD>-</TD><TD>2</TD><TD>11</TD> </TR> <TR> <TD>Modem</TD><TD>12</TD><TD>24</TD><TD>47</TD> </TR> </TABLE> </CENTER> .... <P ALIGN="justify">Notiamo come il testo inserito nel tag <CAPTION> non subisce formattazione, e quindi sarebbe bene che noi gliene dessimo una; mentre il tag <TH> centra il testo e lo visualizza in grassetto. </BODY> </HTML> |
Vendite hardware
.... Notiamo come il testo inserito nel tag <CAPTION> non subisce formattazione, e quindi sarebbe bene che noi gliene dessimo una; mentre il tag <TH> centra il testo e lo visualizza in grassetto. |
Nel prossimo capitolo descriveremo come impostare al meglio una tabella.