Laboratorio di Informatica 3 Anno Accademico 2019-2020

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Creare siti web

Introduzione

(2)

Il linguaggio HTML

Parte 5

HTML e CSS

Libri di testo consigliati:

Laura Lemay, Rafe Colburn

HTML & CSS

McGraw-Hill Italia. (2007)

ISBN 978-88-386-4478-8

3

(3)

HTML 5

Libri di testo consigliati:

Daniele Bochicchio e Stefano Mostarda

HTML5 con CSS e JavaScript

Editore Ulrico Hoepli Milano. (2015)

ISBN 978-88-203-6983-5

Per chi desidera approfondire le innovazioni introdotte con HTML5 e la gestione avanzata dei contenuti multimediali

Le tabelle

(terza parte)

(4)

Celle a grandezza variabile…

Celle su più colonne

N. Descrizione

prezzo

totale

12 Matite HB

200 2400

10 Penne BIC blu

250 2500

TOTALE

4900

La cella qui indicata si espande nel senso delle

colonne ma resta su una sola riga.

Una cella puo’ espandersi per

piu’ colonne:

<td colspan=nn> … </td>.

nn è il numero di colonne su

cui la cella si espande.

7

(5)

Celle su più colonne

Attributo

Valore

colspan=nn, La cella si espande per nn colonne della tabella. La cella ha:

• il suo bordo sx coincidente con quello della colonna più a sx;

• il suo bordo dx coincidente con quello della colonna più a dx;

• la sua larghezza pari alla somma delle celle che “occupa”

Attributi tag <td> e <th>

Celle su più colonne

<td> <td> <td> <td> </td> </td> </td> </td> </td> <td colspan=2> 9

(6)

Celle su più colonne

N. Descrizione

prezzo

totale

12 Matite HB

200 2400

10 Penne BIC blu

250 2500

TOTALE

4900

Esercizio n.16 :

Scrivere il codice HTML che visualizzi la tabella riprodotta qui sopra.

Celle su più colonne

<td> .. </td> <td> .. </td> <td> .. </td> <td> .. </td>

<td> .. </td> <td> .. </td> <td> .. </td> <td colspan=3> .. </td>

<td colspan=2> .. </td> Il numero di colonne della tabella,_{resta pari al massimo numero di}

celle singole (colspan=1) inserito in una qualsiasi riga.

Questa tabella ha 4 colonne.

(7)

Celle su più colonne

<table border="1" cellspacing="0"> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td colspan="3"> </td> </tr> <tr> <td colspan="2"> </td> <td> </td><td> </td> </tr> </table>

Celle su più colonne

<td> .. </td> <td> .. </td> <td colspan=2> .. </td> <td> .. </td> <td> .. </td> <td> .. </td> <td> .. </td>

Il valore dell’attributo colspan è

sempre riferito al numero massimo

di colonne della tabella.

Anche questa tabella ha 4 colonne.

(8)

Celle su più colonne

<td> .. </td> <td> .. </td> <td> .. </td> <td colspan=

3

> .. </td> <td colspan=2> .. </td> <td> .. </td> <td> .. </td> <td> .. </td> <td> .. </td>

Il valore dell’attributo colspan è

sempre riferito al numero massimo

di colonne della tabella.

Anche questa tabella ha 4 colonne.

Qui c’è un errore._{Il valore corretto è 3.}

Celle su più colonne

Scrivere il codice HTML che visualizzi la tabella riprodotta qui sopra.

(9)

Celle su più colonne

Attributo

Valore

rowspan=nn, La cella si espande per nn righe della tabella. La cella ha:

• il suo bordo superiore coincidente con quello della cella sulla riga più in alto;

• il suo bordo inferiore coincidente con quello della cella sulla riga più in basso;

• la sua altezza pari alla somma delle altezze delle righe che “occupa”

Attributi tag <td> e <th>

Celle su più righe

<tr> <tr> <tr> <td>..</td> </tr> </tr> </tr> <td>..</td> <td>..</td> <td>..</td> <td>..</td> <td>..</td> <td>..</td> <td rowspan=2>…</td> 17

(10)

Celle su più righe

<tr> <tr> <tr> <td>..</td> </tr> </tr> </tr> <td>..</td> <td>..</td> <td>..</td> <td>..</td> <td>..</td> <td>..</td> <td rowspan=2>…</td>

la cella qui indicata si espande nel senso delle righe ma resta su una sola colonna.

Celle su piu’ righe/colonne

<tr> <tr> <tr> <td>..</td> </tr> </tr> </tr> <td>..</td> <td>..</td> <td>..</td> <td>..</td> <td rowspan=2 colspan=2> ..</td>

NATURALMENTE, sono ammesse combinazioni, per esempio: <td colspan=2 rowspan=2>..</td>

