• Home
• Didattica
• Download
• News
• Blog
• Tools
• Forum
• Altro...

Corsi on-line

• Altri canali:
• Hosting
• Web Grafica
• Toolbox
• WMDir.it

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 ma deve essere inserito prima di tbody.

In effetti i primi tre sono i più utilizzati, mentre gli altri vengono utilizzati solo qualora ce ne sia un effettivo bisogno. I tag thead, tbody e tfoot servono per raggruppare righe e definirne il contenuto: thead definisce l'intestazione, tfoot la chiusura e tbody le righe di dati.

per completezza vedremo esempi per tutti i tag, dando però precedenza ai primi tre tag: <table>, <tr> e <td>.

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>
    <tfoot>
        <td colspan="2">Ho mostrato 3 utenti</td>
    <tfoot>
    <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>
</table>

Si noti che, nonostante sia posizionato prima di tbody, il contenuto di tfoot verrà mostrato al termine delle righe di dati.

• << Lezione Precedente
• Indice Guida
• Lezione Successiva >>