La Guida On-Line all'HTML per l'Internet Publishing tutta in Italiano
(C) 1995-98 by Flavio Del Greco e Valerio Zanini

Creare tabelle

  HTML prevede delle estensioni che saranno supportate completamente solo con la versione 3. Tra queste ci sono i comandi per la gestione delle tabelle.
  Una tabella può essere inserita molto facilmente in una pagina semplicemente componendola tramite un editor ed inserendola con il comando <PRE>, che ne conserva intatta la formattazione:

<HTML>
<HEAD> <TITLE>Semplice tabella</TITLE> </HEAD>
<BODY>
<PRE>
<FONT SIZE=2> Andamento prezzi trimestrale
Componente Gennaio Febbraio Marzo
------------------------------------------
CPU 250.000 235.000 198.000
Hard Disk 470.000 436.000 421.000
</FONT>
</PRE>
</BODY>
</HTML>
  Andamento prezzi trimestrale

Componente    Gennaio  Febbraio    Marzo
------------------------------------------
   CPU	      250.000   235.000  198.000
 Hard Disk    470.000   436.000  421.000


  L'aspetto grafico di questa tabella può essere notevolmente migliorato utilizzando il comando a ciò predisposto: <TABLE>. Questo comando indica il punto d'inizio dei dati che vanno inseriti nella tabella e prevede di essere chiuso alla fine dei dati stessi. Accetta inoltre un parametro BORDER che specifica lo spessore del bordo della tabella.
  Vediamo allora come si può implementare la stessa tabella tramite il comando <TABLE>:

Andamento prezzi trimestrale
ComponenteGennaioFebbraioMarzo
CPU250.000235.000198.000
Hard Disk470.000436.000421.000

  Il relativo codice è il seguente:

<HTML>
<HEAD> <TITLE>Semplice tabella </TITLE></HEAD>
<BODY>
<TABLE BORDER=3>
<CAPTION><FONT SIZE=4> Andamento prezzi trimestrale</FONT></CAPTION>
<TR><TH>Componente<TH>Gennaio<TH>Febbraio<TH>Marzo
<TR><TH ALIGN=CENTER>CPU<TD ALIGN=RIGHT> 250.000<TD ALIGN=RIGHT> 235.000<TD ALIGN=RIGHT> 198.000
<TR><TH ALIGN=CENTER>Hard Disk<TD ALIGN=RIGHT> 470.000<TD ALIGN=RIGHT> 436.000<TD ALIGN=RIGHT> 421.000
</TABLE>
</BODY>
</HTML>

  Prima di vedere i singoli comandi per la gestione della tabella a quale scopo sono predisposti, vogliamo presentare un altro esempio in cui si utilizzano delle intestazioni che coprono due o più colonne/righe:

Prezzi ultimo mese
 PrezzoIVA
normalescontato
CPU250.000235.00019%
Hard Disk450.000435.00019%

  Il sorgente per questa tabella è il seguente:

