Esempio 1

Ad esempio l'elenco qua sopra è stato realizzato utilizzando il primo tipo.
Ciascuna lista ha un suo tag di apertura e chiusura, e un tag per l'inserimento degli elementi. Il primo serve per specificare che tipo di lista si vuole adottare, il secondo per differenziare tra loro gli elementi della stessa lista.

Le liste non ordinate

Le liste numerate

In questo tipo di lista è possibile specificare, tramite le opzioni TYPE= e VALUE=, il tipo di numerazione che si vuole adottare e il numero di partenza.
L'opzione TYPE= può essere inserita nel tag di apertura della lista o in quello per l'introduzione di un nuovo elemento; nel primo caso ha effetto su tutti gli elementi della lista, nel secodo caso con Explorer ha effetto solo sull'elemento, con Netscape da quell'elemento in poi. I tipi di numerazione utilizzabili sono: "A" "a" "I" "i" "1".
Esempio:

<OL TYPE="a"> <LI>primo elemento <LI>secondo elemento <LI>terzo elemento <LI TYPE="A">quarto elemento <LI>quinto elemento </OL>

primo elemento secondo elemento terzo elemento quarto elemento quinto elemento

L'opzione VALUE= consente di modificare il valore della numerazione della lista. Per questo motivo può essere specificata solo nei tag di inserimento degli elementi. Qualunque sia il tipo di numerazione adottato deve essere sempre indicato un numero.
Esempio:

<OL TYPE="i"> <LI>primo elemento <LI>secondo elemento <LI>terzo elemento <LI VALUE="7">settimo elemento <LI>ottavo elemento </OL>

primo elemento secondo elemento terzo elemento settimo elemento ottavo elemento

Le liste di definizioni

Questo tipo di lista si differenzia dalle precedenti in quanto ogni elemento della lista è formato da due parti:

• un termine
• la definizione di tale termine.

Normalmente la definizione viene visualizzata in una riga differente rispetto al termine e viene rientrata rispetto al margine sinistro del testo.
I tag per l'apertura e la chiusura della lista sono: <DL> e </DL>, il tag per l'inserimento del termine è <DT> e quello per la definizione è <DD>. Occorre prestare attenzione a non invertire l'ordine di inserimento del termine e della definizione perchè la lista non verrebbe visualizzata correttamente. È invece consentito creare delle liste utilizzando solo i termini o solo le definizioni.
Esempio:

<DL> <DT>primo termine    <DD>prima definizione <DT>secondo termine    <DD>seconda definizione <DT>terzo termine    <DD>terza definizione <DD>definizione senza termine </DL>

primo termine prima definizione secondo termine seconda definizione terzo termine terza definizione definizione senza termine

Le liste nidificate

Tabelle

Le tabelle, introdotte dalla versione 3.2 dell'HTML, sono un potente strumento che consente l'organizzazione dei dati nelle pagine Web.
I tag fondamentali per la creazione di una tabella sono:

<TABLE> e </TABLE> per inizio e fine tabella
<TR> e </TR> per l'apertura e la chiusura di una riga
<TD> e </TD> per l'apertura e la chiusura di una cella nella riga.

I tag di chiusura delle righe e delle celle, che erano indispensabili nelle prime definizioni delle tabelle, sono ora diventati opzionali. Per essere però sicuri che tutti i browser interpretino correttamente la formattazione della tabella, è consigliabile continuare ad utilizzarli.
Nei tag fondamentali illustrati sopra possono essere specificati una serie di attributi che, combinati con la possibilità di inserire tabelle all'interno delle celle, consentono la realizzazione di qualunque tipo di griglia e quindi di posizionare a piacimento i testi e le immagini nella pagina Web.
Ecco un semplice esempio di tabella di due righe e due colonne:

<TABLE> <TR> <TD>(1,1)</TD> <TD>(1,2)</TD> </TR> <TR> <TD>(2,1)</TD> <TD>(2,2)</TD> </TR> </TABLE>

(1,1) (1,2) (2,1) (2,2)

Titolo e intestazioni

L'HTML fornisce inoltre la possibilità di inserire il titolo della tabella e l'intestazione delle righe e delle colonne.
Il tag per il titolo è <CAPTION> e deve essere inserito subito dopo il tag <TABLE>.
Il tag per le intestazioni è <TH> e deve essere inserito:
nella prima riga se si vuole dare un'intestazione alle colonne;
prima del primo elemento di ogni riga se si vogliono intestare le righe.
Esempi:

<TABLE> <CAPTION> Titolo: Intestazione colonne </CAPTION> <TR> <TH>Prima colonna</TH> <TH>Seconda colonna</TH> </TR> <TR> <TD>(1,1)</TD> <TD>(1,2)</TD> </TR> <TR> <TD>(2,1)</TD> <TD>(2,2)</TD> </TR> </TABLE>

Titolo: Intestazione colonne Prima colonna Seconda colonna (1,1) (1,2) (2,1) (2,2)

<TABLE> <CAPTION> Titolo: Intestazione righe </CAPTION> <TR> <TH>Prima riga</TH> <TD>(1,1)</TD> <TD>(1,2)</TD> </TR> <TR> <TH>Seconda riga</TH> <TD>(2,1)</TD> <TD>(2,2)</TD> </TR> </TABLE>