definisce una cella che prende due righe e due colonne.

(11)

Celle su più righe/colonne

Scrivere il codice HTML che visualizzi la tabella riprodotta qui di fianco.

Le dimensioni della tabella sono fisse: 800x600 pixel e la tabella è centrata rispetto alla pagina

Variazioni sul tema:

Modificare le dimensioni delle celle affinchè: il piede e l’intestazione siano di pari altezza e che la sezione centrale sia alta almeno la metà di tutta la tabella.

Celle su più righe/colonne

Scrivere il codice HTML che visualizzi la tabella riprodotta qui di fianco.

La larghezza della tabella è 600 pixel e la tabella è centrata rispetto alla pagina.

La colonna «Recensione» è larga 500px, il testo nelle celle è «giustificato» e allineato al bordo superiore.

(12)

Struttura delle tabelle

Tabelle: didascalia

Il tag <caption> si usa per inserire una didascalia alle tabelle.

…

<caption> Tabella n.1 - Descrizione prodotti </caption> <tr>

<th>Descrizione prodotto</th><th …">Recensione</th> </tr>

… </table> …

Occorre ricordarsi che:

• Il tag <caption> </caption> deve essere inserito subito dopo il tag <table>

• E’ possibile modificare le proprietà del testo (e.g. cambiarne lo stile, il colore…)

(13)

Struttura delle tabelle:

<colgroup>

Il tag

<colgroup>

permette di impostare simultaneamente le proprietà comuni a

più celle che si trovano nella stessa colonna.

Normalmente è possibile definire simultaneamente le proprietà comuni a tutte le celle di una stessa riga, poiché il loro valore può essere impostato con gli attributi del tag <tr>.

(*) La cella «totale» è a tutti gli effetti la prima colonna della tabella e pertanto fa parte del gruppo delle due colonne di sinistra.

Si possono suddividere le colonne della tabella in gruppi, e impostare per ciascuno le proprietà desiderate (e.g. il colore di sfondo). Nell’esempio al lato, da sx a dx, le prime due colonne hanno sfondo bianco, le restanti hanno sfondo grigio(*).

Struttura delle tabelle:

<colgroup>

…

<table border="1" cellspacing="0"> <colgroup>

<col span="2">

<col span="2" bgcolor="#dfdfdf"> </colgroup>

<tr>

Il tag

<colgr<oup>

deve comparire dopo il

tag

<table>

ed eventuale tag

<caption>.

Il primo tag

<col>

definisce il primo

gruppo di colonne a partire da sx . Il

numero di colonne è dato dal valore

dell’attributo

span.

Gli altri tag

<col>

definiscono gli altri

gruppi a seguire, secondo necessità.

(14)

Struttura delle tabelle:

<colgroup>

<colgroup>

<col span="2">

<col span="2" bgcolor="#dfdfdf">

</colgroup>

Le prime due colonne costituiscono il primo gruppo per il quale non sono effettuate impostazioni Il secondo gruppo è costituito dalle due colonne seguenti. Per queste, si modifica il colore di sfondo.

Esercizio n.20:

Si completi il file HTML con la tabella sin qui descritta.

Struttura delle tabelle

Le tabelle possono essere divise in tre parti attraverso dei tag

«semantici» che distribuiscono le righe in:

• Intestazione della tabella (la parte alta)

• Le righe che ne fanno parte sono delimitate dal tag <thead>..</thead>;

• corpo della tabella (la parte centrale)

• Le righe che ne fanno parte sono delimitate dal tag <tbody>..</tbody>;

• piede della tabella (la parte bassa)

• Le righe che ne fanno parte sono delimitate dal tag <tfoot>..</tfoot>;

<table border="1" cellspacing="0"> <thead> <tr>..</tr> .. <tr>..</tr> </thead> <tbody> <tr>..</tr> .. <tr>..</tr> </tbody> <tfoot> <tr>..</tr> .. <tr>..</tr> </tfoot> </table>

L’inserimenti di questi tre tag non modifica il layout della tabella ma, attraverso i loro attributi, è possibile impostare proprietà comuni alle celle che appartengono alle rispettive sezioni

(15)

Struttura delle tabelle

<table border="1" cellspacing="0"> <thead bgcolor="#bbbbbb"> <tr> <td>N.</td> … </tr> </thead> <tbody bgcolor="#dfdfdf"> <tr align="right"> … </tr> <tr align="right"> … </tr> </tbody> <tfoot bgcolor="#bbbbbb"> <tr align="right"> … </tr> </tfoot> </table> thead tbody tfoot

Struttura delle tabelle

Scrivere il codice HTML che visualizzi la tabella riprodotta qui a fianco.