Tabelle HTML Le tabelle in HTML permettono di

Tabelle HTML • Le tabelle in HTML permettono di formattare del testo, delle immagini, altre tabelle … in righe e colonne. – Per poter affiancare due immagini posso usare una tabella di due colonne ed una riga – Lo stesso per del testo o qualsiasi altra risorsa Web.

Tabelle Un po’ di notazione. riga cella colonna

TAG <table> • Sintassi: <table attr 1=“val 1” attrn=“valn” > Contenuto della tabella & Tag necessari per formattare righe e colonne </table> Comunico al browser che sto costruendo una tabella

Attributi <table> (I) Attributi summary Definisce un sommario dei propositi e della struttura della tabella, utile per quei Browser non–visual (Braille, parlato). width Definisce la larghezza della tabella, espressa in pixel o percentuale. border Definisce la larghezza del bordo della tabella, espressa in pixel. bgcolor Definisce il colore di sfondo della tabella, espresso in esadecimale.

Attributo width <table width =“X”> X può assumere i seguenti valori: • pixel, dimensione fissa* (width =“ 50”) • percentuale dimensione variabile* (width =“ 50%”) * variabile/fissa rispetto alla dimensione della finestra

Attributo width <TABLE width ="50"> …. . </TABLE> <TABLE width ="50%"> ……. </TABLE> P. S: se width non è specificato la larghezza della tabella dipende dal valore di default del browser.

Attributo border <table border =“X”> Dove X è la dimensione (fissa) del bordo della tabella espresso in pixel (border =“ 5”). Se border non è specificato la tabella non avrà nessun bordo.

Attributo border <TABLE border ="2" > … </TABLE> <TABLE border ="6" > … </TABLE>

Celle Tabella • Per creare una riga: cella <tr> <td></td> </tr> <TR> </TR> (table row) • Per creare una colonna: <TD> </TD> (table data)

Immagini & Tabelle • Due immagini da affiancare: come faccio?

<table> tabella senza bordo <tr> Creo una riga <td> Prima colonna <img src="fiatcinquecento. jpg"> 1 Immagine <td> Seconda colonna <img src="fiatpanda. jpg“> 2 Immagine </table>

<table> <tr> 1 Riga <td> <img src="fiat 500. jpg"> <tr> 2 Riga <td> <img src="fiat. Pa. jpg“> </table>

