Le tabelle: nozioni elementari

L'uso delle tabelle in HTML è ampio e, a volte, persino sovrabbondante. Le tabelle, infatti, possono essere utilizzate non solo per presentare dati in maniera ordinata, ma anche per creare la struttura della pagina.

Per comprendere meglio come sono strutturate le tabelle divideremo la trattazione dell'argomento in tre momenti:
1. L'intestazione e il piede della tabella
2. L'elemento caption: didascalia
3. Il corpo della tabella

Il corpo di una tabella è composto da righe, che corrispondono all'elemento TR; e colonne associate alle righe, che corrispondono all'elemento TD.

Il corpo della tabella

a. La disposizione degli elementi

La disposizione degli elementi all'interno di una tabella segue un ordine ben preciso. Ogni elemento td deve essere annidato all'interno di tr, e entrambi devono trovarsi all'interno di table.

<table summary=" semplice tabella " style="background: yellow">
<td>
QUESTO TESTO APPARIRÀ ALL'INTERNO DELLA CELLA DELLA TABELLA
</td>
</tr>
</table>

La tabella descritta in precedenza ha una sola riga e una sola colonna. Per visualizzare meglio l'esempio abbiamo impostato un colore di sfondo specificandolo con l'attributo style="background: valore;".
Infine, un'altra considerazione deve essere fatta in merito all'attributo obbligatorio summary. Lo scopo di questo attributo è permettere una sintesi del contenuto della tabella per fornire a coloro che adoperano gli interpreti non visuali un elemento che ne semplifichi la consultazione.

Ecco come si presenterà:

QUESTO TESTO APPARIRÀ ALL'INTERNO DELLA CELLA DELLA TABELLA
b. Il codice di una tabella articolata.

Per creare una tabella con più celle dobbiamo lavorare sugli elementi tr e td.

<table summary="esempio di tabella con due righe e due colonne">
<tr>
<td style="background: yellow">
prima riga, cella 1
</td>

<td style="background: red"> prima riga, cella 2
</td>
</tr>

<td style="background: green">
<td> seconda riga, cella 1
</td>

<td style="background: maroon"> seconda riga, cella 2
</td>
</tr>
</table>
#FFD814

Ecco il risultato:

prima riga: colonna 1 prima riga: colonna 2
seconda riga: colonna 1 seconda riga: colonna 2