Tabelle
L'uso delle tabelle è la pratica più utilizzata dai creatori di pagine web per fissare il layout del contenuto delle stesse. Gli elementi della tabella con i loro attributi, accoppiati alla possibilità di nidificazione senza limiti, offrono la potenza e flessibilità necessaria per posizionare nella pagina qualsiasi oggetto con precisione pressochè assoluta. Una tabella è delimitata dai tags <table></table>, essa è formata da righe <tr> che contengono una o più celle <td> che rappresentano le colonne della tabella.
Supponendo di voler costruire una tabella composta da due righe composte di tre colonne scriveremmo:
<table border=1>
<tr>
<td>Prima cella</td><td>Seconda cella</td><td>Terza cella</td>
</tr>
<tr>
<td>Prima cella</td><td>Seconda cella</td><td>Terza cella</td>
</tr>
</table>
che darà il risultato che segue
| Prima cella | Seconda cella | Terza cella |
| Prima cella | Seconda cella | Terza cella |
Come potete vedere il risultato è una tabella grezza non avendo utilizzato alcun attributo eccetto border=1 che permette di visualizzare il bordo delle celle. Proviamo ad abbellirla con l'introduzione di alcuni attributi. Per cominciare stabiliamo la dimensione in valore relativo allo schermo, es. 50% (width=50%); seguitiamo assegnandogli un nome, es. Prima Tabella: da precisare che questo non è un attributo ma un elemento tag della tabella <caption>Prima Tabella</caption>; finiamo questa prima revisione con l'insermento di una intestazione delle tre colonne per mezzo dei tag relativi <th></th>, e stabiliamo che questa riga di intestazione sia di colore grigio <th bgcolor=silver></th>
Il listato aggiornato sarà:
<table width=50% border=1>
<caption>Prima Tabella</caption>
<th bgcolor=silver>Prima colonna</th><th bgcolor=silver>Seconda colonna</th><th bgcolor=silver>Terza colonna</th>
<tr>
<td>Prima cella</td><td>Seconda cella</td><td>Terza cella</td>
</tr>
<tr>
<td>Prima cella</td><td>Seconda cella</td><td>Terza cella</td>
</tr>
</table>
con il seguente risultato
| Prima colonna | Seconda colonna | Terza colonna |
|---|---|---|
| Prima cella | Seconda cella | Terza cella |
| Prima cella | Seconda cella | Terza cella |
Come potete notare il miglioramento è notevole con la sola introduzione di due nuovi tag e altrettanti attributi. Ricordo che il tag caption può prevedere l'attributo align=bottom, nel qual caso il nome assegnato alla tabella comparirà sotto la stessa. L'attributo dimensionale width= accetta sia valori in pixel che percentuali, lo stesso può essere usato per dimensionare le celle relativamente alle dimensioni dell'intera tabella. Il colore di sfondo bgcolor= è accettato da tutti gli elementi della tabella, compreso il tag di riga <tr> con la regola gerarchica invertita. Per regola gerarchica invertita s'intende che il colore di sfondo del dettaglio (es. cella) prevale sugli altri generali (riga, tabella).
E' importante specificare che le dimensioni impostate con la prima riga, hanno effetto sul layout dell'intera tabella, rendendo superfluo specificare gli stessi parametri riga per riga. Due altri importanti attributi del tag table agiscono sull'intera tabella, essi sono: cellpadding= e cellspacing=. Il primo imposta, in pixel, la distanza del contenuto dal bordo, mentre il secondo imposta, sempre in pixel, la distanza tra le celle. Altro attributo che determina la grafica della tabella è bordercolor= che imposta il colore del bordo se questo è stato specificato. Alternativamente, per effetti tridimensionali, quest'ultimo attributo può essere scisso in bordercolorlight= e bordercolordark=.
Per comodità si riportano nella seguente tabella gli attributi accettati dai diversi tags:
| TAG | ATTRIBUTO | VALORE |
|---|---|---|
| <table> | width= heigth= cellpadding= cellspacing= border= bgcolor= background= | valore numerico - pixel o % valore numerico - pixel valore numerico - pixel valore numerico - pixel valore numerico - pixel nome colore o valore esadecimale URL immagine |
| <caption> | align= | top, bottom |
| <th> | width= align= bgcolor= | valore numerico - pixel o % left, center, right nome colore o valore esadecimale |
| <tr> | bgcolor= align= valign= | nome colore o valore esadecimale left, center, right top, middle, bottom, baseline |
| <td> | width= heigth= bgcolor= align= valign= rowspan= colspan= background= | valore numerico - pixel o % valore numerico - pixel nome colore o valore esadecimale left, center, right top, middle, bottom valore numerico valore numerico URL immagine |
I dati riportati nella precedente tabella riguardano gli attributi cosidetti crossplatform, così detti perchè sono supportati sia da Internet Explorer che da Netscape. Infatti, esistono altri attributi, e non solo per i tags delle tabelle, che sono prerogativa di Internet Explorer o di Netscape. Per completare la disanima degli attributi compresi nella tabella di cui non abbiamo ancora parlato, introduciamo background=: con questo attributo possiamo inserire come sfondo una immagine invece di un colore, per fare ciò è sufficiente indicare come valore il percorso del file immagine. Altri due attributi non ancora visti sono rowspan= e colspan=, con il primo si specifica su quante lineee si deve estendere una cella, mentre con il secondo si stabilisce l'estensione su più colonne. Sotto l'ultimo esempio di tabella con gli attributi appena visti; come esercizio potreste ricostruire il listato di tale tabella
| Prima colonna | Seconda colonna | Terza colonna | Quarta colonna | Quinta colonna |
|---|---|---|---|---|
| Prima cella | Seconda cella | Terza cella | ||
| Prima cella | Seconda cella | Terza cella | Quarta cella | Quinta cella |
| Seconda cella | Terza cella | Quarta cella | Quinta cella | |
Bene con questo abbiamo esaurito il capitolo sullo strumento HTML forse più utilizzato dai webmaster, non resta che passare dalla teoria alla pratica. Buon divertimento e arrivederci al prossimo capitolo!