Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

21. Tabelle

Obiettivi

• Progettare una tabella per web page con righe e colonne di testo in ordine perpendicolare.
• Scrivere il codice per schemi di layout integrati tra testo e figure.
• Scrivere il codice per una tabella invisibile che crei colonne una attaccata all'altra.
• Creare una tabella che abbia celle di diverso colore.
• Creare una tabella che usi immagini come sfondo per le celle.

Lezione

Le tabelle furono introdotte nell'HTML 3.0 e successivamente migliorate da Netscape per aggiungere un'altra dimensione alla progettazione delle pagine web. Esse forniscono una struttura per organizzare altri elementi HTML "in griglie" all'interno della pagina. Uno degli usi piu' ovvi delle tabelle e' quello in cui bisogna formattare... colonne di testo! Ma le tabelle aprono anche una porta verso molte altre opzioni di layout.

Il codice per le tabelle puo' sembrare molto complesso -- ma cominceremo dalle cose semplici e costruiremo alcune tabelle per la nostra lezione di Volcano Web.

Per partire, tienti in mente questo concetto:

Le tabelle si cominciano a costruire dalla parte superiore sinistra, poi si passa alle colonne della prima riga, poi alla seconda riga e alle colonne della seconda riga...

      -->  -->  -->  -->  -->  --> 
      ___________________________|
      |
      -->  -->  -->  -->  -->

Possiamo chiamare cella ogni griglia della tabella

Tag di Base per le Tabelle

<table border=1>
  <tr>
  <td>Riga 1 col 1</td>
  <td>Riga 1 col 2</td>
  <td>Riga 1 col 3</td>
  </tr>

  <tr>
  <td>Riga 2 col 1</td>
  <td>Riga 2 col 2</td>
  <td>Riga 2 col 3</td>
  </tr>
  
  <tr>
  <td>Riga 3 col 1</td>
  <td>Riga 3 col 2</td>
  <td>Riga 3 col 3</td>
  </tr>

</table>

