Le tabelle in HTML
Il fulcro della gestione di una tabella è senza dubbio l'elemento "cella" <td> che presenta gli stessi attributi del Tag <table> (ad eccezione di cellpadding e cellspacing), in più ci sono quattro altri attributi, tre dei quali proprietari di questo Tag, esaminiamoli:
valign - vertical align - serve ad impostare l'allineamento verticale del contenuto di una cella
Ipotizziamo di avere tre celle in orizzontale e che il contenuto di una di queste celle sia maggiore (in altezza) del contenuto delle altre, il contenuto di queste si posizionerebbe a metà cella in verticale, effetto che può risultare tremendamente scomodo ed antiestetico in taluni casi, ad esempio in un sito impostato integralmente in tabelle, vediamo un esempio:
<table align="center" border="1"> <tr> <td>Cella # 1<br>...<br>...<br>...</td> <td>Cella # 2</td> <td>Cella # 3</td> </tr> </table>
il risultato
Cella # 1 ... ... ... |
Cella # 2 | Cella # 3 |
Vediamo dunque come impostare il contenuto di una cella sempre al suo inizio in senso verticale:
<table align="center" border="1"> <tr> <td valign="top">Cella # 1<br>...<br>...<br>...</td> <td valign="top">Cella # 2</td> <td valign="top">Cella # 3</td> </tr> </table>
il risultato
Cella # 1 ... ... ... |
Cella # 2 | Cella # 3 |
I possibili valori di valign sono middle (centrato, di default), top (inizio cella) e bottom (fine cella).
Gli altri tre attributi del Tag <td> accennati in precedenza sono:
nowrap - impedisce al contenuto di una cella di andare a capo
<td nowrap>Questo testo non andrà a capo</td>
colspan - unisce due o più celle in orizzontale
rowspan - unisce due o più celle in verticale.
Per sua natura una cella DEVE formare un quadrilatero, non si può pensare di creare quindi una tabella composta da un numero dispari di celle, o meglio, con ad esempio una sola cella nella parte superiore con due celle in quella inferiore... tutte e tre della stessa grandezza! il codice proposto di sotto contiene dunque un ERRORE:
<table align="center" border="1"> <tr> <td>Cella # 1</td> </tr> <tr> <td>Cella # 2</td> <td>Cella # 3</td> </tr> </table>
questo è quanto ne risulterebbe:
Cella # 1 | |
Cella # 2 | Cella # 3 |
Viene comunque generato un quadrilatero con un pezzo erroneamente mancante, è necessario creare una struttura con un numero pari di celle... ma allora non è possibile in nessun caso avere una tabella con un numero dispari di celle?
Si, è possibile.
Ci torna in aiuto l'attributo colspan che viene incluso nella prima cella, il suo impiego è atto a creare virtualmente due celle e ad unirle, vediamo il codice corretto con il relativo risultato finale:
<table align="center" border="1">
<tr>
<td colspan="2">Cella # 1</td>
</tr>
<tr>
<td>Cella # 2</td>
<td>Cella # 3</td>
</tr>
</table>
Cella # 1 | |
Cella # 2 | Cella # 3 |
Il valore numerico assegnato a colspan è identificativo per il numero di celle sottostanti, se fossero state cinque celle sotto la cella "unica", il suo valore sarebbe stato colspan="5"
Cella unica (colspan="5") | ||||
Cella # 1 | Cella # 2 | Cella # 3 | Cella # 4 | Cella # 5 |
Allo stesso modo si comporta rowspan, per però unire celle in verticale, vediamo un esempio:
<table align="center" border="1">
<tr>
<td rowspan="2">Cella # 1</td>
<td>Cella # 2</td>
</tr>
<tr>
<td>Cella # 3</td>
</tr>
</table>
il risultato:
Cella # 1 | Cella # 2 |
Cella # 3 |
Il meccanismo in questo caso è leggermente più contorto e non immediato come il precedente, il mio consiglio è quello di effettuare centinaia prove, specialmente con quest'ultimo metodo di formattazione delle tabelle che, a dire il vero, è il meno utilizzato.
Formattazione di un'intera pagina in tabelle
L'utilizzo delle tabelle, come predetto, è molto diffuso tra i designer per la realizzazione delle strutture delle pagine, in questo scorcio della lezione riprendiamo in considerazione uno degli esempi finora esaminati ed immaginiamolo come struttura di una pagina:
*LOGO* | |
MENU Link Link Link Link Link |
Corpo della pagina, quest'area sarà dedicata
agli effettivi contenuti della pagina, è stato utilizzato
uno dei codici già presentati ed è stato lievemente ritoccato... ... vi lascio come esercizio il compito di ricostruirlo e migliorarlo fino a raggiungere gli effetti desiderati! |
Ultimi ritocchi...
Esistono altri elementi facenti parte della famiglia delle tabelle Html, esaminiamoli:
<tbody> - definisce il corpo di una tabella, ad esempio
<table align="center" border="1"> <tbody> <tr> <td>Cella # 1</td> <td>Cella # 2</td> <td>Cella # 3</td> </tr> </tbody> </table>
<thead> - si comporta come il <tr>, utilizzato per definire aree di intestazione
<th> - si comporta come il <td>, utilizzato per definire le singole intestazioni di una cella evidenziando il testo.
Un esempio:
<table align="center" border="1"> <thead> <th>Intestazione # 1</th> <th>Intestazione # 2</th> </thead> <tr> <td>Cella # 1 ... ... ...</td> <td>Cella # 2 ... ... ...</td> </tr> </table>
il risultato:
Intestazione # 1 | Intestazione # 2 |
---|---|
Cella # 1 ... ... ... | Cella # 2 ... ... ... |
Autore: Luca Ruggiero
AutoCAD
Corso base del noto software per il disegno geometrico professionale.Dreamweaver MX
Corso completo su Dreamweaver che spiega come utilizzare il programma.Flash MX e Action Script
Corso di programmazione ActionScript per rendere interattivi i filmati Flash.MySQL
Corso completo sul famoso DBMS open-source.SQL e Database
Corso completo di guida al linguaggio SQL e ricco di esempi pratici.ASP Completo
Corso completo per imparare a fondo l´ASP con l´utilizzo del VBScript.ASP.Net
Realizzazione di applicazioni Web con la nuova tecnologia di casa Microsoft.Front Page
Corso completo sul noto editor HTML della Microsoft.Web Marketing
Corso come promuove un sito Web su Internet.CSS e XHTML
Web Design ed Accessibilità secondo il W3C.
![MRW Corsi online](../img/ads-60x60/box/MRW-Corsi-Logo.gif)