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”