Lezione 03 - Tabelle, elenchi e immagini

Le tabelle

Le tabelle consentono di disporre il testo e più in generale gli elementi della nostra pagina in una struttura tabellare.
Vediamo un esempio:

<table border="1">
	<tr>
		<td>riga 1, cella 1</td>
		<td>riga 1, cella 2</td>
	</tr>
	<tr>
		<td>riga 2, cella 1</td>
		<td>riga 2, cella 2</td>
	</tr>
</table>

Ecco il risultato:

riga 1, cella 1	riga 1, cella 2
riga 2, cella 1	riga 2, cella 2

Posso altresì indicare che la prima riga è di intestazione.
Vediamo un altro esempio:

<table border="1">
	<tr>
		<th>Intestazione colonna 1</th>
		<th>Intestazione colonna 2</th>
	</tr>
	<tr>
		<td>riga 1, cella 1</td>
		<td>riga 1, cella 2</td>
	</tr>
	<tr>
		<td>riga 2, cella 1</td>
		<td>riga 2, cella 2</td>
	</tr>
</table>

Ecco il risultato:

Intestazione colonna 1	Intestazione colonna 2
riga 1, cella 1	riga 1, cella 2
riga 2, cella 1	riga 2, cella 2

Ora proviamo a svuotare il contenuto di una cella e vedere l'effetto nel browser Internet Explorer.
Vedrete che i bordi della cella spariscono. Per ovviare a questo inconveniente è sufficiente inserire l'entità   all'interno della cella.
Se ne avete la possibilità potete verificare che in Firefox invece tale problema non si presenta.

L'attributo border del tag table consente di specificare la dimensione del bordo della tabella. Fate delle prove per vedere i diversi effetti che si ottengono.
Nella quinta lezione del corso affronteremo gli stili e vedremo come è possibile agire sull'attributo style per modificare l'aspetto dei bordi della tabella e delle celle.

È anche possibile fare in modo che una cella occupi lo spazio di più celle utilizzando gli attribui rowspan e colspan delle celle (tag <td>).
Vediamo un esempio:

<table border="1">
	<tr>
		<th>Intestazione colonna 1</th>
		<th>Intestazione colonna 2</th>
		<th>Intestazione colonna 3</th>
	</tr>
	<tr>
		<td colspan="3">cella orizzontale tripla</td>
	</tr>
	<tr>
		<td>riga 2, cella 1</td>
		<td rowspan="2">cella verticale doppia</td>
		<td>riga 3, cella 2</td>
	</tr>
	<tr>
		<td>riga 3, cella 1</td>
		<td>riga 3, cella 3</td>
	</tr>
	<tr>
		<td>riga 4, cella 2</td>
		<td colspan="2">cella orizzontale doppia</td>
	</tr>
</table>

Ecco il risultato:

Intestazione colonna 1	Intestazione colonna 2	Intestazione colonna 3
cella orizzontale tripla
riga 2, cella 1	cella verticale doppia	riga 3, cella 2
riga 3, cella 1	cella verticale doppia	riga 3, cella 3
riga 4, cella 2	cella orizzontale doppia

Vediamo come allineare il testo all'interno delle celle: abbiamo già parlato dell'attributo align per i paragrafi; lo stesso attributo è applicabile anche alle celle della tabella per modificare l'allineamento orizzontale nella cella.
Per modificare , invece, l'allineamento verticale del contenuto della cella posso utilizzare valign.
Proviamo a modificare l'esempio precedente come segue:

<table border="1">
	<tr>
		<th>Intestazione colonna 1</th>
		<th>Intestazione colonna 2</th>
		<th>Intestazione colonna 3</th>
	</tr>
	<tr>
		<td colspan="3" align="center">cella orizzontale tripla</td>
	</tr>
	<tr>
		<td>riga 2, cella 1</td>
		<td rowspan="2" valign="top">cella verticale doppia</td>
		<td>riga 3, cella 2</td>
	</tr>
	<tr>
		<td>riga 3, cella 1</td>
		<td>riga 3, cella 3</td>
	</tr>
	<tr>
		<td>riga 4, cella 2</td>
		<td colspan="2" align="right">cella orizzontale doppia</td>
	</tr>
</table>

Ecco il risultato:

Intestazione colonna 1	Intestazione colonna 2	Intestazione colonna 3
cella orizzontale tripla
riga 2, cella 1	cella verticale doppia	riga 3, cella 2
riga 3, cella 1	cella verticale doppia	riga 3, cella 3
riga 4, cella 2	cella orizzontale doppia

L'attributo valign assume i seguenti valori:

top: Allineamento in alto
middle: Allineamento in mezzo
bottom: Allineamento in basso

Con il tag <caption> posso specificare un titolo per la tabella, mentre con gli attributi cellpadding e cellspacing del tag table posso modificare la spaziatura dentro e fuori delle celle
Proviamo ad esempio:

<table border="1" cellpadding="10" cellspacing="5">
	<caption>Titolo tabella</caption>
	<tr>
		<td>riga 1, cella 1</td>
		<td>riga 1, cella 2</td>
	</tr>
</table>

Risultato:

Titolo tabella
riga 1, cella 1	riga 1, cella 2

Le Liste

Le liste o come vengono chiamati in Word "elenchi puntati e numerati", consentono di elencare elementi. Esistono tre tipi di liste:

Liste non ordinali (unordered-list): sono elenchi puntati dove l'ordine non conta
Liste ordinali (ordered-list): sono elenchi numerati dove conta l'ordine
Liste di definizione (definition-list): sono elenchi di definizione

Vediamole tutte in un esempio completo:

<h5>Liste NON Ordinali:</h5>
<h6>Lista con dischi:</h6>
<ul type="disc">
 <li>Mele</li>
 <li>Banane</li>
 <li>Limoni</li>
 <li>Arance</li>
