Guida di HTML (base)

Tabelle

Con questo capitolo andiamo ad esplorare un'altra indispensabile "costruzione" HTML: le tabelle.

Tutti sappiamo cos'è una tabella: è una struttura fatta di righe e colonne, in cui ogni cella contiene dati (numeri, parole, immagini) essenziali e schematici, in modo che possano essere letti facilmente e velocemente dagli utenti.

Tabella nutrizionale del cioccolato
Tabella nutrizionale del cioccolato. nota: fonte sconosciuta, in ogni caso fuori dalla licenza Creative Commons di RePNI

Spesso chi crea siti web usa le tabelle anche per disegnare la struttura delle pagine. Pensiamo ad esempio al semplice caso in cui volessimo dividere un flusso di testo in due colonne: non possiamo farlo usando gli strumenti che abbiamo adesso, ma sarebbe molto semplice utilizzando una tabella, formata da un'unica riga e due colonne.

Una tabella è usata per organizzare una lista di files scaricabili
Una tabella è utilizzata per organizzare una lista di files scaricabili.

Il tag <table>

Costruire una tabella in HTML non è semplice come costruire un paragrafo o un elenco puntato. Questo perchè una tabella è formata da tanti oggetti diversi. Un paragrafo è formato da un solo elemento, il tag <p>; un elenco è formato da due elementi: il tag <ul> che contiene l'intero elenco, e il tag <li>, che marca un singolo punto. In una tabella sono sempre presenti almeno tre elementi:

  • Il tag <table>, che contiene l'intera tabella, come una sorta di cornice.
  • Il tag <tr> (table row = riga), che contiene una singola riga all'interno della tabella.
  • Il tag <td> (table data), che contiene una singola cella all'interno della riga.

Questi oggetti sono combinati secondo lo schema seguente:

Schema di tabella: <table> contiene <tr>, <tr> contiene <td>.
Schema di tabella: <table> contiene <tr>, <tr> contiene <td>.

Questi elementi devono essere sempre presenti: non ha senso creare una tabella senza righe, nè righe senza celle, nè celle senza una tabella e via dicendo.

Ma passiamo a "mettere le mani" su questi tag: scriviamo il codice per la più semplice tabella che possiamo creare, ovvero quella formata da una sola riga e una sola colonna (in pratica un riquadro attorno ad una cella):

<table>
	<tr>
		<td>Ciao!</td>
	</tr>
</table>

Questi tag produrranno il seguente risultato:

Ciao!

Non somiglia molto a una tabella vero? Possiamo fare qualcosa aggiungendo l'attributo border; se modifichiamo la prima riga in <table border="1"> otteniamo questo risultato:

Ciao!

Parleremo meglio di border nei prossimi paragrafi, per il momento concentriamoci sulla tabella vera e propria, e proviamo ad aggiungere una colonna, in modo da avere due celle una accanto all'altra. Per fare questo è sufficiente inserire due <td> all'interno della stessa riga:

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

Quello che otteniamo è:

Cella 1 Cella 2

Chi indovina ora come si fa ad aggiungere una riga? Proprio così, basta ricopiare due volte il tag <tr> e il suo contenuto (ricordiamo infatti che tr sta per table row):

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

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

Questo è il risultato:

Cella 1 Cella 2
Cella 3 Cella 4

Con questo direi che abbiamo terminato la parte fondamentale dell'articolo: aggiungere altre righe e colonne è solo questione di ricopiare i tag <tr> e <td>, proprio come abbiamo appena fatto. Ovviamente ogni riga deve avere lo stesso numero di celle.

Fondere righe e colonne

Cosa succede però se una riga ha meno celle di un'altra? Sicuramente si tratta di una stranezza, e infatti in HTML questa è un'anomalia:

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

	<tr>
		<td>Cella 3</td>
	</tr>
</table>

Il browser, non riuscendo a costruire le due colonne, lascia un buco nel posto in cui ci dovrebbe essere la cella mancante:

Cella 1 Cella 2
Cella 3

