Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

le tabelle

2 maggio 2011, Scritto da , category HTML

In HTML le tabelle nascono per consentire la presentazione di informazioni in forma, appunto, tabellare. Esempi di questo utilizzo sono report, listini prezzi, registri etc.

Tuttavia, con il passare del tempo, le tabelle hanno acquistato sempre più importanza tanto da diventare il principale elemento per creare layout, più o meno complessi, di interi siti web.

Questo “disuso” si è diffuso grazie agli editor visuali che consentivano una facile manipolazione delle tabelle oltre ad una discreta pigrizia dei primi sviluppatori che, una volta appreso il metodo tabellare per creare layout, hanno clonato e diffuso questo approccio.

Tag delle tabelle

  • <table></table> è il tag di inizio e fine tabella. Senza di questo la tabella non viene creata
  • <tr></tr> (tr = table row) tag di inizio e fine riga, serve per creare una nuova riga di elementi
  • <td></td> (td = table data) tag di inizio e fine cella: serve per contenere le informazioni che vogliamo mostrare
  • <caption></caption> serve per inserire un titolo che descriva la tabella. Questo titolo non viene presentato all’interno della tabella ma subito prima. E’ opzionale.
  • <thead></thead> sezione dell’intestazione della tabella. Serve per presentare i nomi delle colonne che comporranno la nostra tabella. E’ un tag  opzionale ma molto comodo nei casi in cui vogliamo dare un look diverso alle celle della prima riga.
  • <th></th>: ha la stessa funzione del tag <td> ma si utilizza all’interno della sezione thead
  • <tbody></tbody> sezione che rappresenta le informazioni che costituiscono il corpo della tabella: in pratica, dove vengono presentati i dati da riportare. E’ opzionale.
  • <tfoot></tfoot> sezione che contiene le righe per il footer. Generalmente usato per dare una formattazione diversa ai dati di sintesi dei report. E’ opzionale.

Attributi delle tabelle

  • width / height: attributi necessari per impostare la larghezza e l’altezza della tabella e della cella. Questa misura può essere espressa in pixel o in percentuale
  • border: definisce lo spessore della tabella e della cella.
  • cellspacing / cellpadding: serve per determinare la spaziatura tra celle (ovvero la distanza tra una cella e l’altra) e la spaziatura all’interno della singola cella (ovvero la distanza tra il bordo della cella e la scrittura del contenuto)
  • bgcolor / background: serve per impostare un colore o una immagine di sfondo alla cella e/o alla tabella. In particolare il bgcolor si usa frequentemente per creare righe a colori alterni
  • align: se attribuito alla tabella ne determina il posizionamento relativo all’oggetto in cui la tabella è contenuto. Se attribuito alla cella determina il posizionamento del contenuto al suo interno.
  • valign: serve per specificare un posizionamento verticale all’interno della cella. Può assumere i valori di top, bottom o middle
  • nowrap: serve per evitare che il testo contenuto all’interno della cella non venga spezzato e mandato a capo. Utile in particolari casi specialmente nelle celle di intestazione o con particolari valori numerici.
  • rowspan / colspan: attributo necessario per disporre il contenuto della cella in più righe / colonne. Molto usato per creare layout di pagina o per unire celle con contenuti molto corposi.

Esempi

Creazione di una tabella di 5 righe -intestazione, body e footer- e 3 colonne.

<table border="1" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th>Prodotto</th>
<th>Q.tà</th>
<th>Prezzo</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" align="3">Totale 123456</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>carta</td>
<td>2</td>
<td>3 €</td>
</tr>
<tr>
<td>penna</td>
<td>1</td>
<td>2 €</td>
</tr>
<tr>
<td>libro</td>
<td>1</td>
<td>10 €</td>
</tr>
</tbody>
</table>

Il risultato sarà:

Prodotto Q.tà Prezzo
Totale 123456
carta 2 3 €
penna 1 2 €
libro 1 10 €

Vediamo ora una tabella simile alla precedente ma con due celle unite per colonna e per riga

<table border="1" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2">carta</td>
<td>3 €</td>
</tr>
<tr>
<td>penna</td>
<td>1</td>
<td>2 €</td>
</tr>
<tr>
<td rowspan="2">libro</td>
<td>1</td>
<td>10 €</td>
</tr>
<tr>
<td>1</td>
<td>10 €</td>
</tr>
</table>

Il risultato sarà:

carta 3 €
penna 1 2 €
libro 1 10 €
1 10 €