Tabelle in HTML Le tabelle permettono di creare una struttura matriciale (un foglio con tanti quadretti) Vengono utilizzate non solo per presentare dei.

Presentazione sul tema: "Tabelle in HTML Le tabelle permettono di creare una struttura matriciale (un foglio con tanti quadretti) Vengono utilizzate non solo per presentare dei."— Transcript della presentazione:

1 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.

2 Tabelle <TABLE>
Le tabelle in html sono costituite da tre tag principali (table, tr, td) (tabella, riga, dati) Si dichiara la tabella <table> la tabella è formata da righe <tr> Ogni riga è costituita da celle <td> Si inserisce il contenuto della cella Si chiude il tag </td> Si chiude il tag </tr> Si termina la tabella </table> Si ripete per ogni riga Si ripete per ogni cella (colonna)

3 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" cellpadding=13 Se non viene specificata nessuna altezza (height) questa misura è uguale a cellspacing cellspacing="100"

4 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.

5 Attributi delle celle align allineamento orizzontale (left,center,right,justify) valign allineamento verticale (top,middle, bottom) bgcolor colore di sfondo background immagine di sfondo, si ripete per coprire tutto lo spazio a disposizione left center right top middle bottom

6 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