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!
|
|