Attributo bgcolor <table bgcolor =“X”> Dove X è il colore che abbiamo deciso di attribuire allo sfondo della tabella, espresso in esadecimale (bgcolor =“#ffffff”). Se bgcolor non è specificato la tabella avrà il colore dello sfondo della pagina html.

Attributo bgcolor <TABLE bgcolor ="#02 ff 22"> … </TABLE> <TABLE bgcolor ="#f 44050"> … </TABLE>

Attributi cell… • Cellspacing spazio tra le celle. • Cellpadding spazio tra il contenuto della cella e la sua struttura.

Cellspacing <TABLE cellspacing ="10"> </TABLE> <TABLE cellspacing ="2"> </TABLE>

Cellpadding <TABLE cellpadding="10"> </TABLE> <TABLE cellpadding="25"> </TABLE>

Celle Tabella • Per indicare una riga: cella <tr> <td></td> </tr> <TR> </TR> (table row) • Per indicare un nuovo dato nella riga (colonna): <TD> </TD> (table data)

TAG <TR> • Sintassi: <tr attr 1=“val 1” attrn=“valn” > Contenuto della riga Or Tag per le colonne (td) </tr> ( Opzionale)

Attributi <tr> Attributi align Specifica l’alignamento dei dati e la giustificazione del testo. valign Specifica la posizione verticale del testo. bgcolor Specifica il colore di sfondo della riga.

Attributo align <tr align =“X”> X può assumere i seguenti valori: • Left testo giustificato a sinistra • Right testo giustificato a destra • Center testo giustificato al centro • Justify testo doppiamente giustificato

Attributo align <tr align =“left"> …. . </tr> <tr align =“center"> ……. </tr> <tr align =“right"> ……. </tr> P. S: se align non è specificato il testo viene allineato a sinistra

Attributo valign <tr valign =“X”> X può assumere i seguenti valori: • Middle testo verticalmente allineato al centro. • Top testo verticalmente allineato in cima alla cella. • Bottom testo verticalmente allineato in fondo alla cella.

Attributo valign <tr valign =“middle"> …. . </tr> <tr valign =“top"> ……. </tr> <tr valign =“bottom"> ……. </tr>

Attributo bgcolor <TABLE > <TR bgcolor ="#223288"> <TD> non so cosa scrivere <TR> <TD> non so cosa scrivere </TABLE>

TAG <TD> • Sintassi: <td attr 1=“val 1” attrn=“valn” > Contenuto della colonna </td> ( Opzionale)

Attributi <td> Attributi rowspan Specifica il numero di righe per cui estendere il contenuto (data). collspan Specifica il numero di colonne per cui estendere il contenuto (data). bgcolor Specifica il colore di sfondo della cella. Other … Attributi come tr: align, valign …

Attributo rowspan <TABLE > <TR> <TD> 1 <TD> 2 <TR> <TD> 3 <TD rowspan ="2"> 4 <TR > <TD> 5 <TD> 6 <TR > <TD> 7 <TD> 8 </TABLE>

Attributo colspan <TABLE > <TR> <TD> 1 <TD> 2 <TD> 3 <TR> <TD colspan ="2"> 4 <TD> 5 </TABLE>

Colspan - Rowspan • Valore di default = 1 • Nel caso in cui : – rowspan =“ 0” la cella si espande dalla riga corrente all’ultima riga della tabella – colspan =“ 0” la cella si espande dalla colonna corrente all’ultima colonna della tabella

Bgcolor!! <TABLE > <TR> <TD bgcolor ="#60 e 531"> 1 <TD> 2 <TD> 3 <TR> <TD> 4 <TD bgcolor ="#f 45922"> 5 <TD> 6 </TABLE>

TAG <TH> Per l’intestazione delle colonne usiamo il tag <th> • Sintassi: <th attr 1=“val 1” attrn=“valn” > Contenuto della colonna </th> ( Opzionale)

Esempio senza <TH> <table> <tr> <td> Name <td> Cups <td> Type of Coffee <td> Sugar? </tr> ……………. . </table>

Esempio con <TH> <table> <tr> <th> Name <th> Cups <th> Type of Coffee <th> Sugar? </tr> ……………. . </table>

Tabelle Particolari 3 colonne raggruppate 2 colonne raggruppate

Gruppi di colonne • Per raggruppare colonne si usa il tag <COLGROUP> • Sintassi: <colgroup attr 1=“val 1” attrn=“valn” >

Attributi <colgroup> span Specifica il numero di colonne che compongono il gruppo. width Specifica la larghezza delle colonne che compongono il gruppo. align Specifica l’allineamento delle colonne che compongono il gruppo. Valori: left|center|right|justify|

Attributo span <colgroup span =“X”> X è un intero > 0: • Se non presente si intende che il gruppo è composto da una sola colonna. • Se invece span è presente e X > 0 il gruppo è composto da X colonne.

Attributo span <TABLE> <COLGROUP span ="2"> <COLGROUP span ="3"> ………. . </TABLE>

Attributo width <colgroup width =“X”> X può assumere i seguenti valori: • pixel, dimensione fissa (width =“ 50”) • percentuale dimensione variabile (width =“ 50%”) • Il valore speciale “ 0*” che indica che l larghezza delle colonne del gruppo è la minima larghezza necessaria per contenere i dati delle colonne.

Attributo width <TABLE> <COLGROUP span ="2"> <COLGROUP span ="3" width ="100"> ……. </TABLE>

Attributo align =“center” align =“right”