Tabelle in HTML
• Le tabelle permettono di creare una struttura
matriciale (un foglio con tanti quadretti)
• Vengono utilizzate non solo per presentare dei
dati in forma tabellare, ma anche per comporre
impaginazioni complesse
• E' infatti possibile con le tabelle dividere il testo
in più colonne, creare zone con sfondi diversi,
centrare il testo in spazi ristretti, ecc.
Tabelle <TABLE>
• Le tabelle in html sono costituite da tre tag
principali (table, tr, td) (tabella, riga, dati)
• Si dichiara la tabella <table>
Si ripete
per ogni riga
• Ogni riga è costituita da celle
<td>
– Si inserisce il contenuto della cella
• Si chiude il tag
– Si chiude il tag
</td>
</tr>
• Si termina la tabella </table>
Si ripete per ogni
cella (colonna)
– la tabella è formata da righe <tr>
Attributi delle tabelle
• Ci sono attributi comuni a tutta la tabella, e
attributi applicabili alla singola cella.
• Gli attributi più comuni sono:
– width larghezza in pixel o in percentuale
– height altezza in pixel o in percentuale
– cellpadding: spazio in pixel tra il bordo della
tabella e testo contenuto all'interno.
– cellspacing: distanza fra le celle in pixel
border="10"
Se non viene specificata
nessuna altezza (height)
questa misura è uguale a
cellspacing
cellspacing="100"
cellpadding=13
Tabelle autoformattanti
• Le tabelle in html hanno un'importantissima
caratteristica : tendono ad adattarsi allo
spazio a disposizione, in funzioni della
lunghezza dei dati delle varie colonne.
In particolare vegono preservate le
dimensioni delle immagini.
• Questo comportamento è a volte più forte
delle indicazioni di width e height fornite
• Questo implica che non si è mai sicuri
dell'esatta posizione del testo all'interno
della pagina.
Attributi delle celle
left
• align allineamento orizzontale
center
(left,center,right,justify)
right
• valign allineamento verticale
top
(top,middle, bottom)
middle
bottom
• bgcolor colore di sfondo
• background immagine di sfondo, si
ripete per coprire tutto lo spazio a
disposizione
L'unione di celle
• I dati sono racchiusi all'interno di <td> </td>
• E' possibile unire celle in orizzontale (colspan) e
verticale (rowspan)
In questo caso NON dovranno comparire i td
delle celle unite