5- Tabelle
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View 5- Tabelle as PDF for free.
More details
- Words: 2,159
- Pages: 11
LINGUAGGIO HTML Titolo: Tabelle
Linguaggio HTML – Tabelle Introduzione Le tabelle vengono adoperate nei siti per due ragioni principali. La prima, più ovvia, è quella di sistemare le informazioni in una tabella. La seconda - meno ovvia - è quella di creare il layout della pagina servendosi di tabelle nascoste. Alcuni degli aspetti più importanti della progettazione di una pagina che si possono trattare con l'uso di tabelle sono: • • • • •
La divisione della pagina in sezioni separate. La creazione di menù. La creazione di titoli di pagina. L'allineamento di immagini. La disposizione del testo in due o più colonne sistemate una accanto all'altra.
L'importanza delle tabelle nella progettazione non deve essere tuttavia sopravvalutata. Ci sono alcune cose da tenere presenti quando si decide di farne uso. Per esempio, il contenuto della tabella viene mostrato solo quando l'intera tabella è scaricata. Se le pagine sono molto lunghe, è consigliabile dividerle in più tabelle in modo che l'utente possa leggerne l'inizio, mentre il resto della pagina viene caricato. Attualmente l’uso delle tabelle per impostare il layout di una pagina è fortemente sconsigliato. Le tabelle dovrebbero essere usate per una sola ragione: raccogliere dati di tipo tabulare. L'uso delle tabelle impedisce la realizzazione di siti di qualità accessibili, flessibili e funzionali. L’alternativa alle tabelle è rappresentata dai CSS.
Argomenti trattati Tag fondamentali per le tabelle o Esempio 14: Creare una tabella con 1 riga e 3 colonne impostandone le dimensioni o Esempio 15: Creare una tabella con 2 riga e 2 colonne impostandone le dimensioni o Esempio 16: Impostare lo sfondo di una tabella, di una riga, di una cella Proprietà dei bordi della tabella o Esempio 17: Impostare il colore dei bordi Allineamenti o Esempio 18: Impostare l’allineamento di una tabella e del suo contenuto Altezza delle righe Raggruppamento di righe/colonne o Esempio 19: Impostare lo sfondo di una tabella, di una riga, di una cella Spazi vuoti tra le celle e tra i bordi delle celle Sommari e didascalie o Esempio 20: Vari tipi di didascalie Gruppi di righe o Esempio 21: Tabella con righe raggruppate Elementi deprecati
Tag: table, td, tr, caption, th, thead, tbody, tfoot
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
1
LINGUAGGIO HTML Titolo: Tabelle
Tag fondamentali per le tabelle Una tabella è definita all’interno dei tag e
. Le sue dimensioni sono definite con gli attributi width (larghezza) e height (altezza) e possono essere espresse in pixel o in percentuale della pagina. CONTENUTO TABELLA
In questo esempio di codice la larghezza della tabella viene espressa in pixel (500). Se si sceglie questa opzione, a qualsiasi risoluzione venga vista la pagina, la misura della tabella rimarrà invariata, cioè di 500 pixel. Cosa diversa accade nel momento in cui si sceglie una grandezza in percentuale della pagina: CONTENUTO TABELLA
In questo caso la larghezza della tabella sarà diversa a seconda della risoluzione video di chi ne esamina il contenuto. Per esempio chi ha una risoluzione video di 640x480 vedrà un tabella di circa 320 pixel (perchè abbiamo impostato la tabella di una grandezza pari al 50% della pagina), mentre chi ha una risoluzione di 800x600 la vedrà di 400 pixel. Ora diamo uno sguardo al modo in cui deve strutturarsi una tabella. Per fare questo ci serviremo di alcune immagini.
Come si vede da questa immagine, il tag table genera la tabella mentre con il tag td si definiscono i campi, cioè le colonne, presenti all'interno di tale tabella. Anche per le colonne è possibile specificare la larghezza e l’altezza mediante gli stessi attributi di table. Inoltre, quando si crea una tabella il bordo non è visibile; per visualizzarlo occorre utilizzare l’attributo border e specificare come suo valore un intero maggiore o uguale a 1, che ne rappresenta lo spessore. Ecco come il disegno può essere trasformato in codice e quindi in una vera e propria tabella formata da 1 riga e da 3 colonne.
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
2
LINGUAGGIO HTML Titolo: Tabelle
Esempio 14: Creare una tabella con 1 riga e 3 colonne impostandone le dimensioni esempio14.tml Esempio 14
La creazione di nuove righe avviene utilizzando il tag tr, come nel seguente esempio, che genera una tabella con 2 righe e 2 colonne.
Esempio 15: Creare una tabella con 2 riga e 2 colonne impostandone le dimensioni esempio15.html Esempio 15
1 Colonna 1 1 Colonna 2 2 Colonna 1 2 Colonna 2
Impostazione dello sfondo di una tabella Alcuni attributi dei tag table, tr e td permettono di impostare le caratteristiche di sfondo rispettivamente di una tabella, di una riga, di una cella. Gli attributi per le celle (td) hanno priorità rispetto a quelli per le righe (tr). Gli attributi per le righe/celle hanno priorità rispetto agli attributi impostati per l'intera tabella (table). Gli attributi specificabili sono: -
background = “file immagine”, per impostare un’immagine come sfondo;
-
bgcolor= “colore”, per impostare il colore di sfondo;
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
3
LINGUAGGIO HTML Titolo: Tabelle
Esempio 16: Impostare lo sfondo di una tabella, di una riga, di una cella esempio16.html Esempio 16
Proprietà dei bordi della tabella Gli attributi dei tag table, tr e td che permettono di impostare le caratteristiche dei bordi rispettivamente di una tabella, di una riga, di una cella sono: -
bordercolor = “colore”, per impostare il colore del bordo;
-
frame, che a seconda del suo valore modifica la visualizzazione dei bordi; in particolare void elimina tutti i bordi esterni above mostra solo il bordo in alto below mostra solo il bordo in basso lhs mostra solo il bordo in basso sul lato sinistro rhs mostra solo il bordo in basso sul lato destro hsides mostra il bordo solo sui lati orizzontali vsides mostra il bordo solo sui lati verticali box mostra il bordo su tutti i lati border mostra il bordo su tutti i lati come box
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
4
LINGUAGGIO HTML Titolo: Tabelle
Esempio 17: Impostare il colore dei bordi esempio17.html Esempio 17
Allineamenti Gli attributi che consentono di allineare una tabella o il contenuto delle righe/celle di una tabella sono - align per l’allineamento orizzontale, i cui valori possibili sono left, right, center, justify; -
valign per l’allineamento verticale, i cui possibili valori sono baseline, top, middle, bottom.
Esempio 18: Impostare l’allineamento di una tabella e del suo contenuto esempio18.html Esempio 18
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
5
LINGUAGGIO HTML Titolo: Tabelle
Altezza delle righe L’attributo height dei tag tr e td consente di impostare l’altezza delle righe/celle. Il suo valore può essere espresso in pixel o in percentuale.
Raggruppamento di righe/colonne Il tag td consente di specificare altri due attributi per raggruppare righe o colonne: -
colspan = “n” raggruppa n colonne nella stessa cella;
-
rowspan = “n” raggruppa n righe nella stessa cella.
Esempio 19: Impostare lo sfondo di una tabella, di una riga, di una cella esempio19.html Esempio 19
Spazi vuoti tra le celle e tra i bordi delle celle Esistono altri due attributi del tag table che permettono di specificare la quantità di spazio vuoto da lasciare tra le celle e tra i bordi delle celle. Nel dettaglio: cellspacing = “intero positivo” specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una tabella; il valore di default è 2.
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
6
LINGUAGGIO HTML Titolo: Tabelle
cellpadding = “intero positivo” specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di una tabella e il dato vero e proprio in esse contenuto; il valore di default è 2.
Sommari, didascalie e intestazioni Il tag caption consente di assegnare ad ogni tabella una didascalia. caption deve essere inserito all’interno della tabella, subito dopo il tag table.
Il tag caption può specificare la posizione della didascalia rispetto alla tabella mediante l’attributo align, che può assumere i valori top, bottom, left, right. Se si desidera fornire una descrizione più lunga e dettagliata della tabella, a beneficio soprattutto di quei browser non grafici che fanno uso di programmi vocali o con sistema Braille, si può utilizzare l’attributo summary del tag table. CONTENUTO TABELLA
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
7
LINGUAGGIO HTML Titolo: Tabelle Per utilizzare le celle come intestazioni si può utilizzare il tag th al posto di td. Il contenuto delle celle intestazione è formattato automaticamente in neretto e centrato.
Esempio 20: Vari tipi di didascalie esempio20.html Esempio 20
Riga 2 Colonna 1 Riga 2 Colonna 2 Riga 3 Colonna 1 Riga 3 Colonna 2
Gruppi di righe In html vi è la possibilità di distinguere all’interno di una tabella gruppi di righe che formano l’intestazione (HEAD) della tabella - la sua parte iniziale, il corpo (BODY) della tabella - la sua parte centrale - e il piede (FOOT) della tabella - la sua parte finale. I tag thead, tbody e tfoot consentono di raggruppare le righe di una tabella nel modo suddetto.
Esempio 21: Tabella con righe raggruppate esempio21.html Esempio 21 Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
9
LINGUAGGIO HTML Titolo: Tabelle
Riga 3 Colonna 2
Elementi deprecati (specifica HTML 4.01 del W3C) Attributi del tag table bgcolor align Attributi dei tag td,th width bgcolor Attributi del tag tr bgcolor Attributi del tag caption align
Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale 2.5 Italia. Per leggere una copia della licenza visita il sito web http://creativecommons.org/licenses/by-nc/2.5/it/ o spedisci una lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
11
Linguaggio HTML – Tabelle Introduzione Le tabelle vengono adoperate nei siti per due ragioni principali. La prima, più ovvia, è quella di sistemare le informazioni in una tabella. La seconda - meno ovvia - è quella di creare il layout della pagina servendosi di tabelle nascoste. Alcuni degli aspetti più importanti della progettazione di una pagina che si possono trattare con l'uso di tabelle sono: • • • • •
La divisione della pagina in sezioni separate. La creazione di menù. La creazione di titoli di pagina. L'allineamento di immagini. La disposizione del testo in due o più colonne sistemate una accanto all'altra.
L'importanza delle tabelle nella progettazione non deve essere tuttavia sopravvalutata. Ci sono alcune cose da tenere presenti quando si decide di farne uso. Per esempio, il contenuto della tabella viene mostrato solo quando l'intera tabella è scaricata. Se le pagine sono molto lunghe, è consigliabile dividerle in più tabelle in modo che l'utente possa leggerne l'inizio, mentre il resto della pagina viene caricato. Attualmente l’uso delle tabelle per impostare il layout di una pagina è fortemente sconsigliato. Le tabelle dovrebbero essere usate per una sola ragione: raccogliere dati di tipo tabulare. L'uso delle tabelle impedisce la realizzazione di siti di qualità accessibili, flessibili e funzionali. L’alternativa alle tabelle è rappresentata dai CSS.
Argomenti trattati Tag fondamentali per le tabelle o Esempio 14: Creare una tabella con 1 riga e 3 colonne impostandone le dimensioni o Esempio 15: Creare una tabella con 2 riga e 2 colonne impostandone le dimensioni o Esempio 16: Impostare lo sfondo di una tabella, di una riga, di una cella Proprietà dei bordi della tabella o Esempio 17: Impostare il colore dei bordi Allineamenti o Esempio 18: Impostare l’allineamento di una tabella e del suo contenuto Altezza delle righe Raggruppamento di righe/colonne o Esempio 19: Impostare lo sfondo di una tabella, di una riga, di una cella Spazi vuoti tra le celle e tra i bordi delle celle Sommari e didascalie o Esempio 20: Vari tipi di didascalie Gruppi di righe o Esempio 21: Tabella con righe raggruppate Elementi deprecati
Tag: table, td, tr, caption, th, thead, tbody, tfoot
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
1
LINGUAGGIO HTML Titolo: Tabelle
Tag fondamentali per le tabelle Una tabella è definita all’interno dei tag
Come si vede da questa immagine, il tag table genera la tabella mentre con il tag td si definiscono i campi, cioè le colonne, presenti all'interno di tale tabella. Anche per le colonne è possibile specificare la larghezza e l’altezza mediante gli stessi attributi di table. Inoltre, quando si crea una tabella il bordo non è visibile; per visualizzarlo occorre utilizzare l’attributo border e specificare come suo valore un intero maggiore o uguale a 1, che ne rappresenta lo spessore. Ecco come il disegno può essere trasformato in codice e quindi in una vera e propria tabella formata da 1 riga e da 3 colonne.
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
2
LINGUAGGIO HTML Titolo: Tabelle
Esempio 14: Creare una tabella con 1 riga e 3 colonne impostandone le dimensioni esempio14.tml
| Colonna 1 | Colonna 2 | Colonna 3 |
La creazione di nuove righe avviene utilizzando il tag tr, come nel seguente esempio, che genera una tabella con 2 righe e 2 colonne.
Esempio 15: Creare una tabella con 2 riga e 2 colonne impostandone le dimensioni esempio15.html
| Riga | Riga |
| Riga | Riga |
1 Colonna 1 1 Colonna 2 2 Colonna 1 2 Colonna 2
Impostazione dello sfondo di una tabella Alcuni attributi dei tag table, tr e td permettono di impostare le caratteristiche di sfondo rispettivamente di una tabella, di una riga, di una cella. Gli attributi per le celle (td) hanno priorità rispetto a quelli per le righe (tr). Gli attributi per le righe/celle hanno priorità rispetto agli attributi impostati per l'intera tabella (table). Gli attributi specificabili sono: -
background = “file immagine”, per impostare un’immagine come sfondo;
-
bgcolor= “colore”, per impostare il colore di sfondo;
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
3
LINGUAGGIO HTML Titolo: Tabelle
Esempio 16: Impostare lo sfondo di una tabella, di una riga, di una cella esempio16.html
| Riga 1 Colonna 1 Colore plum | Riga 1 Colonna 2 |
| Riga 2 Colonna 1 | Riga 2 Colonna 2 |
| Riga 3 Colonna 1 Colore gold | Riga 3 Colonna 2 Colore gold |
Proprietà dei bordi della tabella Gli attributi dei tag table, tr e td che permettono di impostare le caratteristiche dei bordi rispettivamente di una tabella, di una riga, di una cella sono: -
bordercolor = “colore”, per impostare il colore del bordo;
-
frame, che a seconda del suo valore modifica la visualizzazione dei bordi; in particolare void elimina tutti i bordi esterni above mostra solo il bordo in alto below mostra solo il bordo in basso lhs mostra solo il bordo in basso sul lato sinistro rhs mostra solo il bordo in basso sul lato destro hsides mostra il bordo solo sui lati orizzontali vsides mostra il bordo solo sui lati verticali box mostra il bordo su tutti i lati border mostra il bordo su tutti i lati come box
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
4
LINGUAGGIO HTML Titolo: Tabelle
Esempio 17: Impostare il colore dei bordi esempio17.html
| Riga 1 Colonna 1 | Riga 1 Colonna 2 |
Allineamenti Gli attributi che consentono di allineare una tabella o il contenuto delle righe/celle di una tabella sono - align per l’allineamento orizzontale, i cui valori possibili sono left, right, center, justify; -
valign per l’allineamento verticale, i cui possibili valori sono baseline, top, middle, bottom.
Esempio 18: Impostare l’allineamento di una tabella e del suo contenuto esempio18.html
| Contenuto allineato a destra orizzontalmente e in basso verticalmente | Contenuto allineato al centro orizzontalmente e verticalmente |
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
5
LINGUAGGIO HTML Titolo: Tabelle
Altezza delle righe L’attributo height dei tag tr e td consente di impostare l’altezza delle righe/celle. Il suo valore può essere espresso in pixel o in percentuale.
Raggruppamento di righe/colonne Il tag td consente di specificare altri due attributi per raggruppare righe o colonne: -
colspan = “n” raggruppa n colonne nella stessa cella;
-
rowspan = “n” raggruppa n righe nella stessa cella.
Esempio 19: Impostare lo sfondo di una tabella, di una riga, di una cella esempio19.html
| Due colonne nella stessa cella | |
| Riga 2 Colonna 1 | Due righe nella stessa cella |
| Riga 3 Colonna 1 |
Spazi vuoti tra le celle e tra i bordi delle celle Esistono altri due attributi del tag table che permettono di specificare la quantità di spazio vuoto da lasciare tra le celle e tra i bordi delle celle. Nel dettaglio: cellspacing = “intero positivo” specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una tabella; il valore di default è 2.
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
6
LINGUAGGIO HTML Titolo: Tabelle
cellpadding = “intero positivo” specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di una tabella e il dato vero e proprio in esse contenuto; il valore di default è 2.
Sommari, didascalie e intestazioni Il tag caption consente di assegnare ad ogni tabella una didascalia. caption deve essere inserito all’interno della tabella, subito dopo il tag table.
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
7
LINGUAGGIO HTML Titolo: Tabelle Per utilizzare le celle come intestazioni si può utilizzare il tag th al posto di td. Il contenuto delle celle intestazione è formattato automaticamente in neretto e centrato.
Esempio 20: Vari tipi di didascalie esempio20.html
| Intestazione | Intestazione |
|---|---|
| Riga 2 Colonna 1 | Riga 2 Colonna 2 |
| Riga 3 Colonna 1 | Riga 3 Colonna 2 |
| Riga 1 Colonna 1 | Riga 1 Colonna 2 |
Gruppi di righe In html vi è la possibilità di distinguere all’interno di una tabella gruppi di righe che formano l’intestazione (HEAD) della tabella - la sua parte iniziale, il corpo (BODY) della tabella - la sua parte centrale - e il piede (FOOT) della tabella - la sua parte finale. I tag thead, tbody e tfoot consentono di raggruppare le righe di una tabella nel modo suddetto.
Esempio 21: Tabella con righe raggruppate esempio21.html
9
LINGUAGGIO HTML Titolo: Tabelle
| Intestazione | Intestazione |
|---|---|
| Riga 2 Colonna 1 | Riga 2 Colonna 2 |
| Riga 3 Colonna 1 | Riga 3 Colonna 2 |
| Riga 1 Colonna 1 | Riga 1 Colonna 2 |
| Riga 2 Colonna 1 | Riga 2 Colonna 2 |
| Riga 3 Colonna 1 | Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
Elementi deprecati (specifica HTML 4.01 del W3C) Attributi del tag table bgcolor align Attributi dei tag td,th width bgcolor Attributi del tag tr bgcolor Attributi del tag caption align
Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale 2.5 Italia. Per leggere una copia della licenza visita il sito web http://creativecommons.org/licenses/by-nc/2.5/it/ o spedisci una lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008
11
Related Documents
5- Tabelle
April 2020 7
Tabelle
May 2020 10
Tabelle
August 2019 10
Tabelle Inran
July 2020 3
Tabelle Calorie Degli Alimenti
October 2019 14
Rongo Rongo Tabelle Table
November 2019 6More Documents from ""
3- Testo
April 2020 24
Delicious Tutorial 2
April 2020 21
Mod3.1_m1-classi E Tda
June 2020 15
Lo Statement If
June 2020 19
Analisi
April 2020 32