</ul>

<h6>Lista con cerchi:</h6>
<ul type="circle">
 <li>Mele</li>
 <li>Banane</li>
 <li>Limoni</li>
 <li>Arance</li>
</ul>

<h6>Lista con quadrati:</h6>
<ul type="square">
 <li>Mele</li>
 <li>Banane</li>
 <li>Limoni</li>
 <li>Arance</li>
</ul>


<h5>Liste Ordinali:</h5>
<h6>Lista Numerata:</h6>
<ol>
 <li>Mele</li>
 <li>Banane</li>
 <li>Limoni</li>
 <li>Arance</li>
</ol>

<h6>Lista con lettere alfabetiche maiuscole:</h6>
<ol type="A">
 <li>Mele</li>
 <li>Banane</li>
 <li>Limoni</li>
 <li>Arance</li>
</ol>

<h6>Lista con lettere alfabetiche minuscole:</h6>
<ol type="a">
 <li>Mele</li>
 <li>Banane</li>
 <li>Limoni</li>
 <li>Arance</li>
</ol>

<h6>Lista con numerazione romana maiuscola:</h6>
<ol type="I">
 <li>Mele</li>
 <li>Banane</li>
 <li>Limoni</li>
 <li>Arance</li>
</ol>

<h6>Lista con numerazione romana minuscola:</h6>
<ol type="i">
 <li>Mele</li>
 <li>Banane</li>
 <li>Limoni</li>
 <li>Arance</li>
</ol>


<h5>Lista di Definizione:</h5>
<dl>
  <dt>Caffè</dt>
  <dd>Bevanda nera calda</dd>
  <dt>Latte</dt>
  <dd>Bevanda bianca fredda</dd>
</dl>


<h5>Liste Innestate:</h5>
<ul>
  <li>Caffè</li>
  <li>The
    <ul>
    <li>Classico</li>
    <li>Verde</li>
    </ul>
  </li>
  <li>Latte</li>
</ul>

Come si può notare dall'esempio, l'attributo type della lista consente di specificarne il tipo ottenendo il seguente risultato:

Liste NON Ordinali:

Lista con dischi:

Mele
Banane
Limoni
Arance

Lista con cerchi:

Mele
Banane
Limoni
Arance

Lista con quadrati:

Mele
Banane
Limoni
Arance

Liste Ordinali:

Lista Numerata:

Mele
Banane
Limoni
Arance

Lista con lettere alfabetiche maiuscole:

Mele
Banane
Limoni
Arance

Lista con lettere alfabetiche minuscole:

Mele
Banane
Limoni
Arance

Lista con numerazione romana maiuscola:

Mele
Banane
Limoni
Arance

Lista con numerazione romana minuscola:

Mele
Banane
Limoni
Arance

Lista di Definizione:

Caffè: Bevanda nera calda
Latte: Bevanda bianca fredda

Liste Innestate:

Caffè
The
- Classico
- Verde
Latte

Altro sulle Immagini

Nella scorsa lezione avevamo visto come inserire le immagini nei documenti. Vediamo ora alcuni attributi che si possono dare al tag <img> per modificare l'aspetto e la posizione delle immagini nelle pagine.
Attributi width e height: indicano rispettivamente la larghezza e l'altezza dell'immagine. Tale informazione può essere indicata in pixels (l'unità di misura delle immagini sui computer) o in percentuale relativa alle dimensioni della pagina.
Vediamo un esempio:

<p>Immagine a dimensioni originali <br />
<img src="immagine.gif" />
</p>

<p>Immagine a dimensioni fisse <br />
<img src="immagine.gif" width="20" height="50" />
</p>

<p>Immagine a dimensioni relative (percentuali) <br />
<img src="immagine.gif" width="5%" height="5%" />
</p>

Risultato:

Immagine a dimensioni originali

Immagine a dimensioni fisse

Immagine a dimensioni relative (percentuali)

Attributo align: consente di specificare l'allineamento dell'immagine rispetto al testo che la circonda.
Vediamo un esempio:

<p>Immagine in basso (default)
<img src="immagine.gif" align="botton" />
</p>

<p>Immagine in alto
<img src="immagine.gif" align="top" />
</p>

<p>Immagine a metà
<img src="immagine.gif" align="middle" />
</p>

<p>Immagine a destra (flottante)
<img src="immagine.gif" align="right" />
</p>

<p>Immagine a sinistra (flottante)
<img src="immagine.gif" align="left" />
</p>

Immagine in basso (default)

Immagine in alto

Immagine a metà

Immagine a destra (flottante)

Immagine a sinistra (flottante)

Le mappe

Con le immagine è poossibile definire delle mappe di riferimento per fare in modo che una determinata area all'interno dell'immagine definisca un link ad un altro documento.
Vediamo come:

<img src="planets.gif"
width="145" height="126"
usemap="#planetmap">

<map id="planetmap" name="planetmap">

<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm">

<area shape="circle"
coords="90,58,3"
alt="Mercury"
href="mercur.htm">

<area shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm">

</map>

Il risultato nel browser è un immagine sulla quale sono presenti delle aree "link" che puntano a tre nuovi documenti. Passando infatti ilcursore del mouse sul sole e sui due pianeti l'immagine del cursore cambia indicando la presenza del link.
Con l'attributo usemap del tag <img> specifico il nome della mappa che definisce le aree e i documenti collegati. Con il tag <map> definisco la mappa: prestare particolare attenzione agli attributi name e id che devono essere identici al nome specificato nell'attributo usemap di <img>.
I tag <area> invece specificano le aree della mappa. Ogni area può avere una forma diversa (attributo shape), una posizione diversa (attributo coords) e un riferimento a documenti diverso (attributo href come visto per il tag <a>).