Titolo: Intestazione righe Prima riga (1,1) (1,2) Seconda riga (2,1) (2,2)

Formattazione delle tabelle

• Bordo della tabella
• Spazio tra le celle
• Spazio nelle celle
• Larghezza della tabella
• Larghezza delle celle
• Allineamenti
• Tabelle colorate
• Celle su più righe o colonne

Formattazione delle tabelle

Allineamento della tabella nella pagina

Solitamente i browser visualizzano le tabelle, in una riga indipendente, attaccate al bordo sinistro della finestra di navigazione (il testo che segue la tabella viene posizionato sotto la stessa).
Per modificare questa impostazione si possono usare i tag per l'allineamento dei paragrafi (es. <P ALIGN="center"> etc.).
In questo modo però il testo che segue la tabella viene ancora scritto sotto di essa.
Per affiancare il testo alla tabella si deve utilizzare l'attributo ALIGN nel tag <TABLE> con le opzioni "left" o "right".
Esempi:

<TABLE BORDER="5" ALIGN="left"> <TR> <TD>(1,1)</TD> <TD>(1,2)</TD> </TR> <TR> <TD>(2,1)</TD> <TD>(2,2)</TD> </TR> </TABLE> Questo testo verrà visualizzato alla destra della tabella

(1,1) (1,2) (2,1) (2,2) Questo testo verrà visualizzato alla destra della tabella

<TABLE BORDER="5" ALIGN="right"> <TR> <TD>(1,1)</TD> <TD>(1,2)</TD> </TR> <TR> <TD>(2,1)</TD> <TD>(2,2)</TD> </TR> </TABLE> Questo testo verrà visualizzato alla sinistra della tabella

(1,1) (1,2) (2,1) (2,2) Questo testo verrà visualizzato alla sinistra della tabella

L'attributo ALIGN nei browser più recenti supporta anche l'opzione "center" ma non ha nessuna influenza sul testo che segue la tabella. Per questo motivo se si desidera un risultato uniforme con tutti i browser, per posizionare la tabella al centro della pagina, conviene utilizzare il tag per l'allineamento dei paragrafi.

Allineamento nelle celle

Per allineare il contenuto delle celle all'interno delle stesse, si devono utilizzare:
gli attributi ALIGN e VALIGN nei tag di apertura delle righe e/o delle celle.
Usati con il tag <TR> hanno effetto su tutte le celle della riga, mentre con il tag <TD> hanno effetto sulla singola cella. Con il tag <TH> si può usare solo l'attributo ALIGN.
L'attributo ALIGN supporta le opzioni: "left" "right" e "center".
L'attributo VALIGN supporta le opzioni: "top" "middle" e "bottom".
Se non specificato diversamente il contenuto della cella viene allineato:
- orizzontalmente a sinistra;
- verticalmente al centro.
Esempio:
- nella prima riga non usiamo nessun attributo;
- nella seconda riga allineamo tutto a destra e in basso;
- nella terza riga allineamo differentemente le singole celle.

<TABLE BORDER="5" WIDTH="200"> <TR> <TH><FONT size="+2">1</TH> <TD>(1,1)</TD> <TD>(1,2)</TD> </TR> <TR ALIGN="right" VALIGN="bottom"> <TH><FONT size="+2">2</TH> <TD>(2,1)</TD> <TD>(2,2)</TD> </TR> <TR> <TH ALIGN="left"><FONT size="+2">3</TH> <TD ALIGN="center">(2,1)</TD> <TD VALIGN="top">(2,2)</TD> </TR> </TABLE>

1 (1,1) (1,2) 2 (2,1) (2,2) 3 (3,1) (3,2)

Allineamento del titolo

Formattazione delle tabelle

I colori nelle tabelle

Per modificare il colore dello sfondo di una tabella o di una cella si deve utilizzare l'opzione BGCOLOR nel tag <TABLE> o nel tag <TD>.
Quando si utilizza questa funzionalità è bene tener presente che non tutti i browser la supportano e quindi, se oltre al colore dello sfondo si modifica anche il colore del carattere, la tabella potrebbe risultare illeggibile.
La selezione dei colori segue le regole viste nel paragrafo I colori in HTML
Esempi:

<TABLE BORDER="1" BGCOLOR="#E0FFFF"> <TR> <TD>(1,1)</TD> <TD>(1,2)</TD> </TR> <TR> <TD>(2,1)</TD> <TD>(2,2)</TD> </TR> </TABLE>

(1,1) (1,2) (2,1) (2,2)

<TABLE BORDER="1"> <TR> <TD BGCOLOR="#FFB6C1">(1,1)</TD> <TD BGCOLOR="#F08080">(1,2)</TD> </TR> <TR> <TD BGCOLOR="#FF69B4">(2,1)</TD> <TD BGCOLOR="#822222">(2,2)</TD> </TR> </TABLE>

(1,1) (1,2) (2,1) (2,2)

Formattazione delle tabelle

Spazio nelle celle

Formattazione delle tabelle

Spazio tra le celle

Formattazione delle tabelle

Tabelle multiple