Tabelle
In HTML le tabelle vengono largamente utilizzate
per
organizzare
i dati in tabelle
il layout della pagina servendosi di tabelle
nascoste
creare
INFO WEB – LEZIONE N.6
Si definiscono utilizzando il tag
</table>
<table>
RAVENNA, 2 APRILE 2008
Dott. Giuseppe Contissa
[email protected]
Inserire righe e colonne
Per inserire una riga si utilizza il tag
Esempio 20
<tr> </tr>
<table>
<tr>
all’interno
di ogni riga si può inserire il tag <th></th>
per le intestazioni
<th>Colonna 1 </th>
<th>Colonna 2</th>
</tr>
Per inserire una colonna si utilizza il tag<td>
</td>
<tr>
<td>Prima riga, sinistra.</td>
<td>Prima riga, destra.</td>
</tr>
<tr>
<td>Seconda riga, sinistra.</td>
<td>Seconda riga, destra.</td>
</tr>
</table>
Attributi del tag TABLE
Con gli attributi del tag <table> è possibile
definire
dimensioni della tabella
il bordo della tabella
lo spazio tra le celle
lo spazio tra celle e contenuto
lo sfondo
l’allineamento
Dimensioni delle tabelle
Attributi
width
le
height
Possono essere espresse
in
pixel (la misura della tabella rimane invariata), o
percentuale della pagina (la misura della tabella
cambia in base alla risoluzione di chi la visualizza)
in
Esempio 21
Esempio 21 (continua)
<table width=20%>
<tr>
<th>Colonna 1 </th> <th>Colonna 2</th>
</tr>
<tr>
<td>Prima riga, sinistra.</td>
<td>Prima riga, destra.</td>
</tr>
<tr>
<td>Seconda riga, sinistra.</td>
<td>Seconda riga, destra.</td>
</tr>
<table width=500>
<tr>
<th>Colonna 1 </th> <th>Colonna 2</th>
</tr>
<tr>
<td>Prima riga, sinistra.</td>
<td>Prima riga, destra.</td>
</tr>
<tr>
<td>Seconda riga, sinistra.</td>
<td>Seconda riga, destra.</td>
</tr>
</table>…..
</table>
Impostare il bordo
Visualizzare il bordo
Spessore del bordo
border=n
Frame=
Colore del bordo
bordercolor=#rrggbb
Visibilità del bordo
o nome colore
Ombra del bordo
bordercolordark=#rrggbb
o nome colore
void
above
below
lhs
rhs
hsides
vsides
box
elimina tutti i bordi esterni
mostra il bordo solo in alto
mostra il bordo solo in basso
mostra il bordo solo sul lato sinistro
mostra il bordo solo sul lato destro
mostra il bordo solo sui lati orizzontali
mostra il bordo solo sui lati verticali
mostra il bordo su tutti i lati
Esempio 22
Esempio 22 (continua)
<table border=“1” bordercolor=“red”>
<table border=“4” bordercolordark=“blue”>
<tr>
<th>Colonna 1 </th> <th>Colonna 2</th>
<tr>
<th>Colonna 1 </th> <th>Colonna 2</th>
</tr>
<tr>
<td>Prima riga, sinistra.</td>
<td>Prima riga, destra.</td>
</tr>
</tr>
<tr>
<td>Prima riga, sinistra.</td>
<td>Prima riga, destra.</td>
</tr>
<tr>
<td>Seconda riga, sinistra.</td>
<td>Seconda riga, destra.</td>
</tr>
<tr>
<td>Seconda riga, sinistra.</td>
<td>Seconda riga, destra.</td>
</tr>
</table>…..
</table>
Esempio 22 (continua)
Sfondo delle tabelle
Colore unitario dello sfondo
bgcolor=“#rrggbb” o nome colore
Immagine di sfondo
background=“filename”
Esempio 23
Esempio 23 (continua)
<table bgcolor=“red”>
<table background=“./images/sfondo.jpg”>
<tr>
<th>Colonna 1 </th> <th>Colonna 2</th>
</tr>
<tr>
<th>Colonna 1 </th> <th>Colonna 2</th>
</tr>
<tr>
<td>Prima riga, sinistra.</td>
<td>Prima riga, destra.</td>
</tr>
<tr>
<td>Prima riga, sinistra.</td>
<td>Prima riga, destra.</td>
</tr>
<tr>
<td>Seconda riga, sinistra.</td>
<td>Seconda riga, destra.</td>
</tr>
<tr>
<td>Seconda riga, sinistra.</td>
<td>Seconda riga, destra.</td>
</tr>
</table>…..
</table>
Inserire spazi nelle tabelle
Esempio 24
Per inserire uno spazio tra celle si deve dare un
valore all’attributo CELLPADDING
Per stabilire la distanza tra la cella e il contenuto si
deve dare un valore all’attributo CELLSPACING
<table border=1 cellpadding=10 cellspacing=20>
<tr>
<th>Colonna 1 </th>
<th>Colonna 2</th>
</tr>
<tr>
<td>Prima riga, sinistra.</td>
<td>Prima riga, destra.</td>
</tr>
<tr>
<td>Seconda riga, sinistra.</td>
<td>Seconda riga, destra.</td>
</tr>
</table>
Esempio 24 (continua)
Allineamento
Allineamento del contenuto della tabella
valign=
top con il lato superiore della cella
bottom con il lato inferiore della cella
Allineamento del contenuto della riga o colonna
align=
left
right
center
Ultime note
Per creare celle vuote si deve inserire il carattere
speciale tra i tag es. <td>&nbsp;</td>
Per creare celle che occupano più di una riga si
devono utilizzare gli attributi rowspan e colspan
Esempio 25
<table border=“1” cellpadding=“10” width=“80%”>
<tr align="center”>
<th rowspan=“2”>A</th> <th colspan=“3”>B</th>
</tr>
<tr align="center”>
<th>C</th> <th>D</th> <th>E</th >
</tr>
<tr align="center">
<td>1</td><td>2</td><td>3</td ><td>4</td>
</tr>
<tr align="center">
<td>5</td><td>6</td><td>7</td ><td>8</td>
</tr>
<table>
Esempio 25 (continua)
Trasferimento FTP
Per spostare un sito su un server web si utilizza
solitamente il protocollo FTP (file transfer protocol),
per mezzo di un programma client FTP, (es. CuteFtp
o WS-Ftp) che viene configurato indicando:
Indirizzo
ftp del sito dove verranno caricate le pagine
e le immagini
Nome utente e password per l’accesso
Trasferimento FTP (continua)
File sul PC personale
File sul PC remoto
Cliccare per copiare i file selezionati
Questa è una immagine
del programma WSFTP. Altri programmi
hanno interfacce un po’
diverse, ma funzionano
allo stesso modo.
Una volta effettuata la
procedura di login, si
selezionano e si copiano
i file dal computer
locale al server
Attenzione a copiare
non solo i file html ma
anche le immagini.
A questo punto il sito è
online sul web