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
cella
colonna
riga
Un po’ di notazione.
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
cella
Per creare una riga:
<TR> </TR> (table row)
Per creare una colonna:
<TD> </TD> (table data)
<tr>
<td></td>
<td></td>
</tr>
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
cella
Per indicare una riga:
<TR> </TR> (table row)
Per indicare un nuovo dato nella riga (colonna):
<TD> </TD> (table data)
<tr>
<td></td>
<td></td>
</tr>
TAG <TR>
Sintassi:
<tr attr1=“val1” attrn=“valn” >
Contenuto della riga
Or
Tag per le colonne (td)
</tr> ( Opzionale)
Attributi <tr>
Attributialign 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”