PROGRAMMIAMO
HTML - Creare una tabella
Tabelle

In HTML una tabella è formata da una serie di celle suddivise in righe e in colonne:

prima cella seconda cella terza cella
quarta cella quinta cella sesta cella
settima cella ottava cella nona cella
decima cella undicesima cella dodicesima cella

Le celle possono contenere qualsiasi cosa: testo, liste, immagini e persino altre tabelle.

Le tabelle sono state create per visualizzare dati in forma tabellare, come per esempio una tabella che riporti la popolazione italiana censita in diversi anni. Tuttavia il loro uso si è diffuso anche allo scopo di disporre ordinatamente il testo e le immagini su una pagina web. Tale risultato si ottiene mediante l'uso di tabelle nascoste, invisibili all'utente. Attualmente la disposizione degli elementi della pagina per mezzo delle tabelle nascoste Ŕ deprecato, in quanto Ŕ stato sostituito dal posizionamento con i fogli stile.

Creare una tabella

Una tabella è delimitata da un tag <table> di apertura e un tag </table> di chiusura. All'interno di tali tag, si trovano le righe <tr> e le celle <td> che compongono la tabella.

Si consideri l'esempio seguente:

<table border="1">

<tr> <!-- INIZIO PRIMA RIGA -->
<td> Prima cella della prima riga </td>
<td> Seconda cella della prima riga </td>
<td> Terza cella della prima riga </td>
</tr> <!-- FINE PRIMA RIGA -->

<tr> <!-- INIZIO SECONDA RIGA -->
<td> Prima cella della seconda riga </td>
<td> Seconda cella della seconda riga </td>
<td> Terza cella della terza riga </td>
</tr> <!-- FINE SECONDA RIGA -->

</table>

che produce la seguente visualizzazione nel browser

Prima cella della prima riga Seconda cella della prima riga Terza cella della prima riga
Prima cella della seconda riga Seconda cella della seconda riga Terza cella della terza riga

L'attributo border="1" serve per visualizzare il bordo della tabella. Gli unici valori possibili per questo attributo sono 1 (presenza di bordo) oppure 0 (nessun bordo - equivale ad omettere l'attributo border).

Attualmente in HTML 5 l'attributo border Ŕ deprecato e deve essere sostituito con gli stili. Tuttavia per i nostri semplici esempi il suo uso Ŕ comodo, in quanto non ci obbliga a specificare nel dettaglio il bordo di ogni singola cella della tabella.

Si osservi che

 

Centrare il testo di una cella

Per centrare il testo all'interno di una cella bisogna usare l'attributo style="text-align:center" che abbiamo giÓ incontrato per centrare i paragrafi e le immagini.

Si osservi questo esempio (in cui, per comoditÓ, abbiamo usato l'attributo border attualmente deprecato):

<table border="1">

<tr> <!-- INIZIO PRIMA RIGA -->
<td style="text-align:center" > Al centro! </td>
<td> Seconda cella della prima riga </td>
<td> Terza cella della prima riga </td>
</tr> <!-- FINE PRIMA RIGA -->

<tr> <!-- INIZIO SECONDA RIGA -->
<td> Prima cella della seconda riga </td>
<td> Seconda cella della seconda riga </td>
<td> Terza cella della terza riga </td>
</tr> <!-- FINE SECONDA RIGA -->

</table>

che produce la seguente visualizzazione:

Al centro! Seconda cella della prima riga Terza cella della prima riga
Prima cella della seconda riga Seconda cella della seconda riga Terza cella della terza riga

 

VIDEO LEZIONE: Creare tabelle in HTML

precedente -successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it