Embed Size (px)
Citation preview
Prof. Giuseppe ROMANO
HTML: Tabelle
Le tabelle sono componenti importanti in
HTML: nate agli inizi del Web per
impaginare dati aggregati, si sono poi
trasformate in uno strumento
indispensabile per gestire i layout grafici, per
tornare, già nell’epoca dei CSS, ad essere
elementi utilissimi per rappresentare
informazioni.
HTML: Tabelle
Per definire una tabella “minimale”, che sia comunque
interpretata correttamente dai browser possiamo riprodurre
un esempio simile al seguente:
<table>
<tr><td>Colonna 1</td><td>Colonna 2</td></tr>
<tr><td>Dato 1,1</td><td>Dato 1,2</td></tr>
<tr><td>Dato 2,1</td><td>Dato 2,2</td></tr>
<tr><td>Dato 3,1</td><td>Dato 3,2</td></tr>
</table>
HTML: Tabelle
Nell’esempio riusciamo a definire una griglia formata
da righe e colonne, il risultato è piuttosto povero a
livello semantico (non distinguiamo ad esempio il
nome di una colonna dai suoi valori), ma ci aiuta a
presentare i tag di base:
HTML: TabelleTag Descrizione
<table> È il contenitore di tutta la
tabella e la definisce
<tr> “table row” Contiene una riga
della tabella
<td> “table data” Una cella che
contiene i valori all’interno di
una riga
<table>...</table>
L'elemento <table> definisce una tabella e necessita di
almeno altri due elementi <tr> e <td> descritti più avanti
e che servono per definire righe e colonne. Questo tag
necessita del relativo tag di chiusura </table>
HTML: Tabelle<table>
Molti gli attributi associabili a questo tag:
• align
• Bgcolor
• Border
• cellpadding
• cellspacig
• frame
• rules
• summary
• Width.
HTML: Tabellealign
L'attributo align consente di specificare l'allineamento
della tabella rispetto al documento, con le seguenti
possibilità: center, left e right rispettivamente per:
centrato, a sinistra, a destra.
E' possibile applicarlo oltre che
all'elemento <table> anche ai singoli elementi che
costituiscono la struttura della tabella stessa,
quali: <td> e <th> descritti più avanti.
HTML: Tabellebackground
L'attributo background permette di avere un'immagine
come sfondo della tabella, è possibile applicarlo oltre
che all'elemento <table> anche agli elementi che
costituiscono la struttura della tabella stessa quali:
<td> e <th> descritti più avanti.
Si possono utilizzare come immagini di sfondo i vari
tipi di file grafici consentiti dal web: gif, jpg, png.
<table background="immagine_di_sfondo.jpg">
HTML: Tabelle
bgcolor
L'attributo bgcolor permette di avere un colore in tinta
unita come sfondo della tabella, è possibile applicarlo
oltre che all'elemento <table> anche agli elementi che
costituiscono la struttura della tabella stessa quali: <td>
e <th> (“table header”, cioè “intestazione di tabella”).
Il colore può essere espresso col suo nome in lingua
inglese o con la solita tripletta di numeri esadecimali.
<table bgcolor="Yellow">
<table bgcolor="#ffa500">
HTML: Tabelleborder
L'attributo border permette di avere un bordo perimetrale
che contorna tutte le celle facenti parte della tabella; è
possibile impostarne anche lo spessore del bordo. Alcuni
browser in mancanza di questo attributo lasciano un piccolo
spazio pur non facendo vedere alcun bordo, per recuperare
quello spazio è necessario dichiarare border impostandolo a
zero.
<table border="1">
<table border="5">
<table border="10">
HTML: Tabelle
bordercolor
L'attributo bordercolor permette di selezionare il colore
del bordo, questo attributo supportato solo dai
browser IE per funzionare deve necessariamente avere
impostato anche l'attributo border. Il colore può essere
espresso col suo nome in lingua inglese o con la solita
tripletta di numeri esadecimali.
<table border="1" bordercolor="Red">
HTML: Tabellebordercolordark
L'attributo bordercolordark permette di selezionare il
colore più scuro su un bordo (l'opposto di
bordercolorlight); creando un effetto di luce. Questo
attributo supportato soltanto da IE per funzionare deve
necessariamente avere impostato anche l'attributo
border.
bordercolorlight
L'attributo bordercolorlight permette di selezionare il
colore più chiaro su un bordo (l'opposto di
bordercolordark); creando un effetto di luce. Questo
attributo supportato soltanto da IE per funzionare deve
necessariamente avere impostato anche l'attributo
border.
HTML: Tabellecellpadding
L'attributo cellpadding specifica la quantità di spazio
vuoto da lasciare tra i bordi delle celle della tabella e
il dato vero e proprio in esse contenuto, il valore per
default è 2 , quindi per tabelle più compresse si dovrà
impostare cellpadding uguale a zero.
<table cellpadding="0">
<table cellpadding="10">
HTML: Tabelle
cellspacing
L'attributo cellspacing specifica la quantità di spazio
vuoto da lasciare tra le singole celle di dati della tabella,
il valore per default è 2, per tabelle più compresse si
dovrà impostare cellspacing uguale a zero.
HTML: Tabelleframe
L'attributo frame permette di scegliere quale tipo di
visualizzazione assegnare al bordo. Questo attributo per
funzionare deve avere impostato anche l'attributo border.
I valori possibili sono:
void = rimuove tutti i bordi esterni
above = visualizza solo i bordi esterni in cima alla tabella
below = visualizza solo i bordi esterni in fondo alla tabella
hsides = visualizza solo i bordi orizzontali in cima e in fondo alla
tabella
lhs = visualizza i bordi esterni solo al margine sinistro della tabella
rhs = visualizza i bordi esterni solo al margine destro della tabella
vsides = visualizza i bordi esterni ai due margini destro e sinistro
della tabella
box = visualizza un riquadro attorno alla tabella (tutti i margini)
border = visualizza un riquadro attorno alla tabella (come box)
HTML: Tabelle
height
L'attributo height permette di specificare l'altezza della
tabella, può essere in pixel o in percentuale rispetto
all'altezza della finestra del browser. Questo attributo
è supportato soltanto dai browser IE e non riconosciuto
dal W3C. Diventa un attributo valido se applicato ai
singoli elementi che costituiscono la struttura della
tabella stessa quali: <td> e <th>.
HTML: Tabelle
summary
L'attributo summary permette di specificare un titolo, una
didascalia, a differenza di <caption> questa non sarà visibile
graficamente serve soprattutto a quei browser non grafici
che fanno uso di programmi vocali o con sistema Braille.
HTML: Tabelle
width
L'attributo width permette di specificare la larghezza della
tabella, può essere espressa in pixel o in percentuale della
larghezza della finestra del browser. E' possibile applicarlo
oltre che all'elemento <table> anche agli elementi che
costituiscono la struttura della tabella stessa, quali: <td> e
<th>.
HTML: Tabelle<caption>...</caption>
L'elemento <caption> serve per inserire la didascalia della
tabella, deve trovarsi all'interno della tabella subito dopo
table e non all'interno di righe <tr> o di celle <td>.
Questo tag necessita del relativo tag di
chiusura </caption>
HTML: Tabelle
HTML: Tabelle
align di caption
L'attributo align imposta la posizione della didascalia
rispetto alla tabella. Gli attributi possibili sono top,
bottom, left e right. rispettivamente per: sopra, sotto,
sinistra e destra.
HTML: Tabelle
valign
L'attributo valign permette di impostare l'allineamento
verticale del testo all'interno delle singole celle della
tabella, i valori assegnabili sono: middle, top, bottom.
HTML: Tabellealign
L'attributo align permette di impostare
l'allineamento orizzontale del testo all'interno delle
singole celle della tabella, i valori assegnabili
sono: left, right, center, char, justify
HTML: Tabelle
height
L'attributo height permette di impostare il valore di altezza
della cella, può essere espresso in pixel o in percentuale
dell'altezza della tabella. Più celle affiancate avranno tutte
l'altezza max impostata in una delle celle della stessa riga.
HTML: Tabelle
width
L'attributo width permette di impostare il valore di
larghezza della cella, può essere espresso in pixel o in
percentuale della larghezza della tabella. Più celle
incolonnate avranno tutte la larghezza max specificata in
una delle celle della stessa colonna.
HTML: Tabelle<tr>...</tr>
Questa coppia di elementi <tr>...</tr> inseriti all'interno di <table>
definiscono l'inizio di una riga della tabella, significa che il numero di
righe di una tabella è pari al numero di elementi <tr> in essa
contenuti.
Supporta molti degli attributi di <table> e di <td>. A differenza di
<td> non contiene dati al suo interno in quanto serve solo per
creare la struttura, non hanno quindi ragione di esistere attributi
come bgcolor o background che se occorrono potranno essere
definiti nel tag <td> inserito all'interno di <tr> stesso. Questo tag
necessita del relativo tag di chiusura </tr>
HTML: Tabelle<td>...</td>
Questa coppia di elementi <td>...</td> inseriti all'interno di
<table> e di <tr> definiscono la cella vera e propria della tabella,
<td> supporta tutti gli attributi di <table> quindi non soltanto i
vari allineamenti ma è possibile avere anche colori e/o immagini di
sfondo diversi e indipendenti tra le singole celle.
Questo tag è di norma preceduto dal tag <tr> che definisce l'inizio
della riga.
All'interno di una stessa tabella si dovranno definire lo stesso
identico numero di celle per ogni riga, a meno che non si faccia
uso dell'attributo colspan visto più avanti. Questo tag necessita del
relativo tag di chiusura </td>
HTML: Tabelle
HTML: Tabelle
Le tabelle si possono nidificare, cioè è possibile
mettere delle intere tabelle all'interno di singole
celle di altre tabelle creando strutture sempre più
complesse per poterle adattare a qualsiasi tipo di
impaginazione ma il rischio di restare ingarbugliati
è alto.
Potrebbero persino contenere immagini di sfondo
frammentate in singole celle che si ricompongono
cella per cella come se si trattasse di un puzzle.
HTML: Tabellerowspan e colspan
Gli attributi rowspan e colspan allargano righe e colonne senza alterare la
struttura originale.
Come già accennato, le tabelle, salvo casi particolari, hanno un numero di
celle uguale per ogni riga ed un numero di righe uguali per ogni colonna, se
ad esempio su una riga abbiamo tre celle si dovranno avere tre celle per
ogni altra riga precedente e seguente.
Identica cosa per le colonne, se una colonna ha tre celle anche le altre
colonne dovranno avere lo stesso numero di celle.
Praticamente il grigliato risulta sempre regolare sia in orizzontale che in
verticale. Fortunatamente però è possibile intervenire sulla struttura
facendo in modo che una cella sia più larga o più lunga delle altre in modo
da occupare lo spazio delle celle che stanno di lato o di sopra o di sotto. In
parole povere avremo sempre una forma della struttura rettangolare (o
quadrata) ma al suo interno le celle potranno essere accomodate.
Se così non fosse sarebbero piuttosto rigide per certi utilizzi.
HTML: Tabellerowspan e colspan
Gli attributi rowspan e colspan allargano righe e colonne senza alterare la
struttura originale. Come già accennato le tabelle, salvo casi particolari,
hanno un numero di celle uguale per ogni riga ed un numero di righe uguali
per ogni colonna, se ad esempio su una riga abbiamo tre celle si dovranno
avere tre celle per ogni altra riga precedente e seguente. Identica cosa per
le colonne, se una colonna ha tre celle anche le altre colonne dovranno
avere lo stesso numero di celle.
Praticamente il grigliato risulta sempre regolare sia in orizzontale che in
verticale. Fortunatamente però è possibile intervenire sulla struttura
facendo in modo che una cella sia più larga o più lunga delle altre in modo
da occupare lo spazio delle celle che stanno di lato o di sopra o di sotto. In
parole povere avremo sempre una forma della struttura rettangolare (o
quadrata) ma al suo interno le celle potranno essere accomodate. Se così
non fosse sarebbero piuttosto rigide per certi utilizzi.
HTML: Tabelle
HTML: Tabelle
Risulta intuitivo che se servisse una tabella con 16 celle si
potrebbe disporla su 4 righe ognuna formata da 4 celle,
oppure due righe ognuna formata da 8 celle, o anche 8
righe ognuna formata da 2 celle. E perchè non 16 righe
ognuna formata da una sola cella?
Quando però la tabella non è più così regolare, per
esempio nel caso servano 7 celle su una sola riga
lasciandone 8 nella riga sotto, magari per qualche ragione
di estetica o per alloggiare meglio un'intestazione più
grande o altro... ecco che si ricorre
a rowspam e colspan che servono proprio a questo, a
modificare il numero di righe e/o colonne mantenendo la
struttura regolare cioè a forma di quadrato o di rettangolo,
vediamo un esempio.
HTML: Tabelle
Una tabella regolare prevede due <tr> ed otto
<td>, per ottenere quattro celle (colonne) per
ogni riga.
HTML: TabelleAdesso al primo <td>, quello della cella 1 riga uno, applichiamo
l'attributo rowspan seguito dal valore 2, così facendo la tabella
espanderà la colonna cella 1, di due righe (row) prendendo 2
posti, in pratica si fonde con la cella sottostante (la cella 5) che di
fatto noi non avremo dichiarato nella seconda riga proprio per
lasciare il posto alla cella sopra espansa con rowspan.
Questo il listato con l'esempio pratico:
HTML: Tabelle
Vediamo adesso lo stesso esempio ma facendo in modo
che la prima cella si espanda in orizzontale, quindi non
più rowspan (righe) ma colspan (colonne). Sarà impostata
in modo che dovrà essere di dimensioni pari a 4 celle.
Tornando al primo <td>, quello della cella 1 riga 1, e
richiamando l'attributo colspan seguito dal numero 4; la
tabella espanderà la riga 1 cella 1 in modo da prendere
altri 3 posti, quindi occuperà il posto delle celle laterali
che non andranno inserite.
Questo il listato ed anche l'esempio pratico:
HTML: Tabelle
HTML: Tabelle
Dicevo all'inizio di questa sezione che le tabelle
possono essere nidificate fra di loro, non ci sono limiti
se non quello della propria fantasia e del buon senso.
Magari evitate di complicarvi troppo la vita se non ce ne
fosse realmente il bisogno. Ecco un esempio pratico:
HTML: Tabelle
Istituto Tecnico Tecnologico
GUIDO DORSO - Avellino
Copyright ITT Guido Dorso
