Lezione 4 - laboratorio HTML

(1)

Istituzioni di Informatica

DAMS

Istituzioni di Informatica

DAMS

Laboratorio di HTML Laboratorio di HTML

(2)

Le tabelle

• Creazione di una tabella:

→ le tabelle vengono utilizzate sia per inserire dati che per migliorare l’impaginazione.

Attributi:

– BORDER = assegna un bordo alla tabelle (BORDER=0 → nessun bordo, utile per l’impaginazione “nascosta”)

– WIDTH = consente di variare l’ampiezza della tabella

(3)

Righe e colonne nelle

tabelle

• E’ necessario inserire le righe che compongono la tabella:

→ questo comando si ripete per ogni riga.

• All’interno di ogni riga si inseriscono le colonne o celle:

→ a questo comando faremo seguire il testo desiderato.

(4)

Alcuni miglioramenti

• Celle vuote:

→ si ottengono non racchiudendo alcun valore nel comando.

• Header:

→ si inserisce una riga destinata a delimitare i campi della tabella,

(5)

• Descrizione:

→ aggiunge la descrizione della tabella. Attributi:

ALIGN = top (la descrizione apparirà sopra la tabella), bottom (la

descrizione apparirà sotto la tabella). • Allineamento del testo delle celle:

ALIGN = center o left o right

→ viene assegnato alle celle, colloca il testo nella posizione richiesta

(6)

Variazioni sul tema

• Variare il numero di celle:

attributo COLSPAN di <TD>

→ estensione delle colonne, contiene il numero di colonne desiderato.

• Variare l’altezza delle righe:

attributo ROWSPAN di <TD>

→ altezza di una singola cella, contiene il valore numerico desiderato.

(7)

• Delimitazione tra le celle:

attributo CELLSPACING associato a <TABLE>

→ definisce lo spessore che intercorre tra le singole celle, si ottengono bordi interni più spessi.

attributo CELLPADDING associato a <TABLE>

→ concede maggior respiro al testo

all’interno di una singola cella, secondo il valore numerico assegnato.

(8)

Colorare i bordi

• Colore del bordo bidimensionale:

attributo BORDERCOLOR di <TABLE>

→ definisce il colore del bordo ma ne annulla la tridimensionalità.

• Colore del bordo tridimensionale: attributo BORDERCOLORDARK di <TABLE>

→ colore della parte scura delle cornici tridimensionali.

attributo BORDERCOLORLIGHT

→ colore della parte chiara delle cornici tridimensionali

(9)

Esempio 1

<TABLE WIDTH="60%" BORDER="3" BORDERCOLOR="red"> <CAPTION ALIGN="bottom">La mia prima tabella in

HTML</CAPTION> <THEAD> <TR> <TH ALIGN="left">Prima cella</TH> <TH ALIGN="center">Seconda cella</TH> <TH ALIGN="right">Terza cella</TH> </TR></THEAD> <TR>

<TD ALIGN="left" BGCOLOR="yellow">Prima cella</TD> <TD></TD>

<TD ALIGN="right" BGCOLOR="orange">Terza cella</TD> </TR>

<TR>

<TD COLSPAN="2"><FONT COLOR="green">Allargo le celle!</FONT></TD>

<TD COLSPAN=“1"><FONT COLOR="blue">Allargo anche queste!</FONT></TD>

</TR>

(10)

Esempio 2

<CAPTION ALIGN="bottom">La mia seconda tabella in HTML</CAPTION> <THEAD><TR> <TH ALIGN="left"><B>Prima cella</B></TH> <TH ALIGN="center"><B>Seconda cella</B></TH> <TH ALIGN="right"><B>Terza cella</B></TH> </TR></THEAD> <TR>

<TD ALIGN="left" BGCOLOR="yellow"><I>Prima cella</I></TD> <TD></TD>

<TD ALIGN="right" BGCOLOR="orange"><U>Terza cella</U></TD> </TR>

<TR>

<TD COLSPAN="2"><FONT COLOR="green"><BIG>Allargo le celle!</BIG></FONT></TD>

<TD COLSPAN=“1"><FONT COLOR="blue"><SMALL>Allargo anche queste!</SMALL></FONT></TD>

</TR>

(11)

Esercizio n°1

• Creare una pagina Orario con:

– Titolo: Orario del primo semestre

– Più sotto, una tabella con i 6 giorni della

settimana (Lunedì/Sabato) e le ore a due a due (es. 8-10, 10-12, etc.).

– I giorni sono in grassetto centrati, le ore in corsivo allineati a sinistra. Le materie sono centrate.

– I bordi della tabella sono dimensione 3, con attributi del colore tridimensionali definiti a piacere.

– Definire una descrizione per la tabella creata. – Dove non si ha lezione si deve inserire una cella