<HTML>
<HEAD> <TITLE> Semplice tabella </TITLE></HEAD>
<BODY>
<TABLE BORDER=3>
<CAPTION><FONT SIZE=4> Prezzi ultimo mese</FONT></CAPTION>
<TR><TH ROWSPAN=2><TH COLSPAN=2>Prezzo<TH>IVA
<TR><TH>normale<TH>scontato
<TR><TH ALIGN=CENTER> CPU <TD ALIGN=RIGHT> 250.000<TD ALIGN=RIGHT> 235.000<TD ALIGN=RIGHT> 19%
<TR><TH ALIGN=CENTER> Hard Disk <TD ALIGN=RIGHT> 450.000<TD ALIGN=RIGHT> 435.000<TD ALIGN=RIGHT> 19%
</TABLE>
</BODY>
</HTML>

  Non c'è a questo punto bisogno di puntualizzare la maggiore versatilità ed efficacia che si ottiene tramite il comando <TABLE>!

  Passiamo dunque ad analizzare la funzionalità di ogni comando:

  • CAPTION Inserito all'inizio della tabella permette di darle una didascalia. Il comando va chiuso tramite </CAPTION>.
  • TR Inizia una nuova RIGA della tabella. Va inserito ad ogni cambio riga.
  • TH Inizia una nuova COLONNA, fornendone l'intestazione, che verrà visualizzata con uno stile in maggiore evidenza rispetto ai dati della tabella.
  • TD Nuova casella DATI. Specificando in sequenza vari comandi <TD> con i relativi dati si introducono consecutivamente tutte le celle di una stessa riga. Per passare alla riga successiva si usi il comando <TR>.

      Il comando TABLE può avere i seguenti attributi:
    • WIDTH Specifica la larghezza della tabella, in pixel o in percentuale rispetto alla finestra del browser.
    • HEIGHT Specifica l'altezza.
    • ALIGN Specifica l'allineamento del contenuto delle celle.
    • VALIGN Ne specifica l'allineamento verticale rispetto ai bordi delle celle.
    • BGCOLOR Definisce, con le solite modalità (BGCOLOR="#rrggbb"), il colore di sfondo della tabella.
    • BORDERCOLOR Definisce il colore che dovranno avere i bordi.
    • BORDERCOLORDARK Specifica il colore della parte illuminata dei bordi (effetto 3D). Solo Internet Explorer.
    • BORDERCOLORLIGHT Specifica il colore della parte buia dei bordi (effetto 3D). Solo Internet Explorer.
    • BORDER Specifica la larghezza del bordo esterno della tabella; "0" per non avere bordi.
    • CELLPADDING Serve per imporre un contorno interno alle celle che deve essere lasciato vuoto.
    • CELLSPACING Impone la distanza fra le celle, ovvero la larghezza dei bordi interni.

      I comandi <TR>, <TH> e <TD> possono comprendere una serie di parametri:
    • ALIGN Permette di specificare l'allineamento dei dati all'interno di una cella. Può assumere i valori RIGHT (per l'allineamento a destra), LEFT (per l'allineamento a sinistra) e CENTER (per la centratura nella casella). Se utilizzato con il comando <TR> permette di associare un allineamento a tutti gli elementi di una stessa riga. Il default è LEFT per le celle dati e CENTER per le celle d'intestazione.
    • VALIGN Funziona esattamente come ALIGN, ma permette di stabilire l'allineamento verticale dei paragrafi nelle celle. I valori accettati sono TOP (allineamento in alto), MIDDLE (centratura) e BASELINE (allineamento in basso). Il default è CENTER per tutte le celle.
    • COLSPAN Controlla il numero di colonne su cui una cella si può estendere. Utilizzandolo insieme a ROWSPAN è possibile creare delle celle larghe 2 o piu' righe/colonne.
    • ROWSPAN Definisce il numero di righe su cui incide la casella.
    • HEIGHT Definisce l'altezza della cella, o dell'intera tabella.
    • WIDTH Definisce la larghezza della cella, o dell'intera tabella.
    • NOWRAP Indica che il testo contenuto nella cella non dovrà essere spezzato su più linee.
    • BGCOLOR Specifica quale deve essere il colore dell'intera tabella, o della riga, o della singola cella.
    • BORDERCOLOR Specifica il colore che devono avere i bordi.
    • BACKGROUND Attributo riconosciuto solo da Internet Explorer, serve per specificare una immagine da utilizzare come sfondo.
      Dopo aver letto il significato di questi comandi e dei relativi parametri tornate a dare un'occhiata al codice HTML della tabella precedente per capirne bene il significato. Vedrete che con poche prove è possibile creare tabelle di notevole effetto.

      Le celle della tabella possono contenere un qualsiasi elemento HTML: testo, immagini, collegamenti. Utilizzando la tabella è quindi possibile, ad esempio, creare una griglia di pulsanti come quella utilizzata in questa guida per l'indice generale, in cui sono inserite immagini accanto al testo, ed il tutto rappresenta un collegamento all'opportuna sezione.

      E' molto importante notare che il comando <TABLE> va chiuso con il comando </TABLE> alla fine della tabella. Se così non viene fatto è molto probabile che il browser non riesca ad interpretare correttamente la vostra pagina e la visualizzi completamente alterata.

      *** ATTENZIONE *** Il comando TABLE è in effetti molto potente, ma anche molto "delicato": oltre a verificare la corretta sintassi, in particolare la chiusura, bisogna stare attenti all'utilizzo delle TABLE insieme ad altri comandi, come ad esempio quelli non ancora definitivamente standardizzati, fra i quali le TABLE stesse (provate ad inserire un oggetto di tipo "SELECT" o "SELECT MULTIPLE" di una FORM all'interno di una TABLE...!). Questo tipo di inconveniente dovrebbe essere eliminato con versioni future dei browser e con la definizione dello standard.

      Un'altra cosa interessante, è la possibilità di nidificare le TABLE: una cella può contenere a sua volta un'altra TABLE. Controllate però, come sempre, se le cose funzionano... e ricordatevi che se da voi va tutto bene non è detto che sia così anche con altri browser!

      Infine una piccola applicazione: per generare una cornice intorno ad un testo che si vuole evidenziare (come qui fatto per i listati HTML) si può utilizzare il bordo di una tabella inserendo tutto il testo in una sola cella.


  • Indietro all'INDICE GENERALE


    WebKit
    (C) 1995-98 by Valerio Zanini e Flavio Del Greco
    Tutti i diritti riservati.

    Se avete qualsiasi suggerimento o correzione vi preghiamo di contattarci attraverso E-Mail.

    I diritti di riproduzione di questa guida appartengono agli autori. Per richiedere permessi di duplicazione parziale di quanto qui contenuto o per ulteriori informazioni non esitate a scriverci.