|
|
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! |
|
|
Nella lezione otto imparerai a gestire i frames per la creazione di strutture più complesse di siti web.
|
|
|