La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Tabelle HTML Le tabelle in HTML permettono di formattare del testo, delle immagini, altre tabelle … in righe e colonne. –Per poter affiancare due immagini.

Presentazioni simili


Presentazione sul tema: "Tabelle HTML Le tabelle in HTML permettono di formattare del testo, delle immagini, altre tabelle … in righe e colonne. –Per poter affiancare due immagini."— Transcript della presentazione:

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

2 Tabelle cella colonna riga Un po di notazione.

3 TAG Sintassi: Contenuto della tabella & Tag necessari per formattare righe e colonne Comunico al browser che sto costruendo una tabella

4 Attributi (I) Attributi summaryDefinisce un sommario dei propositi e della struttura della tabella, utile per quei Browser non–visual (Braille, parlato). widthDefinisce la larghezza della tabella, espressa in pixel o percentuale. borderDefinisce la larghezza del bordo della tabella, espressa in pixel. bgcolorDefinisce il colore di sfondo della tabella, espresso in esadecimale.

5 Attributo width X può assumere i seguenti valori: pixel, dimensione fissa* (width =50) percentuale dimensione variabile* (width =50%) * variabile/fissa rispetto alla dimensione della finestra

6 Attributo width ….. ……. P.S: se width non è specificato la larghezza della tabella dipende dal valore di default del browser.

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

8 Attributo border … …

9 Celle Tabella Per creare una riga: (table row) Per creare una colonna: (table data) cella

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

11 tabella senza bordo Creo una riga Prima colonna 1 Immagine Seconda colonna 2 Immagine

12 1 Riga 2 Riga

13 Attributo bgcolor 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.

14 Attributo bgcolor … …

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

16 Cellspacing

17 Cellpadding

18 Celle Tabella Per indicare una riga: (table row) Per indicare un nuovo dato nella riga (colonna): (table data) cella

19 TAG Sintassi: Contenuto della riga Or Tag per le colonne (td) ( Opzionale )

20 Attributi alignSpecifica lalignamento dei dati e la giustificazione del testo. valignSpecifica la posizione verticale del testo. bgcolorSpecifica il colore di sfondo della riga.

21 Attributo align 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

22 Attributo align ….. ……. ……. P.S: se align non è specificato il testo viene allineato a sinistra

23 Attributo valign 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.

24 Attributo valign ….. ……. …….

25 Attributo bgcolor non so cosa scrivere non so cosa scrivere

26 TAG Sintassi: Contenuto della colonna ( Opzionale )

27 Attributi rowspanSpecifica il numero di righe per cui estendere il contenuto (data). collspanSpecifica il numero di colonne per cui estendere il contenuto (data). bgcolorSpecifica il colore di sfondo della cella. Other … Attributi come tr: align, valign …

28 Attributo rowspan

29 Attributo colspan

30 Colspan - Rowspan Valore di default = 1 Nel caso in cui : –rowspan =0 la cella si espande dalla riga corrente allultima riga della tabella –colspan =0 la cella si espande dalla colonna corrente allultima colonna della tabella

31 Bgcolor!!

32 TAG Per lintestazione delle colonne usiamo il tag Sintassi: Contenuto della colonna ( Opzionale )

33 Esempio senza Name Cups Type of Coffee Sugar? ……………..

34 Esempio con Name Cups Type of Coffee Sugar? ……………..

35 Tabelle Particolari 3 colonne raggruppate 2 colonne raggruppate

36 Gruppi di colonne Per raggruppare colonne si usa il tag Sintassi:

37 Attributi spanSpecifica il numero di colonne che compongono il gruppo. widthSpecifica la larghezza delle colonne che compongono il gruppo. alignSpecifica lallineamento delle colonne che compongono il gruppo. Valori: left|center|right|justify|

38 Attributo span 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.

39 Attributo span ………..

40 Attributo width 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.

41 Attributo width …….

42 Attributo align align =centeralign =right


Scaricare ppt "Tabelle HTML Le tabelle in HTML permettono di formattare del testo, delle immagini, altre tabelle … in righe e colonne. –Per poter affiancare due immagini."

Presentazioni simili


Annunci Google