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. cella riga colonna

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

Attributi <table> (I) 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.

<table width =“X”> 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> ……. P.S: se width non è specificato la larghezza della tabella dipende dal valore di default del browser.

<table border =“X”> 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>

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

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="fiat500.jpg"> <tr> 2 Riga <img src="fiatPa.jpg“> </table>

<table bgcolor =“X”> 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 ="#02ff22"> … </TABLE>

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

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

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

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

TAG <TR> Contenuto della riga </tr> ( Opzionale) Sintassi: <tr attr1=“val1” 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 align =“right"> 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 valign =“bottom">

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

TAG <TD> Contenuto della colonna Sintassi: <td attr1=“val1” 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 <TD rowspan ="2"> 4 <TR > <TD> 5 <TD> 6 <TD> 7 <TD> 8 </TABLE>

Attributo colspan <TABLE > <TR> <TD> 1 <TD> 2 <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 ="#60e531"> 1 <TD bgcolor ="#f45922"> 5 <TD> 6 </TABLE>

TAG <TH> Contenuto della colonna Per l’intestazione delle colonne usiamo il tag <th> Sintassi: <th attr1=“val1” 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 attr1=“val1” 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|

<colgroup span =“X”> 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 > <COLGROUP span ="2"> <COLGROUP span ="3"> ……….. </TABLE>

<colgroup width =“X”> 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 > <COLGROUP span ="2"> <COLGROUP span ="3" width ="100"> ……. </TABLE>

Attributo align align =“center” align =“right”