Lezione10: Tabelle ~ Cerca Soluzione 3

Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.

E' difficile?

All'inizio costruire le tabelle in HTML può sembrare complicato, ma se mantieni la calma e fai attenzione, in effetti è esattamente logico - proprio come ogni altra cosa in HTML.
Esempio 1:


 <table>
   <tr>
  <td>Cella 1</td>
  <td>Cella 2</td>
   </tr>
   <tr>
  <td>Cella 3</td>
  <td>Cella 4</td>
   </tr>
 </table>

Sul browser sarà così:

Cella 1	Cella 2
Cella 3	Cella 4

Che differenza c'è tra `<tr>` e `<td>`?

Come vedrai dall'esempio sopra, questo probabilmente è l'esempio HTML più complicato che abbiamo fatto finora. Scomponiamolo e spieghiamo i diversi tag:
Vengono usati 3 elementi diversi per costruire una tabella:

il tag di apertura <table> e il tag di chiusura </table> iniziano e terminano la tabella. Logico.
<tr> è la sigla delle parole inglesi "table row" (cioè, riga della tabella) e inizia e termina una riga orizzontale. Ancora logico.
<td> è la sigla delle parole inglesi "table data" (cioè, dati della tabella). Questo tag inizia e termina ogni cella della riga della tua tabella. Tutto semplice e logico.

Questo è quello che succede nell'Esempio 1: la tabella inizia con un <table>, seguito da un <tr>, che indica l'inizio di una nuova riga. In ogni riga vengono inserite due celle: <td>Cella 1</td> e <td>Cella 2</td>. In seguito la riga viene chiusa con un </tr> e immeditamente dopo inizia una nuova riga <tr>. Anche la nuova riga contiene due celle. La tabella viene chiusa con </table>.
Solo per chiarire: le righe sono le linee orizzontali di celle e le colonne sono linee verticali di celle:

Cella 1	Cella 2
Cella 3	Cella 4

Cella 1 e Cella 2 formano una riga. Cella 1 e Cella 3 formano una colonna.
Nell'esempio sopra la tabella è formata da due righe e due colonne. Tuttavia, una tabella può avere un numero illimitato di righe e di colonne.
Esempio 2:


 <table>
   <tr>
  <td>Cella 1</td>
  <td>Cella 2</td>
  <td>Cella 3</td>
  <td>Cella 4</td>
   </tr>
   <tr>
  <td>Cella 5</td>
  <td>Cella 6</td>
  <td>Cella 7</td>
  <td>Cella 8</td>
   </tr>
   <tr>
  <td>Cella 9</td>
  <td>Cella 10</td>
  <td>Cella 11</td>
  <td>Cella 12</td>
   </tr>
 </table>

Sul browser si vedrà così:

Cella 1	Cella 2	Cella 3	Cella 4
Cella 5	Cella 6	Cella 7	Cella 8
Cella 9	Cella 10	Cella 11	Cella 12

Ci sono degli attributi?

Naturalmente ci sono degli attributi. Per esempio, l'attributo border viene usato per specificare lo spessore del bordo intorno alla tua tabella:
Esempio 3:


 <table border="1">
   <tr>
  <td>Cella 1</td>
  <td>Cella 2</td>
   </tr>
   <tr>
  <td>Cella 3</td>
  <td>Cella 4</td>
   </tr>
 </table>

Sul browser si vedrà così:

Cella 1	Cella 2
Cella 3	Cella 4

Lo spessore del bordo viene specificato in pixel (Vedi la lezione 9)
Così come si fa con le immagini, puoi definire la larghezza della tabella in pixel - o, alternativamente, in percentuale dello schermo:
Esempio 4:


 <table border="1" width="30%">

Questo esempio visualizzerà sul tuo browser una tabella di larghezza 30% dello schermo. Provalo da sola.

Altri attributi?

Ci sono tanti attributi per le tabelle. Qui ne vedi altri due:

align: specifica l'allineamento orizzontale di tutta la tabella, in una riga o in una singola cella. Per esempio, sinistro, centro o destro.
valign: specifica l'allineamento verticale del contenuto di una cella. Per esempio, alto, mezzo o basso.

Esempio 5:


 <td align="right" valign="top">Cell 1</td>

Cosa posso inserire nella mia tabella?

In teoria nella tabella puoi inserire qualsiasi cosa: testo, link, imagini ...MA, le tabelle sono destinate alla presentazione di dati tabellari (cioè dati che possono essere significativamente presentati in righe e colonne), quindi evita di mettere nelle tabelle oggetti, semplicemente perchè vuoi che siano posizionatii uno accanto all'altro.
Tempo fa su Internet - cioè pochi anni fa - le tabelle venivano spesso usate come strumento per il layout. Ma se vuoi avere il controllo di come verranno presentati testo e immagini c'è un modo molto più interessante per farlo (suggerimento: CSS). Ne parleremo di più in seguito.
Adesso metti in pratica quello che hai appena imparato e progetta tabelle di diverse misure, con diversi attributi e contenuto. Questo ti dovrebbe tenere impegnato per un po' di ore.