Colspan

Esistono però dei casi in cui questo è proprio quello che vogliamo ottenere. Prendiamo questo esempio:

Primo quadrimestre
Matematica 7
Latino 9
Secondo quadrimestre
Matematica 8
Latino 10

In questo caso la prima e la quarta riga contengono una sola cella, che però copre lo spazio di due colonne. Per far capire al browser che questa cella deve occupare lo spazio di entrambe le colonne si usa l'attributo colspan sulla cella da "espandere". Osserviamo le righe 3 e 17 del codice relativo alla tabella appena vista:

<table border="1">
	<tr>
		<td colspan="2"><strong>Primo quadrimestre</strong></td>
	</tr>

	<tr>
		<td>Matematica</td>
		<td>7</td>
	</tr>

	<tr>
		<td>Latino</td>
		<td>9</td>
	</tr>

	<tr>
		<td colspan="2"><strong>Secondo quadrimestre</strong></td>
	</tr>

	<tr>
		<td>Matematica</td>
		<td>8</td>
	</tr>

	<tr>
		<td>Latino</td>
		<td>10</td>
	</tr>

</table>

L'attributo colspan="2" sul tag <td> fa sì la cella occupi lo spazio di due colonne della tabella. A questo punto la cella "vale doppio", e può quindi rimanere sola sulla riga.

Rowspan

Torniamo all'esempio iniziale (il codice corrispondente è riportato all'inizio del paragrafo):

Cella 1 Cella 2
Cella 3

Con l'attributo colspan essenzialmente abbiamo visto come fare per "allargare" la Cella 3, in modo che occupi lo spazio di due colonne. Questo però non è l'unico modo per riempire il buco lasciato dalla mancante Cella 4.

Un altro modo potrebbe essere quello di "allungare" la Cella 2 fino a coprire lo spazio di due righe.

Questo è esattamente quello che fa il tag rowspan:

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

	<tr>
		<td>Cella 3</td>
	</tr>
</table>

Nel codice qui sopra, alla riga 4, l'attributo rowspan="2" fa sì che la cella vada a coprire il buco sottostante:

Cella 1 Cella 2
Cella 3

Titoli e sezioni

È arrivato il momento di dare un'occhiata ad alcuni altri tag molto usati nella creazione di tabelle.

Table header

Il primo tag che vediamo è <th> (table header), che serve a creare un'intestazione per le colonne. <th> si comporta esattamente come <td>; la differenza sta nel fatto che le celle create con <th> sono in rilievo rispetto alle altre (tipicamente il testo è in grassetto e centrato nella cella):

<table border="1">
	<tr>
		<th>Materia</th>
		<th>Voto</th>
	</tr>

	<tr>
		<td>Matematica</td>
		<td>7</td>
	</tr>

	<tr>
		<td>Latino</td>
		<td>9</td>
	</tr>
</table>

Alle righe 3 e 4 il tag <th> è usato per creare celle di intestazione. Il risultato è:

Materia Voto
Matematica 7
Latino 9

Naturalmente vale per <th> tutto quello che abbiamo già detto per <td>, e in particolare la possibilità di applicare gli attributi colspan e rowspan.

Caption

Il tag <caption>, posto immediatamente dopo l'apertura della tabella, serve per aggiungere una didascalia alla tabella che stiamo creando:

<table border="1">
<caption>I miei voti</caption>

[...]

</table>

La tabella sarà così accompagnata da un testo di descrizione:

I miei voti
Materia Voto
Matematica 7
Latino 9

Sezioni: header, footer, body

I web designer più puntigliosi usano dividere le tabelle in tre sezioni: header (testa), footer (piede) e body (il contenuto vero e proprio). Questa divisione non incide sul layout, la grafica, della tabella (che viene visualizzata esattamente come una normale tabella), ma serve solo a definire un po' meglio la logica della tabella. Vediamo subito un esempio:

I miei voti
Materia Voto
Media 8
Matematica7
Latino9

