lezione 7: le tabelle il Manuale di HTML a cura di Gabriele Gigliotti
 
intro | lezioni | articoli | dizionario | download | e-mail |
 
 
 
  Lezione 7: le tabelle  
       Le tabelle rappresentano uno dei più potenti strumenti a disposizione del progettista di un sito internet per realizzare un sito davvero accattivante grazie ad un maggiore controllo degli elementi presenti nella pagina. Quando parlo di tabella non mi riferisco solo a questo...

     ...che forse rappresenta l'uso più immediato che possa venire in mente ma soprattutto all'uso della tabella come intelaiatura di una pagina...come questa...

     Costruiamo una semplice tabella di 2 righe per 2 colonne, per un totale di 4 celle. Una volta appresa la struttura sarà facile modificarla inserendo a piacimento altre righe e/o colonne.
     I limiti di una tabella sono contrassegnati dalla coppia di tag <TABLE> e </TABLE>, il primo ne segna l'apertura mentre il secondo ne comunica la fine.
     Dopo il tag <TABLE> si può inserire (scrivo può perchè si tratta di un'opzione) il tag <CAPTION align=allineamento>.
     Così facendo si può inserire un'intestazione per la tabella che a seconda del valore specificato si può trovare in testa alla tabella
align=top
oppure in coda
align=bottom
     Si procede con l'apertura della prima riga con il tag <TR>, la chiusura della riga viene decretata mediante l'inserimento del corrispondente tag di chiusura </TR>.
     Tra questi due tag si inseriscono quelli che specificano la creazione delle celle, (è dunque ovvio che tutte le celle che si trovano fra questi due tag verranno visualizzate nella medesima riga) operando nel modo seguente:
<TD>contenuto della cella</TD>
     Ora che conosciamo tutti i tag necessari alla creazione di una tabella disponiamo di tutti gli elementi per crearne una:

<TABLE border=1> <--inizio tabella
<TR> <--inizio 1a riga
<TD>1.1</TD><--cella, 1a riga e 1a colonna
<TD>1.2</TD><--cella, 1a riga e 2a colonna
</TR> <--fine 1a riga
<TR> <--inizio 2a riga
<TD>2.1</TD><--cella, 2a riga e 1a colonna
<TD>2.2</TD><--cella, 2a riga e 2a colonna
</TR> <--fine 2a riga
</TABLE> <--fine tabella

     Per capire qual'è il risultato prodotto da questa serie di tag schiaccia il bottone.

     Quanto appena appreso è già sufficiente per creare una tabella, tuttavia può essere necessario esercitare un maggior controllo su alcuni aspetti.

     Il tag <TABLE> accetta 6 attributi.

  • align=allineamento
    La tabella può essere allineata a:
    • sinistra se scrivo align=left
    • centro se scrivo align=center
    • destra se scrivo align=right
  • width=ampiezza
    L'ampiezza della tabella può essere specificata in pixel o in valore percentuale
  • border=bordo_tabella
    Il bordo di una tabella che di default (condizione predefinita) presenta un valore pari a 1 corrispondente ad un
    border=1
    può essere reso più spesso specificando un valore più alto
    border=2, border=3 eccetera,
    oppure può essere del tutto annullato
    border=0
  • cellspacing=pixel
    A seconda del valore, espresso in pixel, riconosciuto a questo attributo si può agire sulla distanza esistente fra le celle.
  • cellpadding=pixel
    A seconda del valore, espresso in pixel, riconosciuto a questo attributo si può agire sulla distanza esistente tra il contenuto di una cella e i bordi della stessa.
  • bgcolor=colore
    Se lo si ritiene opportuno è possibile specificare un colore di sfondo per la tabella inserendo questo attributo con un appropriato valore, esistono due sistemi per specificare quale colore inserire, questa tecnica è descritta dettagliatamente nella seconda lezione

     Il tag <TR> supporta tre attributi:

  • align=allineamento
    Accetta gli stessi valori dell'omonimo attributo del tag <TABLE> con la differenza che in questo caso esso si limiterà a controllare solo l'allineamento della riga
  • valign=allineamento_verticale
    Controlla l'allineamento verticale di tutte le celle appartenenti alla riga in questione. Accetta tre valori:
    • align=top
      pone il contenuto di ogni cella della riga nella parte alta della cella
    • align=middle
      pone il contenuto di ogni cella della riga nel centro della cella
    • align=bottom
      pone il contenuto di ogni cella della riga nella parte bassa della cella
  • bgcolor=colore
    Accetta gli stessi valori dell'omonimo attributo del tag <TABLE>

     Il tag <TD> supporta tre attributi, si tratta degli stessi appena visti per il tag <TR> con l'unica differenza che il loro campo d'azione è limitato alla singola cella.

     Se ti stai chiedendo a cosa serve l'allineamento verticale eccoti un esempio.

I miei Pregi I miei Difetti
 

aitante

buono

comprensivo

coraggioso

dolce

generoso

leale

onesto

passionale

 

bugiardo!

L'impostazione di default è quella di allineare al centro della cella il testo (o l'immagine) inserita.
In questo caso, tale opzione risulta antiestetica, sarebbe meglio se si potesse avere la parola presente nella cella di sinistra in testa alla cella.
A tal fine si ricorre all'attributo valign=top da inserire nella cella di destra (in cui è elencato il difetto) così da ottenere il seguente risultato:

I miei Pregi I miei Difetti
 

aitante

buono

comprensivo

coraggioso

dolce

generoso

leale

onesto

passionale

 

bugiardo!

lezione 6 indice lezione 8
 
Nella lezione otto imparerai a gestire i frames per la creazione di strutture più complesse di siti web.
 

© Gabriele Gigliotti 1998 1999