HTML.net

Lezione 10: Tabelle

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ì:

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 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ì:

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ì:

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.

Search