In questa tabella è evidente la suddivisione delle tre parti: la testa (head) è data dalla riga di intestazione (Materia e Voto), il corpo (body) sono i voti veri e propri, e il piede (foot) è l'ultima riga, contenente la media dei voti. Questo è il relativo codice HTML:

<table border="1">
<caption>I miei voti</caption>
	<thead>
		<tr>
			<th>Materia</th>
			<th>Voto</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<th>Media</th>
			<th>8</th>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<td>Matematica</td><td>7</td>
		</tr>
		<tr>
			<td>Latino</td><td>9</td>
		</tr>
	</tbody>
</table>

Notato nulla di strano? Ci sono almeno due cose da osservare:

  • Le varie righe della tabella sono contenute all'interno di nuovi tag che non conoscevamo: <thead>, <tfoot> e <tbody>. Questi tag sono usati per marcare le varie sezioni della tabella.
  • Nonostante il piede si trovi graficamente dopo il corpo (ovviamente!), il tag <tfoot> è scritto prima di <tbody>; questo non è un mio errore: chi ha creato l'HTML ha specificato che questo è il modo corretto di ordinare le sezioni della tabella, prima la testa, poi il piede, e infine il corpo. Sarà il browser poi che, leggendo il file HTML, andrà a disegnare il contenuto di <tfoot> dopo quello di <tbody>.

L'ultima cosa che diciamo sulle sezioni delle tabelle è che il tag <tbody> può essere ripetuto più volte: in questo modo si possono creare raggruppamenti di righe all'interno della stessa tabella. Ad esempio, se volessimo riportare in tabella tutti i voti ottenuti nel quadrimestre, potremmo pensare di creare un tbody per ogni materia.

Attributi: bordi, allineamento e spaziatura

Al contrario degli altri tag, le tabelle prevedono diversi attributi di formattazione fisica. Non ho indagato molto sulla ragione di questa scelta, ma penso sia dovuta al fatto che le tabelle sono per natura oggetti grafici (servono a dare una struttura "visiva" ai dati), e non solo logici come, come possono essere paragrafi, titoli e tutti gli altri tag per cui l'aspetto grafico è completamente trascurabile. Chi ha idee migliori le condivida, grazie!

width e border

Come le immagini, le tabelle dispongono di un attributo width, che ne specifica la larghezza (ad esempio, il tag <table width="100%"> produrrà una tabella larga l'intera pagina). Se questo attributo non è definito, la tabella occuperà il minore spazio possibile per visualizzare tutti i dati.

L'attributo border, che abbiamo già incontrato nei paragrafi precedenti, serve appunto a specificare la dimensione del bordo:


Uso dell'attributo border.

Per completezza, cito altri due attributi utili per la gestione dei bordi: frame e rules. Questi due attributi sono poco diffusi e male supportati dai browser; per questo motivo, e per il fatto che i CSS possono sostituirli, non li tratteremo. Chi volesse approfondire la questione può trovare spiegazione ed esempi d'uso (in inglese) sul sito http://www.w3schools.com/ (frame e rules).

Spaziatura: cellspacing e cellpadding

I due attributi che esaminiamo in questo paragrafo riguardano la spaziatura degli elementi, ovvero la distanza tra un oggetto e l'altro all'interno della tabella. In particolare:

  • L'attributo cellspacing (spacing in inglese significa proprio "spaziatura") serve a indicare la distanza da mantenere tra una cella e l'altra.
  • L'attributo cellpadding (padding letteralmente significa "imbottitura") serve a indicare la distanza da mantenere tra il contenuto e il bordo, all'interno della cella.

Un'illustrazione può aiutare a chiarire il concetto:

Spacing e padding in una tabella

La seguente immagine mostra alcuni esempi d'uso dell'attributo cellspacing:

Questa invece si riferisce a cellpadding:

Allineamento verticale e orizzontale

Gli ultimi due attributi che esaminiamo, align e valign, non sono attributi di <table> come quelli che abbiamo visto finora, ma si applicano alle singole celle: <td> e <th>. Questi attributi riguardano l'allineamento del testo all'interno della cella:

  • align (<td align="valore">...</td>) serve a regolare l'allineamento orizzontale del testo, proprio come quando, in Open Office o Word, scegliamo di impostare il testo centrato, o allineato a destra. I valori possibili per questo attributo infatti sono left (sinistra), right (destra), center (centrato) e justify (giustificato):

  • valign (<td valign="valore">...</td>) serve a regolare l'allineamento verticale del testo. I valori possibili per questo attributo sono top (in alto), middle (in mezzo) e bottom (in basso):

Tabelle e struttura

Le tabelle in HTML sono state create con lo scopo di visualizzare ogni genere di dati in modo ordinato e schematico, organizzandoli in righe e colonne.

Nonostante questo, i "pionieri" del webdesign sono abituati ad usare le tabelle anche per impaginare il testo, realizzando delle strutture che sarebbero impossibili da descrivere utilizzando soltanto gli altri tag HTML.

Layout complesso, realizzato tramite tabelle Layout complesso, realizzato tramite tabelle (con struttura in evidenza)
Esempio di layout realizzato tramite tabelle. La figura a destra mostra la struttura che si nasconde dietro la simpatica impaginazione della ricetta. Nota: la ricetta è tratta da http://www.nonnastella.com/, ed è utilizzata nel rispetto della licenza CC by-nc-nd; l'immagine è una rielaborazione dell'originale prelevato dal sito The Cookies Shop, ed è utilizzata nel rispetto della licenza CC by-nc-sa.

Chi indovina come va a finire quando si parla di formattazione fisica nell'HTML moderno? Come al solito, oggi si preferisce affidare ai fogli di stile CSS il layout (struttura grafica) delle pagine, lasciando alle tabelle la loro funzione originaria: la rappresentazione dei dati in righe e colonne.

C'è da dire che le tabelle restano comunque molto comode per formattare le pagine, in alcuni casi anche più dei CSS; il dibattito infatti non è del tutto chiuso tra gli stretti sostenitori degli standard, che non transigono sull'uso delle tabelle dalla struttura delle pagine, e chi invece cede alla tentazione e ogni tanto rispolvera i metodi della "vecchia scuola". Come sempre in questi casi, la decisione giusta spetta al buon senso di chi costruisce la pagina, che deve capire se l'utilizzo delle tabelle è dovuto solo alla pigrizia di imparare i CSS, o se effettivamente ne trae un vantaggio.

In breve...

In questo capitolo abbiamo visto che...

  • Per descrivere le tabelle, in HTML si usano i tag <table> (tabella), <tr> (table row, riga) e <td> (table data, cella).
  • Ogni cella <td> è contenuta in una riga <tr>, ogni riga è contenuta nella tabella <table>.
  • Esistono delle celle speciali, <th> (table header), da usare per le intestazioni; in queste celle il testo è in rilievo.
  • Una cella può occupare lo spazio di più di una colonna, grazie all'attributo colspan (ad esempio, <td colspan="3"> produrrà una cella che vale per tre colonne).
  • Una cella può anche estendersi su più righe, grazie all'attributo rowspan (ad esempio, <td rowspan="3"> produrrà una cella che si estende su tre righe)
  • Le tabelle possono essere divise in sezioni. Nell'ordine, i tag da utilizzare sono:
    • <caption> - testo di descrizione per l'intera tabella.
    • <thead> - righe di intestazione.
    • <tfoot> - righe di conclusione.
    • Uno o più tag <tbody> - righe centrali.
  • I principali attributi per il tag <table> sono:
    • width - larghezza della tabella.
    • border - dimensione del bordo.
    • cellspacing - spazio tra le celle.
    • cellpadding - distanza del contenuto dal bordo delle celle.
  • I principali attributi per il tag <td> (e quindi anche <th>) sono:
    • colspan - vedi sopra.
    • rowspan - vedi sopra.
    • align - allineamento orizzontale del contenuto della cella.
    • valign - allineamento verticale del contenuto della cella.
  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag