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.
riga
cella
colonna
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)
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
Definisce il colore di sfondo della tabella, espresso in
esadecimale.
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>
<TABLE width ="50%">
…….
</TABLE>
P.S: se width non è specificato la
larghezza della tabella dipende dal
valore di default del browser.
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>
<TABLE border ="6" >
…
</TABLE>
Celle Tabella
• Per creare una riga:
cella
<tr>
<TR> </TR> (table row)
• Per creare una colonna:
<td></td>
<td></td>
</tr>
<TD> </TD> (table data)
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
<td>
<img src="fiatPa.jpg“>
</table>
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>
<TABLE bgcolor ="#f44050">
…
</TABLE>
Attributi cell…
• Cellspacing
spazio tra le celle.
• Cellpadding
spazio tra il contenuto
della cella e la sua
struttura.
Cellspacing
<TABLE cellspacing ="10">
</TABLE>
<TABLE cellspacing ="2">
</TABLE>
Cellpadding
<TABLE cellpadding="10">
</TABLE>
<TABLE cellpadding="25">
</TABLE>
Celle Tabella
• Per indicare una riga:
cella
<tr>
<td></td>
<td></td>
</tr>
<TR> </TR> (table row)
• Per indicare un nuovo dato
nella riga (colonna):
<TD> </TD> (table data)
TAG <TR>
• 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>
<tr align =“right">
…….
</tr>
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>
<tr valign =“bottom">
…….
</tr>
Attributo bgcolor
<TABLE >
<TR bgcolor ="#223288">
<TD> non so cosa
scrivere
<TR>
<TD> non so cosa
scrivere
</TABLE>
TAG <TD>
• 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
<TR>
<TD> 3
<TD rowspan ="2"> 4
<TR >
<TD> 5
<TD> 6
<TR >
<TD> 7
<TD> 8
</TABLE>
Attributo colspan
<TABLE >
<TR>
<TD> 1
<TD> 2
<TD> 3
<TR>
<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> 2
<TD> 3
<TR>
<TD> 4
<TD bgcolor ="#f45922"> 5
<TD> 6
</TABLE>
TAG <TH>
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|
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>
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”