Allineamento Orizzontale	Allineamento Verticale
<td align=left> allinea tutti gli elementi al lato sinistro della cella (questa e' l'impostazione di default) <td align=right> allinea tutti gli elementi al lato destro della cella <td align=center> allinea tutti gli elementi al centro della cella	<td valign=top> allinea tutti gli elementi al bordo superiore della cella <td valign=bottom> allinea tutti gli elementi al fondo della cella <td valign=middle> allinea tutti gli elementi nel mezzo della cella (questo e' il settaggio di default)

Puoi combinare questi attributi:

  <td align=left valign=bottom>

Righe e Colonne

<table border>
  <tr>
  <td>Riga 1 col 1</td>
  <td align=center colspan=2>
   Riga 1 col 2-3</td>
  </tr>

  <tr>
  <td>Riga 2 col 1</td>
  <td>Riga 2 col 2</td>
  <td>Riga 2 col 3</td>
  </tr>
  
  <tr>
  <td>Riga 3 col 1</td>
  <td>Riga 3 col 2</td>
  <td>Riga 3 col 3</td>
  </tr>
</table>

<table border=1>
  <tr>
  <td>Riga 1 col 1</td>
  <td align=center colspan=2>
   Riga 1 col 2-3</td>
  </tr>

  <tr>
  <td>Riga 2 col 1</td>
  <td valign=top rowspan=2>
  Riga 2 col 2</td>
  <td>Riga 2 col 3</td>
  </tr>
  
  <tr>
  <td>Riga 3 col 1</td>
  <td>Riga 3 col 3</td>
  </tr>
</table>

C'e' ancora un po' da fare, ma smettiamo per un attimo di guardare a questi noiosi esempi e torniamo a lavorare alla nostra web page...

Un Tabella di Dati

1. Apri il file intro.html nel tuo text editor.
2. Cancella tutto quello che c'è Dentro inclusi i tag <pre>...</pre>.
3. Al loro posto metti:

   
   <table border>
   <tr>
   <th>Eruzione</th>                     
   <th>Data</th>           
   <th>Volume in km<sup>3</sup></th>
   </tr>
   
   <tr>
   <td>Paricutin, Mexico</td>
   <td align=center>1943</td>
   <td align=center>1.3</td>
   </tr>
   
   <tr>
   <td>Vesuvio, Italia</td>
   <td align=center>79 A.C.</td>
   <td align=center>3</td> 
   </tr>
   
   <tr>
   <td>Mount St. Helens,<br>Washington</td>
   <td align=center>1980</td>
   <td align=center>4</td> 
   </tr>
   
   <tr>
   <td>Krakatoa, Indonesia</td>
   <td align=center>1883</td>
   <td align=center>18</td>
   </tr>
   
   <tr>
   <td>Long Valley, California</td>
   <td align=center>preistorico</td>
   <td align=center>&gt;450 &amp; &lt;700</td>
   </tr> 
   
   <tr>
   <td>Yellowstone, Wyoming</td>
   <td align=center>preistorico</td>
   <td align=center>400</td> 
   </tr>
   </table>
   

   NOTA: Guarda al codice per questa prima riga. I tag Table Header [Titoli della Tabella] <th>...</th> funzionano esattamente come i tag <td>...</td> tranne che ogni testo e' reso automaticamente in grassetto e tutti gli oggetti centrati.

   Guarda anche che nella cella per "Long Valley" devi usare l'HTML per i caratteri speciali per avere i simboli "<", ">", and "&" (Vedi lezione 10)

4. Salva ed Aggiorna nel tuo web browser. Puoi confrontare i tuoi sforzi con questo esempio di come la tabella dovrebbe risultare a questo punto.

   NOTA: La tabella potrebbe non essere completamente distinguibile perche' lo sfondo e' nero pieno.

5. Ora aggiungiamo alcune cose in piu' alla nostra tabella.
6. Alcuni browser ti permettono di specificare altri settaggi per le linee di costruzione della tabella. Questi sono attributi:

     <table border=X cellpadding=Y cellspacing=Z>

   dove X e' la larghezza (in pixel) del bordo esterno della tabella. L'attributo cellpadding specifica quanto "spazio" vuoto esiste tra gli elementi nella cella e le sue pareti -- valori alti per Y fanno la cella più larga ("imbottire" la cella). L'attributo cellspacing specifica (in pixel) la larghezza tra le linee interne che dividono le celle.

   Modifica cosi' il tuo tag <table>:

     <table border=3 cellpadding=4 cellspacing=8>

7. Il tag <caption> posiziona una stringa di testo (centrata in larghezza con la tabella) come titolo per la tabella. Modifica cosi' le linee della tua tabella:

     <table border=3 cellpadding=4 cellspacing=8>
     <caption><b><font size=+1>
     Volume di Alcune delle Eruzioni Vulcaniche Piu' Famose</font></b></caption>

   Puoi includere altro codice dentro il tag <caption>; solo assicurati che sia dentro i tag <table>...</table>.

8. E solo per divertimento, coloriamo d'arancio il testo nei tag <th>...</th> (per altri testi colorati, vai alla lezione 19). Modifica cosi' il codice per la prima riga:

     <tr>
     <th><font color=#EE8844>Eruzione</font></th>                     
     <th><font color=#EE8844>Data</font></th>           
     <th><font color=#EE8844>Volume in km<sup>3</sup></font></th>
     </tr>

9. Ora spostiamo la tabella al centro della pagina. Se il tuo web browser supporta il tag <center>...</center>, allora circonda solo la tabella con questi tag. Per altro sull'allineamento del testo, vedi lezione 20.

10. Salva ed Aggiorna nel tuo web browser. Puoi confrontare il tuo file con questo esempio di come dovrebbe essere ora la tabella. Carina, eh?

11. In fine, aggiungeremo una colonna a sinistra -- vogliamo mostrare il gruppo delle eruzioni preistoriche (le ultime due righe) e quello delle altre eruzioni. Ora aggiungiamo una cella vuota mettendo <th></th> nella prima riga -- la ragione per cui lo abbiamo fatto diventera' piu' chiara quando tra poco costruiremo questa nuova colonna.

    <tr>
    <th></th>
    <th><font color=#EE8844>Eruzione</font></th>                     
    <th><font color=#EE8844>Data</font></th>           
    <th><font color=#EE8844>Volume in km<sup>3</sup></font></th>
    </tr>

12. Andiamo alla prima riga, aggiungiamo una prima cella che unisce le successive 4 righe

    
    <tr>
    <td rowspan=4>
    <font color=#EE8844>
    <i>eruzioni<br>
    osservate<br>
    da umani</i>
    </font></td>
    <td>Paricutin, Mexico</td>
    <td align=center>1943</td>
    <td align=center>1.3</td>
    </tr>
    

    NOTA: Abbiamo aggiunto alcuni br> cosi' che questa prima colonna non sia troppo larga. Puoi scoprire da solo gli effetti dell'omissione di questi tag.

13. E nella quinta riga, aggiungiamo una cella che unisce le 2 righe successive:

    
    <tr>
    <td rowspan=2>
    <font color=#EE8844>
    <i>supposte<br>
    dallo studio<br>
    di depositi</i>
    </font></td>
    <td>Long Valley, California</td>
    <td align=center>preistorico</td>
    <td align=center>&gt;450 & &lt;700</td>
    </tr> 

14. Salva ed Aggiorna ancora nel browser. Confronta il tuo con questoesempio di come la tabella dovrebbe ora sembrare. Le addizioni alla tabella sono concluse.

Tabelle Invisibili o Fantasma

Una tabella fantasma e' costruita nello stesso modo con cui abbiamo proceduto prima, eccetto che il tag <table> risulta:

  <table>

  <table border=0>

Se guardi al principio di questa pagina, la maggior parte di questa e' proprio una tabella fantasma che contiene in una delle sue celle una seconda tabella con i bordi! Comunque, stiamo facendo un salto avanti. Per il nostro esempio, riformatteremo il file usa.html in un formato a due colonne. Piuttosto che avere paragrafi larghi come una pagina allineati verticalmente sulla pagina, li metteremo lato contro lato come questo schizzo:

xxxxx xxxxx xxxx 
xxx xx xxxxx xx xx
 xxxx xxxxx xxxxx

  xxx xx x xxxx 
xxx xx x x xx xx
xxxx xxxxx xx
x xxxxx xxx xxxxx

_______
| img |
|     |
|_____|

Nota che la colonna di destra ha anche adiacente una figura che fa link ad un'immagine ad schermo intero (vedi lezione 8e)

1. Apri il file usa.html nel text editor.
2. Trova questa sezione:

   
   <font size=+1><B>Mount St Helens</B></font><br>
   Il 18 Maggio 1980, dopo un lungo periodo di riposo,
   questa tranquilla montagna nella provincia di Washington, forni'
   <a href="msh.html">osservazioni dettagliate</a> sul meccanismo delle eruzioni altamente esplosive.
   
   <p>
   <font size=+1><B>Long Valley</B></font><br>
   Il sismometro di campo misura i terremoti associati con le forze superficiali dei vulcani e possono servire a predire eventi futuri.
   E' posto su un altipiano noto come "Volcanic Tableland" formato da un'eruzione maggiore 600,000 anni fa.<p>
   <a href="../pictures/seismo.jpg">
   <img src="../pictures/stamp.gif"> 
   -- [immagine intera] --</a>

   e rimpiazzalo col seguente codice:

   <table border=0 cellpadding=6 cellspacing=2>
   <tr>
   <td><font size=+1><B>Mount St Helens</B></font></td>
   <td colspan=2><font size=+1><B>Long Valley</B></font></td>
   </tr>
   
   <tr>
   <td valign=top>Il 18 Maggio 1980, dopo un lungo periodo di riposo,
   questa tranquilla montagna nella provincia di Washington, forni'<a href="msh.html">
   osservazioni dettagliate</a> sul meccanismo delle eruzioni altamente esplosive.
   </td>
   
   <td valign=top>
   Il sismometro di campo misura i terremoti associati con le forze superficiali dei vulcani e possono servire a predire eventi futuri.
   E' posto su un altipiano noto come 
   "Volcanic Tableland" formato da un'eruzione maggiore 600,000 anni fa.
   </td>
   <td valign=top><a href="../pictures/seismo.jpg">
   <img src="../pictures/stamp.gif"></a>
   </td>
   </tr>
   
   <tr>
   <td colspan=3 align=right>
   <a href="../pictures/seismo.jpg">
   -- [immagine intera] --</td>
   </tr>
   </table>

   NOTA: osserva attentamente il codice. Stiamo usando proprio una tabella a 3 colonne -- il primo paragrafo (Mount St Helens) diventa la colonna a sinistra. La colonna di destra include una colonna di testo e un'altra colonna per una piccola immagine. La riga in fondo, allineata a destra e data dall'unione di 3 colonne, contiene il link che porta alla stessa immagine, ma piu' grande.

3. Salva ed Aggiorna ancora.

Tagliare una Lista Lunga

Il risultato e' trasformare una lista:

Liste Lunghe e Lineari		Colonna 1	Colonna 2
<ul> <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx <li> xx x xxxxx <li> xxx xx <li> xxxx x <li> xxx x xxx </ul>	in	<ul> <li> xxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx </ul>	<ul> <li> xxx xx <li> xxxx x <li> xxx x xxx </ul>

Ora taglieremo la lista dei riferimenti nella nostra pagina Progetti di Ricerca.

1. Apri il tuo fil proj.html.
2. Cerca la lista <ul>...</ul> sotto l'intestazione Riferimenti e rimpiazza tutto con:

   
     <table border=0 cellpadding=2 cellspacing=2>
     <tr>
     <td valign=top>
     <ul>
     <li><A HREF="http://www.avo.alaska.edu/">
     Alaska Volcano Observatory</A>
     <li><A HREF="http://vulcan.wr.usgs.gov/home.html">
     Cascades Volcano Observatory</A>
     <li><A HREF="http://www.dartmouth.edu/~volcano/">
     The Electronic Volcano</A>
     <li><A HREF="http://www.geo.mtu.edu/volcanoes/">
     Michigan Tech Volcanoes Page</a>
     <li><A HREF="http://www.geo.mtu.edu/eos/">
     NASA Earth Observing System (EOS) IDS Volcanology Team</A>
     <li><A HREF="http://www.geol.ucsb.edu/~fisher/">
     Volcano Information Center</a>
     </ul>
     </td>
     <td valign=top>
     <ul>
     <li><A HREF="http://vulcan.wr.usgs.gov/Servers/earth_servers.html">
     Volcano/Earth Science-Oriented Servers</A>
     <li><A HREF="http://volcanoes.usgs.gov/">
     US Geological Survey Volcanic Hazards Program</a>
     <li><a href="http://www.nmnh.si.edu/gvp/">
     Global Volcanism Program (GVP) </a>
     <li><a href= "http://hvo.wr.usgs.gov/volcanowatch/">
     Volcano Watch Newsletter</a>
     <li><a href="http://library.advanced.org/17457/">
     Volcanoes Online</a>
     <li><A HREF="http://volcano.und.edu/">
     VolcanoWorld</A>
     </ul>
     </td>
     </tr>
     </table>
   

   NOTA: Abbiamo solo preso una lista <ul>...</ul> e spezzata in due liste complete, ciascuna in una cella di una tabella invisibile con una riga e due colonne.

3. Salva ed Aggiorna. Confronta il tuo file con questo esempio.

Colorare le Tabelle

Se vuoi guardare all'ultimo esempio della pagina dei test per vedere se il tuo browser supporta la colorazione delle tabelle.

Useremo il colori RGB, come alla lezione 16 per colorare lo sfondo della pagina ed alla lezione 18 per colorare il testo.

E' semplice come inserire bgcolor=#FF0000 come un attributo ai vari tags <table>:

<table bgcolor=#880000>

<tr bgcolor=#880000>

<td bgcolor=#880000>

Ora aggiungeremo un po' di colore alla tabella di dati della pagina introduttiva. Non si trattera' di grandi quantita' di colore (ma puoi fare quello che vuoi sulle tue pagine personali). Nel nostro caso, aggiungeremo semplicemente il codice per fare le linee di costruzione grigio chiaro, piuttosto che nere come lo sfondo.

1. Apri il file intro.html nel text editor.
2. Per prima cosa trova tutti i tag <th> che portano i titoli delle colonne:

   
     <th><font color=#EE8844>Eruzione</font></th>                     
     <th><font color=#EE8844>Data</font></th>           
     <th><font color=#EE8844>Volume in km<sup>3</sup></font></th>
   

   ed aggiungi gli attributi per fare grigie queste celle (#222222):

   
     <th bgcolor=#222222><font color=#EE8844>Eruzione</font></th>                     
     <th bgcolor=#222222><font color=#EE8844>Date</font></th>           
     <th bgcolor=#222222><font color=#EE8844>Volume in km<sup>3</sup></font></th>
   

3. Ora, trova i due <td> che formattano le caselle e inserisci cio' che segue:

   
     <td  bgcolor=#222222 rowspan=4>
     <font color=#EE8844>
     <i>eruzioni<br>
   osservate<br>
   da umani</i>
     </font></td>
        :
        :
        :
     <td  bgcolor=#222222 rowspan=2>
     <font color=#EE8844>
     <i>supposte<br>
   dallo studio<br>
   di depositi</i>
     </font></td>
   

4. Salva ed Aggiorna nel tuo web browser. Confronta il tuo risultato con un esempio di come la tabella dovrebbe sembrare fino a questo punto.

<table background="image.gif">

<tr background="image.gif">

<td background="image.gif">

Se guardi la tabella all'inizio di questa pagina, puoi vedere che alcune celle hanno sfondi a colori pieni, ma che la cella che unisce la seconda riga usa un grafico per riempire il testo dietro la parola tabella con una fantasia di carta increspata:

Ora modificheremo la tabella che hai fatto prima di applicare gli sfondi grafici ai titoli nella nostra classifica di vulcani.

1. Vai al Centro Per Il Download delle Immagini Lezione 21 per prendere una copia della piccola immagine (<1k) che useremo come sfondo per parte della nostra tabella. Salvala nella tua directory/folder pictures come file chiamato pattern.gif.
2. Apri il tuo file intro.html.
3. Digita il contenuto per la prima riga di celle della tabella;

   
     <tr>
     <th></th>
     <th bgcolor=#222222><font color=#EE8844>Eruzione</font></th>                     
     <th bgcolor=#222222><font color=#EE8844>Data</font></th>           
     <th bgcolor=#222222><font color=#EE8844>Volume in km<sup>3</sup></font></th>
     </tr>
   

   Ora cambieremo il colore pieno dello sfondo nelle celle della prima riga per usare il file pattern.gif:

   
     <tr>
     <th></th>
     <th background="../pictures/pattern.gif">
       <font color=#EE8844>Eruzione</font></th>                     
     <th background="../pictures/pattern.gif">
       <font color=#EE8844>Data</font></th>           
     <th background="../pictures/pattern.gif">
       <font color=#EE8844>Volume in km<sup>3</sup></font></th>
     </tr>
   

4. Salva ed Aggiorna. Confronta cio' che hai ottenuto con un esempio di come dovrebbe ora sembrare la tabella.

Controlla il Tuo Lavoro

Verifica

1. Qual e' l'ordine con cui un browser interpreta gli elementi di un table tag?
2. Qual e' la differenza tra i tag <td>...</td> e <th>...</th>?
3. Dove va l'attributo colspan=X? Cosa fa?
4. Come crei una tabella con margini non visibili?
5. Come colori una singola riga?
6. Come puoi usare una fantasia come sfondo nell'ultima riga di una tabella? Per tutte le celle?

Pratica Indipendente

Informazioni Aggiuntive

Cosa puoi fare? Testare sempre le tue pagine su una connessione lenta o su un computer piu' vecchio del tuo! Se la tua pagina e' interamente costituita da tabelle, assicurati che tutti i tag <img...> abbiano incluse le loro dimensioni width= and height= (questo aiuta il browser a presentare la pagina piu' in fretta, se sa le dimensioni delle immagini). Se possibile, prova a mettere almeno una riga di testo prima di una tabella complicata, cosi' almeno qualcosa appare velocemente quando un utente raggiunge per la prima volta la tua pagina.

Prossimamente....

VAI A.... | Indice Delle Lezioni | indietro: "Allineamenti Speciali" | avanti: "Ancora su Immagini e Liste" |