Le tabelle

12 marzo 2010

Prima di iniziare facciamo una importante premessa, l’uso delle tabelle per dividere la pagina in diverse sezioni è uno strumento estremamente efficace ma, per evitare problemi di usabilità, non dovrebbero essere utilizzate come sostituti di una corretta formattazione con i fogli di stile.

Attraverso le proprietà degli elementi che costituiscono la tabella è possibile definire in modo definitivo le caratteristiche che dovrà avere.

Come creare una tabella

Come in qualunque word processor, è possibile inserire in una pagina web dati ordinati in forma di tabella. Prima di passare alla sintassi, è importante capire come essa è strutturata.

Si tratta, semplificando, di un insieme di righe e colonne che si incrociano. I punti di incrocio formano le singole celle. La tabella che vediamo qui sotto, è formata da 2 righe e 3 colonne, per un numero complessivo di 6 celle:

Schema di tabella

Per definire la struttura di una tabella, il linguaggio HTML utilizza tre tag di base:

  1. <table>: definisce la tabella
  2. <tr> (table row): definisce una riga
  3. <td> (table data): definisce una cella

Fondamentale è l’ordine in cui vanno inseriti e ordinati. Per prima cosa si inserisce il tag <table>. Si passa quindi a dichiarare l’inizio di una nuova riga con <tr>. All’interno della riga si inseriscono tanti tag <td> per quanto sono le colonne. Chiariamo con un esempio, realizzando una tabella di 2 righe x 3 colonne come quella vista sopra:

<table> <!– Inizia la tabella –>
<tr> <!– Inizia la prima riga –>
<td>Cella 1</td> <!– Prima colonna –>
<td>Cella 2</td> <!– Seconda colonna –>
<td>Cella 3</td> <!– Terza colonna –>
</tr> <!– Fine della prima riga –>
<tr> <!– Inizia la seconda riga –>
<td>Cella 4</td> <!– Prima colonna –>
<td>Cella 5</td> <!– Seconda colonna –>
<td>Cella 6</td> <!– Terza colonna –>
</tr> <!– Fine della seconda riga –>
</table> <!– Fine della tabella –>

Il risultato sarà questo:

Cella 1 Cella 2 Cella 3
Cella 4 Cella 5 Cella 6

La cosa più importante da capire è che il testo o le immagini da inserire nella tabella vanno solo all’interno dei tag <td>, quelli cioè che definiscono le singole celle.

La maggior parte degli editor HTML è dotata di strumenti per la creazione automatica di tabelle.

Se vuoi aggiornamenti su Le tabelle inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Le tabelle

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy