Lezione 4 – HTML 5

Le tabelle

Le tabelle sono un elemento importante del linguaggio HTML permettono di organizzare informazioni in modo tabellare e sono alla base per la costruzione anche di layout di pagina molto articolati.
Una tabella in modo generico in -HTML è definita dalla struttura di tag sotto riportata:

<table>
<tr><th>….</th>…….<th>..</th></trD>
<tr><td>…</td>…..<td>…</td>
….
<tr><td>…</td>…..<td>…</td>
</tabke>

In questa struttura è rappresentata una generica tabella che possiede dei tag di intestazione <th>…</th>m un certo numero di righe <tr>…</tr> e un certo numero di colonne all’interno delle righe <td>…</td>.
La tabella è personalizzabile mediante gli attributi “style” o sempre mediante CSS e questa operazione di formato è applicabile alla riga,alle singole colonne, alla tabella o a ad una combinazione di essi.
Un primo esempio di tabella è questo:

<table>
<tr><th>Codice Prodotto</th><th>Descrizione</th><th>Prezzo</th></tr>
<tr><td>A001</td><td>Computer Desktop</td><td>€ 1200,00</td></tr>
<tr><td>A002</td><td>Computer Portatile</td><td>€ 950,00</td></tr>
<tr><td>B001</td><td>Tablet 10.1</td><td>€ 250,00</td></tr>
</table>

L’anteprima della tabella è:

La tabella non ha bordi le colonne hanno una larghezza non fissa e non è stato definito un colore di sfondo.
Modifichiamo la tabella per renderla in formato più accattivante:
Il codice HTML è:

<table border="2" style="background-color: yellow; text-align: center; width=30%;">
<tr><th>Codice Prodotto</th><th>Descrizione</th><th>Prezzo</th></tr>
<tr><td>A001</td><td>Computer Desktop</td><td>€ 1200,00</td></tr>
<tr><td>A002</td><td>Computer Portatile</td><td>€ 950,00</td></tr>
<tr><td>B001</td><td>Tablet 10.1</td><td>€ 250,00</td></tr>
</table>

L’anteprima della tabella è:

L”attributo “widht” determina la larghezza di tutta la tabella rispetto alla larghezza base del documento html, un ulteriore modifica per fissare una larghezza alle colonne è applicabile mediante l’attributo widht applicato alla celle.
E’ possibile fissare anche un rientro dai bordi della tabella al contenuto con l’attributo “celpadding” e allineare il contenuto nelle celle anche in verticale con l’attributo “valign”.
Modifichiamo la tabella con delle nuove impostazioni:

<table border="2" style="background-color: yellow; text-align: center; width=30%; cellpadding="2">
<tr><th>Codice Prodotto</th><th width="50%">Descrizione</th><th>Prezzo</th></tr>
<tr><td>A001</td><td >Computer Desktop</td><td>€ 1200,00</td></tr>
<tr><td>A002</td><td>Computer Portatile</td><td>€ 950,00</td></tr>
<tr><td>B001</td><td>Tablet 10.1</td><td>€ 250,00</td></tr>
</table>

L’anteprima in html è:

In questo modo la larghezza della colonna centrale è stata impostata ad un valore del 50% della larghezza totale della tabella.

Video sul linguaggio HTML 5 e le tabelle