Tabelle HTML. Tabelle Un po di notazione.

Transcript

1 Tabelle HTML!! Le tabelle in HTML permettono di rappresentare tabelle di dati ", ma anche di formattare del testo, delle immagini, altre tabelle in righe e colonne, possono cioè essere usate per l impaginazione #!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

2 TAG <table>!! Sintassi: <table attr 1 ="val1" attr n ="valn" > Contenuto della tabella & Tag necessari per formattare righe e colonne Comunico al browser che sto costruendo una tabella Celle Tabella!! Per creare una riga: cella [table row] <td></td> <td></td>!! Per creare una colonna: <td> </td> [table data]

3 Esempio di tabella <table border="1"> <td>riga 1, colonna 1</td> <td>riga 1, colonna 2</td> <td>riga 2, colonna 1</td> <td>riga 2, colonna 2</td> 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 background Definisce il colore di sfondo della tabella, espresso in esadecimale. Definisce l immagine di sfondo della tabella

4 Attributo border <table border="x">!! X è la dimensione (fissa) del bordo (o margine) della tabella espresso in pixel (border="1")!! Se border non viene specificato, il bordo non viene mostrato Attributo border <table border= 2"> <table border= 6">

5 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 width ="50%"> N.B: se width non è specificato la larghezza della tabella dipende dal valore di default del browser.

6 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 bgcolor ="#f44050">

7 Attributo background <table background ="X">! Dove X è l immagine che abbiamo deciso di attribuire allo sfondo della tabella. Intestazioni nelle tabelle <th> Table Heading </th> ($ Opzionale) Orizzontali <th>nome</th> <th>cognome</th> <td>paolino</td> <td>paperino</td> Verticali <th>nome</th> <td>paolino</td> <th>cognome</th> <td>paperino</td>

8 Esempio senza <th> <table> <td> Name </td> <td> Cups </td> <td>type of Coffee</td> <td> Sugar? </td>.. Esempio con <th> <table> <th> Name</th> <th> Cups</th> <th> Type of Coffee</th> <th> Sugar? </th>..

9 Didascalia (caption) Per accompagnare una tabella con una didascalia <table> <caption> didascalia </caption>.. Immagini & Tabelle!! Due immagini da affiancare: come faccio?

10 <table> tabella senza bordo Creo una riga <td> Prima colonna <img src="fiatcinquecento.jpg"> Img 1 <td> <td> Seconda colonna <img src="fiatpanda.jpg"> Img 2<td> <table> 1 Riga <td> <img src="fiat500.jpg"> <td> 2 Riga <td> <img src="fiatpa.jpg"> <td>

11 Attributi cell!! Cellspacing spazio tra le celle.!! Cellpadding spazio tra il contenuto della cella e la sua struttura. Cellspacing <table cellspacing ="10"> <table cellspacing ="2">

12 Cellpadding <table cellpadding="10"> <table cellpadding="25"> TAG!! Sintassi: <tr attr 1 ="val1" attr n ="valn" > Contenuto della riga O Tag per le colonne (td) ($ Opzionale)

13 Attributi align valign Attributi Specifica l allineamento dei dati e la giustificazione del testo. 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

14 Attributo align <tr align ="left">.. <tr align ="center">. <tr align ="right">. N.B. 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.

15 Attributo valign <tr valign ="middle">.. <tr valign ="top">. <tr valign ="bottom">. Attributo bgcolor <table> <tr bgcolor ="#223288"> <td> non so cosa scrivere </td> <td> non so cosa scrivere </td>

16 TAG <td>!! Sintassi: <td attr 1 ="val1" attr n ="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

17 Attributo rowspan <table> <td> 1 </td> <td> 2 </td> <td> 3 <td> <td rowspan ="2"> 4 </td> <tr > <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> La cella che contiene 4 si espande su 2 righe Attributo colspan <table> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td colspan ="2"> 4 </td> <td> 5 </td> La cella che contiene 4 si espande su 2 colonne

18 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 > <td bgcolor ="#60e531"> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> <td bgcolor ="#f45922"> 5 </td> <td> 6 </td>

19 Tabelle Particolari 3 colonne raggruppate 2 colonne raggruppate Gruppi di colonne!! Per raggruppare colonne si usa il tag <colgroup>!! Sintassi: <colgroup attr 1 ="val1" attr n ="valn">

20 Attributi <colgroup> span width align Specifica il numero di colonne che compongono il gruppo. Specifica la larghezza delle colonne che compongono il gruppo. Specifica l allineamento delle colonne che compongono il gruppo. Valori: left center right justify Attributo span <colgroup span ="X" > X è un intero maggiore di 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.

21 Attributo span <table> <colgroup > <colgroup span ="2"> <colgroup span ="3">.. 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 la larghezza delle colonne del gruppo è la minima larghezza necessaria per contenere i dati delle colonne.

22 Attributo width <table> <colgroup> <colgroup span ="2"> <colgroup span ="3" width ="100">. Attributo align align = center align = right