Please Wait
Cosa Cerchi?  

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à &nbsp; 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 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 riga 3, cella 3
riga 4, cella 2 cella orizzontale doppia

L'attributo valign assume i seguenti valori:

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:

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:
Lista con cerchi:
Lista con quadrati:
Liste Ordinali:
Lista Numerata:
  1. Mele
  2. Banane
  3. Limoni
  4. Arance
Lista con lettere alfabetiche maiuscole:
  1. Mele
  2. Banane
  3. Limoni
  4. Arance
Lista con lettere alfabetiche minuscole:
  1. Mele
  2. Banane
  3. Limoni
  4. Arance
Lista con numerazione romana maiuscola:
  1. Mele
  2. Banane
  3. Limoni
  4. Arance
Lista con numerazione romana minuscola:
  1. Mele
  2. Banane
  3. Limoni
  4. Arance
Lista di Definizione:
Caffè
Bevanda nera calda
Latte
Bevanda bianca fredda
Liste Innestate:

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>).

Prossimamente...

Nella prossima lezione vedremo l'uso dei frame e l'uso dei font. Inoltre approfondiremo il tag <head>
 

Freelance Jobs

Credits

x

Layout e Contenuti © Stefano Pozzati (POZZware.com)
Realizzazione Tecnica e Grafica © Stefano Pozzati (POZZware.com)
Hosting - Aruba (www.aruba.it)
Immagini del titolo © Shunya Yamashita (http://shunyama.web.fc2.com/)
 

Realizzato con:  WebSitter By Pozzware.com Browser compatibili:  Explorer Internet Explorer 6
Firefox Mozilla FireFox 2
Chrome Google Chrome
 
Strumenti:  FCK Editor
JQuery
Valid XHTML 1.0 Transitional CSS Valido!