INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.
 |
|
Le tabelle Html
La formattazione di una pagina Html trae il suo massimo beneficio tramite l'utilizzo delle tabelle, un insieme di celle sulla falsa riga del noto programma Microsoft Excel, questa tecnica permette di creare template anche piuttosto complessi.
<table align="center" width="300" border="1">
<tr>
<td align="center" width="150">Cella # 1</td>
<td align="center" width="150">Cella # 2</td>
</tr>
<tr>
<td align="center" width="150">Cella # 3</td>
<td align="center" width="150">Cella # 4</td>
</tr>
</table>
Questo è quanto ne risulterà:
Una tabella viene generata mediante l'utilizzo di una serie di Tag, il principale dei quali è <table> con relativa chiusura finale </table>, gli altri sono Tag "accessori", nel senso che nulla significherebbero se non inclusi in una serie di istruzioni <table> e </table>, si tratta dei Tag <tr> e </tr>, e <td> che ha come chiusura opzionale (ma consigliata) </td>. Iniziamo ad esaminare <table>, i suoi possibili attributi sono: bgcolor - stabilisce il colore di sfondo della tabella, per default è trasparente, si adatta cioè al colore di sfondo della pagina width - stabilisce la larghezza della tabella, è possibile esprimerla sia in con numeri interi che in percentuale (%) height - stabilisce l'altezza, poco utilizzato in quanto la tabella sarà alta tot in base al contenuto align - permette di allineare la tabella al centro, a sinistra (per default) oppure a destra rispetto alla finestra del browser border - stabilisce il bordo della tabella, per default è zero, è quindi, in caso, inutile stabilirlo bordercolor - stabilisce il colore del bordo della tabella, per default è grigio cellpadding - stabilisce la distanza tra i lati interni di una cella e gli elementi Html contenuti in essa cellspacing - stabilisce la distanza tra le celle Abbiamo già incontrato i primi sei attributi elencati già in precedenza nel corso del manuale, essendo essi adattabili ad altri elementi Html, mentre gli ultimi due, cellpadding e cellspacing, sono proprietari delle tabelle e si utilizzano esclusivamente all'interno del Tag <table>, proviamo a comprenderne meglio il significato aggiungendoli al codice precedente assegnandogli valori differenti a seconda dei casi:
<table align="center" width="300" border="1" cellpadding="30" cellspacing="20">
<tr>
<td align="center" width="150">Cella # 1</td>
<td align="center" width="150">Cella # 2</td>
</tr>
<tr>
<td align="center" width="150">Cella # 3</td>
<td align="center" width="150">Cella # 4</td>
</tr>
</table>
Ecco il risultato:
Potremmo invece impostare a zero (0) entrambi i valori ottenendo un effetto totalmente diverso dal precedente ed altrettanto utile a seconda delle occasioni:
L'utilizzo delle tabelle nel Web è davvero massiccio, basta consultare il codice sorgente di questa pagina per farsi un'idea di quante occorrenze dei Tag <table>, <tr> e <td> sono prensenti, consiglio dunque di prestare particolare attenzione a questa lezione, lo scopo sarà, oltre a quello di comprendere la struttura e la tecnica di creazione di una tabella, anche quello di imparare ad utilizzarle al meglio per la costruzione di pagine anche di una certa complessità. Il codice presentato in questi esempi, già nella sua formattazione mostra una chiara gerarchia che intercorre tra i Tag utilizzati, possiamo dunque stabilire che ogni <tr> permette di definire una serie di celle <td> in orizzontale, per impostare una serie di celle in verticale sarà dunque necessario assegnare una singole cella <td> per ogni coppia di istruzioni <tr> e </tr>. Impostiamo una tabella con tre celle in orizzontale, utilizziamo dunque questo codice:
<table align="center" border="1">
<tr>
<td>Cella # 1</td>
<td>Cella # 2</td>
<td>Cella # 3</td>
</tr>
</table>
il risultato
mentre per impostarle in verticale il codice sarà
<table align="center" border="1">
<tr>
<td>Cella # 1</td>
</tr>
<tr>
<td>Cella # 2</td>
</tr>
<tr>
<td>Cella # 3</td>
</tr>
</table>
il risultato
Il Tag <tr> non è dotato di particolari attributi, supponiamo di avere una tabella, magari di una certa complessità, che vogliamo colorare impostando il colore cella per cella per differenziare parti dedicate ad un argomento piuttosto che ad un altro, quindi non agiremo direttamente sul colore di tutta la tabella, bensì su singola cella, ma ipotizziamo di aver anche bisogno che una serie di celle vicine siano di uno stesso colore, per cui il codice risulterebbe
<table align="center" border="1">
<tr>
<td bgcolor="#FF0000">Cella # 1</td>
<td bgcolor="#FF0000">Cella # 2</td>
<td bgcolor="#FF0000">Cella # 3</td>
</tr>
</table>
è dunque semplice intuire come possa tornare più comodo "colorare" direttamente il <tr>
<table align="center" border="1">
<tr bgcolor="#FF0000">
<td>Cella # 1</td>
<td>Cella # 2</td>
<td>Cella # 3</td>
</tr>
</table>
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
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
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
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>
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"
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
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:
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
|
IN EVIDENZA
Una slidegallery con jQuery
Pagamenti online con PayPal e PHP
Breve guida a jQuery
Effetto ombra su testo con Photoshop
Guadagna col tuo sito grazie a TradeD...
Guida XHTML
Riscrivere le URL con Asp
Riavviare IIS
HTTP 500 internal server error
Generare password casuali in Javascri...
Errore 80004005: Cannot update. Datab...
Introduzione ad Ajax ed Asp con Jscri...
Referenze dei Tag Html
Stringhe di connessione via ODBC e Ol...
Referenze dei fogli di stile Css
Le espressioni regolari in Javascript
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
© 2001/2010 lukeonweb.net - A cura di Luca Ruggiero, Partita IVA 05564851219 -
Privacy |
Pubblicità |
Contatti
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
