Lezione n° 6 - Le Tabelle -

tabelle sono una delle parti più importanti di tutto il codice HTML: nate sin dagli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici.

I tag usati per delimitare una tabella sono: <table> e </table>

I tag usati per delimitare una riga sono: <TR> e </TR> (Table Row)

I tag usati per delimitare una cella sono: <TD> e </TD> (Table Data)

Il contenuto di una cella và quindi inserito tra i tag <TD> e </TD> se ad esempio volessimo costruire una tabella formata da una riga e tre colonne, dovremmo scrivere:

quando non viene definita la larghezza delle colonne, il browser assegna automaticamente lo stesso spazio a tutte le colonne. Inoltre di default il browser non visualizzerà il bordo della tabella, per far si che venga visualizzato dal browser un bordino per la tabella è necessario introdurre all'interno del tag di apertura della tabella <table> un attributo e cioè "border"

<table border="3">

Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo “%”): in questo caso la tabella si adatta secondo lo spazio a disposizione.

<table width="300" height="200" border="3">
<table width="30%" height="40%" border="3">

Altri attributi da utilizzare all'intern di <table> sono:

L'attributo "Align" (left, center, right) per allineare la tabella a sinistra, centro o destra
L'attributo "bg color" per determinare lo sfondo della tabella
L'attributo "background" per inserire un'immagine di sfondo alla tabella
L'attributo "bordercolor" per assegnare un colore al bordo (se presente un bordo)

es. <table align="left" bgcolor="red" background="sfondo.jpg" border="3" bordercolor="blue" width="400" height="400">

L’attributo align, se riferito al tag <table>, sposta la tabella rispettivamente a sinistra (align=”left” – è così di default), a destra (align=”right”), o al centro (align=”center”) del documento.
Se riferito a <tr> o a <td> è invece il contenuto delle celle ad essere allineato a sinistra, al centro oppure a destra.

Allo stesso modo "valign" è utile per l’allineamento verticale delle celle. I valori possibili sono top (alto), middle (in mezzo – è il valore di default), bottom (in basso), baseline (alla linea di base).

Ad ogni tabella è possibile associare un'intestazione, ed anche alla riga è possibile associare un'intestazione, per far ciò si utilizzano i tag:

<caption> </caption> per intestazione tabella
<TH> </TH> per l'intestazione di riga



Per quel che riguarda il tag <table>, i seguenti attributi ci permettono di regolare le distanze tra i margini della tabella (o della cella) e il contenuto di essa:

border (che abbiamo già visto) specifica la larghezza dei bordi di una tabella (in pixel) cellspacing specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri cellpadding indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla

La dimensione indicata nel cellpadding e dal cellspacing - una volta specificata – ha effetto su tutti i lati della cella.