Corso HTML · Impariamo a creare pagine web

Lezione 3

Tabelle e hyperlink
<table> <tr> <a>
Tre tag che lavorano insieme

Le tabelle

<table> la tabella · <tr> la riga · <td> la cella

<table border="1">
<tr>
<td>Lunedì</td>
<td>8 - 12</td>
</tr>
</table>
come si vede
Lunedì8 - 12
Lezione 3 — Tabelle e hyperlink02 / 12
Regolare la tabella

Gli attributi di <table>

<table border="2" align="center"
cellspacing="5"
cellpadding="10"
bgcolor="#eeeeee">
cellspacing → spazio TRA
cellpadding → spazio DENTRO
testo
Lezione 3 — Tabelle e hyperlink03 / 12
Celle più grandi

Unire le celle

colspan="2" → orizzontale
rowspan="2" → verticale
<tr>
<td colspan="2">unite</td>
</tr>
Lezione 3 — Tabelle e hyperlink04 / 12
?
La domanda-trappola del prof

«Bordo spesso E colorato, come si farà?»

border="6" rende il bordo spesso… ma resta grigio. Per il colore ci sono due strade. →

Lezione 3 — Tabelle e hyperlink05 / 12
Bordo colorato · la via semplice

Strada 1 — bordercolor

<table border="6"
bordercolor="#cc0000">
// spessore + colore insieme
come si vede
AB
Lezione 3 — Tabelle e hyperlink06 / 12
Bordo colorato · il trucco robusto

Strada 2 — cellspacing + bgcolor

<table bgcolor="#cc0000"
cellspacing="6">
<tr><td bgcolor="#fff">cella</td></tr>
</table>
come si vede
AB
Lezione 3 — Tabelle e hyperlink07 / 12
Andare da qualche parte

Gli hyperlink <a>

<a href="https://google.it">Vai</a> un link normale
<a href="..." target="_blank"> apre in una nuova scheda
<a href="mailto:[email protected]"> apre l'email
Lezione 3 — Tabelle e hyperlink08 / 12
Saltare nella stessa pagina

Le àncore

1 · il segnaposto
<a name="fondo"></a>
2 · il link che salta
<a href="#fondo">vai in fondo</a>
vai in fondo ↓
▾
segnaposto "fondo"
Lezione 3 — Tabelle e hyperlink09 / 12
Lo chiede spesso · serve al compito 4

Il colore dei link nel <body>

<body link="green"
vlink="red">
// link = non visitato
// vlink = già visitato
come si vede
un linknon visitato
un linkdopo il click
Lezione 3 — Tabelle e hyperlink10 / 12
Riepilogo

Cassetta degli attrezzi

Tabella<table> <tr> <td>
Bordo spessore / coloreborder="n" · bordercolor="..."
Spazio tra / dentro le cellecellspacing · cellpadding
Centrare · unire cellealign="center" · colspan / rowspan
Link / nuova scheda / mail<a href> · target="_blank" · mailto:
Colore link / visitati<body link="..." vlink="...">
Lezione 3 — Tabelle e hyperlink11 / 12
<td>
Pratica guidata

Ora tocca a te

La pagina «Il mio orario»
1Una tabella centrata con i giorni e le ore
2Bordo spesso e colorato (Strada 1 o 2)
3Un <a target="_blank"> che apre in nuova scheda
Poi apri l'esercizio interattivo e costruisci la vetrina. →