Home   About Me   Guestbook   Guide

Tabelle, righe e celle


La creazione di una pagina Web dall'aspetto gradevole e ben strutturato si basa sull'utilizzo delle tabelle, ovvero griglie in cui inserire il contenuti della pagina, in modo da poterli disporre affiancati o in cascata a seconda dei propri gusti.

In HTML si utilizzano diversi tag per realizzare una tabella:
  • table - crea una tabella;
  • tr - crea una riga di una tabella;
  • td - crea una cella di una tabella.
Ma anche:
  • thead - crea l'intestazione di una tabella;
  • th - crea una cella per l'intestazione di una tabella;
  • tbody - crea il corpo di una tabella;
  • tfoot - crea la chiusura di una tabella.
In effetti i primi tre sono i più utilizzati, mentre gli altri sono ritenuti inutili, sia da un punto di vista funzionale che per evitare uno spreco di codice.

Ad ogni modo, per completezza, li vedremo tutti, dando però precedenza e risalto ai primi tre.

Vediamo un primo esempio di tabella: 
<table>
<tr>
<td>A</td>

<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>

</table>
Otterremo una struttura del genere:

Il tag table suporta i seguenti principali attributi:
  • align - allinea l'intera tabella ma se ne sconsiglia l'utilizzo a favore dell'inclusione di una tabella in un elemento di testo con tanto di allineamento (quindi non prendiamolo da sunito in considerazione), come nell'esempio che segue:
<div align="center">
<table>

<tr>
<td>A</td>
</tr>
</table>
</div>
  • width - imposta la larghezza di una tabella in pixel o in percentuale;
  • border - imposta il bordo di una tabella;
  • cellpadding - imposta la spaziatura tra il contenuto della cella ed i margini della cella stessa;
  • cellspacing - imposta la distanza tra le celle della tabella.
Vediamo un esempio completo: 
<table width="500" cellpadding="5" cellspacing="0">
Il bordo, se non specificato, ha valore di default zero (0).

Vediamo adesso due importanti attributi del tag td:
  • colspan - unisce due o più celle in orizzontale;
  • rowspan - unisce due o più celle in verticale.
Vediamo un esempio di utilizzo di colspan: 

<table border="1">
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>

</tr>
</table>
Otterremo il seguente risultato:

Si ricorda che td supporta anche gli attributi align e width, i cui scopi credo siano già ben noti.

Esiste anche l'attributo valign che allinea il contenuto in verticale attraverso i seguenti valori:
  • top - allineamento verso l'alto;
  • middle - allineamento centrato;
  • bottom - allineamento verso il basso.
Vediamo adesso un esempio di utilizzo di rowspan: 
<table border="1">
<tr>
<td rowspan="2">A</td>
<td>B</td>

</tr>
<tr>
<td>C</td>
</tr>
</table>
Otterremo il seguente risultato:

Concludiamo con un esempio completo di tabella: 

<table border="1">
    <thead>
        <th>Nome</th>
        <th>Cognome</th>
    <thead>

    <tbody>
        <tr>
            <td>Giuseppe</td>
            <td>Verdi</td>
        </tr>

        <tr>
            <td>Antonio</td>
            <td>Bianchi</td>
        </tr>
        <tr>

            <td>Mario</td>
            <td>Rossi</td>
        </tr>
    </tbody>
    <tfoot>

        <td colspan="2">Tabella degli utenti</td>
    <tfoot>
</table>


Torna indietro